Favicon - Colocar un icono en la barra de direccciones

Mayo 2017


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


Consulta también

Artículo original escrito por . Traducido por Carlos-vialfa. Última actualización: 15 de agosto de 2008 a las 22:10 por Carlos-vialfa.
El documento «Favicon - Colocar un icono en la barra de direccciones» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.