Es un pequeño icono (normalmente de 16×16 píxels o de 32×32 px) que se utiliza para identificar un sitio web en las pestañas de un navegador, en un listado de favoritos, o en cualquier otra parte que requiera una identificación pequeña.

Para qué sirve un favicon

Es un símbolo que transmite imagen corporativa, así que sirve para:

• Transmitir nuestra imagen de marca cuando alguien navega por nuestra página web y fija su mirada en la zona de la URL del navegador.
• Para que nuestra página sea fácilmente identificable cuando alguien tiene abiertas varias pestañas en su navegador.
• Para que nuestra página sea fácilmente identificable cuando alguien la guarda en sus favoritos.

Cómo podemos crear un favicon para nuestra página web

Existen muchos programas que te ayudarán a crearlo. Este es el que yo utilizo para crearlos: creador de favicons.

Mi consejo es que crees tu favicon en 32×32 píxels y que sea parecido a tu logo. Puedes crear favicons a partir de imágenes… quizás esto puede serte de ayuda, pero píxel a píxel también es fácil de crear. Otro consejo: antes de diseñar tu favicon mira favicons de otras empresas en Google Imágenes, esto puede ayudarte a inspirarte para el tuyo y a asegurarte de que sin querer, no utilices algún favicon que ya ha sido creado por alguien más.

Cuando ya lo tengas creado, debes guardarlo utilizando el nombre favicon.ico y subirlo por FTP al directorio raíz de tu página web. Algunos gestores de contenido como WordPress disponen de una sección en el panel de administración para que indiques la URL exacta del favicon… aunque funciona igualmente si allí no indicas nada pero dispones de favicon en tu directorio raíz. También algunas plantillas de WordPress llevan ya una zona en la que indicas la URL de la imagen de tu favicon y ya está.

Para que tu favicon se vea lo antes posible, puedes dar a conocer su existencia a través del código fuente de tu página web, utilizando en los metatags la siguiente línea de código:

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

Aunque de nuevo, si no utilizas la línea de código, el navegador lo verá por si solo en algún momento. En Firefox y Chrome se ve casi al momento, en Explorer tarda un poco más.​