Un favicon, abreviatura de “Favorites icon”, es un pequeño icono asociado a una página o sitio web. Si creamos y añadimos un favicon a un sitio web, la mayoría de navegadores web harán uso del mismo y lo mostrarán de alguna u otra forma.

Internet Explorer, muestra el favicon de un sitio web junto al nombre del sitio en el listado de “Favoritos”. Los navegadores basados en Mozilla (Netscape, Firefox, Galeon, etc.) muestran el favicon en el listado de “Marcadores” y en la parte izquierda de la barra de direcciones.

Un favicon no tiene ninguna utilidad aparente, pero puede servir para personalizar un poco más nuestro sitio web y para resaltar nuestro sitio web en el listado de favoritos o marcadores de los usuarios, de forma que con un poco de suerte nos visiten más a menudo.

Como añadir un Favicon a tu sitio web

Añadir un favicon a tu sitio web es realmente fácil, sólo tienes que seguir estos 3 pasos:

1. Crea una imagen de 16×16 pixels de tamaño y con una paleta de 16 colores.
2. Guarda la imagen con el nombre “favicon.ico” (sin las comillas)
3. Subelo mediante FTP al directorio raíz de tu sitio web.

Como crear el favicon

Lo más compliado de todo esto es crear el favicon. Puedes hacerlo con un editor de iconos como PixelToolbox o usar alguno de los generadores online disponibles, como el Favicon Genereator o este otro Favicon Icon Drawing Program.

Dado el pequeño tamaño de los faviconos, no se puede hacer ninguna virguería, por lo tanto, lo recomendable es dibujar alguna forma simple con los colores del logo de tu sitio web o empresa.

Si no te apetece crear tu propio favicon, también puedes usar alguno de los muchos faviconos disponibles en MpP Favicon Gallery. Esto es lo más rápido, pero evidentemente, no tendrás un favicon personalizado.

Como poner el icono en otra ubicación

También es posible almacenar el favicon en un directorio distinto del directorio raíz de nuestro sitio web, pero en ese caso tendremos que añadir el siguiente código en la cabecera ( entre las etiquetas y ) de las páginas de nuestro sitio web:

<link rel="icon" href="http://www.tudominio.com/imagenes/favicon.ico" /> <link rel="shortcut icon" href="http://www.tudominio.com/imagenes/favicon.ico" />