Menu

Cómo colocar un icono en la barra de direcciones (favicon)

USESDEFRITBR
Haz una pregunta
Probablemente hayas observado que en la barra de direcciones del navegador, algunas páginas web muestran una imagen justo a la izquierda de la URL. Se le conoce como favicon o icono de favoritos, y es la imagen que representa a un sitio web, ya que también suele aparecer en la pestaña del navegador, antecediendo al título de la página. Crear y asociar este icono a tu página web es muy fácil.


Cómo crear un favicon

Existen varias maneras de crear un favicon. Es posible hacerlo con programas de diseño como GIMP, Pixia, o Inkscape; herramientas especializadas como IconEdit32 o IconWare; o servicios web que transforman una imagen en un favicon. Entre estos últimos se encuentran FavIcon from Pics, Favicon.ico Generator, GenFavIcon, FavIcon Generator y Favikon.

Cómo hacer un favicon compatible con la mayoría de navegadores

Para comenzar debes crear una imagen en formato PNG o GIF (formatos estándar).
También puedes utilizar formatos menos comunes como ICO o JPG. Puedes elegir varias dimensiones: 16x16, 32x32 o 64×64 píxeles.

Cómo hacer un favicon para Internet Explorer

Dado que Internet Explorer no soporta imágenes en los formatos estándar, hay que utilizar una imagen en formato ICO (o BMP, no estándar, de preferencia evitarlo), y dimensiones de 16x16 píxeles.

Cómo poner un favicon en tu página web

Para que el favicon se muestre correctamente en la web tienes que editar el código HTML de tu página web. Simplemente, especifica su ruta empleando una etiqueta Link entre las etiquetas de cabecera Head del archivo HTML.

A continuación, puedes ver un ejemplo con un favicon en formato PNG, ubicado en la carpeta imágenes: 


<link rel="icon" type="image/png" href="/imágenes/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 está en un formato de imagen estándar, el atributo rel también cambia: 


<link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico" />

También es posible 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.

Observaciones

No es muy útil hacer un favicon para IE, dado que este solo lo utiliza para los favoritos. Por otra parte, si utilizas un icono en un formato PNG y otro en formato ICO, no es aconsejable que pongas este último en la raíz: algunos navegadores utilizan por defecto la extensión ICO. También es posible utilizar un icono animado en formato GIF.


Foto: © bannosuke - 123RF.com

Consulta también