[Favicon] Colocar un icono en la barra de direccciones

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:

• Un programa de diseño (Gimp, pixia, inkscape...) (ver Programas de grafismo)
• Programas especializado (aconsejo IconEdit32 o también IconWare)
• Sitios web que transforma una imagen en favicon:
  • http://www.chami.com/html-kit/services/favicon/
  • http://www.favicon.co.uk/
  • http://www.genfavicon.com/es/
  • http://tools.dynamicdrive.com/favicon/
  • http://favikon.com/

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

• http://ilmaistro.com/como-crear-un-favicon/
• http://www.tufuncion.com/favicon_iconos_ico

PD: El artículo original fue escrito por Jeff, contribuidor de CommentCaMarche