Quizás hayas observado la presencia de un icono a la izquierda de la URL en la barra de direcciones del navegador. Algunas páginas web tienen asociadas estos iconos a ellas.
Asociar este icono a tu página web es muy fácil.
Crear un favicon
Existen varios métodos:
Si se respetan los estándares
Para comenzar debemos crear una imagen en formato png o gif (formatos estándares).
(podemos también utilizar formatos menos comunes, ver el enlace al final de la página).
Puedes elegir varias dimensiones: 16x16 o 32x32 pixeles.
Si no se respetan los estándares
Como de costumbre, Internet Explorer no respeta los estándares y no utiliza las imágenes con los formatos correctos.
Para este navegador, hay que utilizar una imagen en formato ico (o bmp) (no estándar, de preferencia evitarlo), y dimensiones de16x16 pixeles.
Poner favicon en línea
Luego tienes que poner el favicon en tu página web e indicar su ruta con la etiqueta link entre las etiquetas de cabecera
head.
Veamos un ejemplo con una imagen en formato png:
<link rel="icon" type="image/png" href="/images/mifavicon.png" />
Dependiendo del formato, el atributo “type” cambiará:
- Formato png: image/png
- Formato gif: image/gif
- Formato jpeg (extension jpg o jpeg): image/jpeg
Si tienes un favicon que no respeta los estándares, el atributo “rel” también cambia:
<link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico" />
También se puede poner un archivo favicon.ico en la raíz de la página para que algunos navegadores lo utilicen automáticamente, pero esto no es estándar.
Notas
- Creo que no es muy útil hacer un favicon para IE, dado que éste sólo lo utiliza para los favoritos.
- Si utilizas un icono en un formato estándar y otro en formato ico, no te aconsejo que pongas este último en la raíz: los navegadores lo mostrarán si no encuentran la imagen en formato png.
- También podemos utilizar un icono animado (ver enlace).
Enlaces relacionados
PD: El
artículo original fue escrito por Jeff, contribuidor de
CommentCaMarche
Colocar icono mi pc en windows 7