Qué es un Favicon y para qué sirve
¿Qué es un favicon?
Cada vez que realizo una conferencia o un curso, suelo mirarme las páginas web de los asistentes. Para ello, la organización del evento me envía un listado con sus URL y las voy abriendo en un mismo navegador pero en diferentes pestañas. Por desgracia, cuando tengo las páginas abiertas y puedo ver los favicons de todo el mundo, observo que una buena parte de ellos son los favicons de los CMS utilizados para construir sus páginas web (normalmente el de Joomla o el de WordPress), no un favicon corporativo, que es lo que debería ser.
Así que aquí va este breve artículo explicando qué es un favicon y para qué sirve, a ver si de esta manera, consigo que la gente le otorgue la importancia que se merece.
Ese pequeño icono
Un favicon 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. De hecho, favicon significa «icono de favoritos». Es el elemento creado para identificar nuestra página web cuando alguien la incluye en un listado de favoritos.
En este blog que estás leyendo, el favicon es una «MP» con fondo fucsia que puedes ver junto a la URL o en la pestaña de la página tu navegador.
Para qué sirve un favicon en una página web
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 crearlos 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 el tuyo, 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.
En WordPress:
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á.
En Shopify:
Shopify también contempla que puedas gestionar fácilmente tu favicon: ves a Theme settings -> Favicon y selecciona tu logo o sube el favicon que te guste más.
En blogger:
Ídem que en el resto de gestores de contenido. Busca en la administración del tema y allí deberías encontrar cómo cambiar el que lleva por defecto e incluir el tuyo.
Qué es un favicon en HTML
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.
Esto es todo.
Que vaya todo bien… (y cuando tengas un momento, asegúrate de que tu página web dispone de su propio favicon ;-)
Espero que este artículo te haya sido de utilidad.
Nos hablamos.
