Cómo colocar un icono o favicon en HTML

Habrás observado que algunas páginas web muestran una pequeña imagen en el encabezado de la pestaña de la página, en la barra de direcciones y en los marcadores del navegador. Esta imagen es conocida como icono de favoritos o favicon. En este artículo veremos cómo crear y asociar este icono a tu página de manera sencilla.

¿Cómo crear un favicon?

Existen varias maneras de crear un favicon. El formato de estos iconos ha de ser .ico, al menos si queremos que funcione en todos los navegadores (los más actuales aceptan los formatos .png o .jpg). Ello se puede realizar con programas de edición de imágenes, como GIMP (software de código abierto totalmente gratuito), que nos permite ajustar la imagen al formato y al tamaño requeridos. Si buscamos algo más sencillo y directo, también existen servicios web con los que podemos obtenerlo de manera inmediata. FavIcon from Pics, GenFavIcon, FavIcon Generator y Favikon son algunos ejemplos.

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

Se deberá de ajustar la imagen a un formato .png, .jpeg, .gif, .svg, .bmp o .ico y, a continuación, habrá que redefinir su tamaño. El tamaño más común de favicon suele ser de 16x16 píxeles, aunque según la plataforma en la que se quiera visualizar habrá que utilizar una dimensión u otra.

¿Cómo hacer un favicon para Internet Explorer?

Dado que Internet Explorer no soporta imágenes en los formatos estándar, hay que En el caso especial de Internet Explorer, hay que tener en cuenta que no se podrán utilizar formatos distintos a .ico o .bmp y la dimensión será estrictamente 16x16 píxeles.

No obstante, no es de gran utilidad realizar un favicon para este navegador, ya que sólo lo utilizará para los favoritos.

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

Si se quiere que en la página web se muestre correctamente el favicon debe editarse el código HTML de dicha página, especificando la ruta con una etiqueta link entre las etiquetas de cabecera head del archivo.

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 (extensión .jpg o .jpeg): image/jpeg.

Si tienes un favicon que no está en un formato de imagen estándar, como es el caso del .ico, el atributo rel también cambia:

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