Quién podría pensar, hace mucho tiempo atrás, que un pequeño gráfico en forma de icono podría llegar a marcar una enorme diferencia para una marca, para una web. Sin embargo, la mayoría de desarrolladores dejan bastante de lado esta interesante posibilidad. Por eso, vamos a hablar de qué es un favicon y crear una especie de guía definitiva para diseñadores y desarrolladores web.
¿Qué es un favicon? ¿Para qué sirve?
Estamos hablando de un elemento visual pequeño, pero de vital importancia para distinguir nuestra web de la multitud. La palabra favicon viene de una combinación de dos palabras: favoritos e iconos. Los favoritos hacen referencia de forma directa al apartado de favoritos de nuestro navegador web. Icono, evidentemente se trata de un logotipo o activo gráfico que representa una web, blog, revista, marca o empresa en el espacio electrónico.
Generalmente, su tamaño es de 16×16 píxeles. Diseñar uno de forma adecuada, no es precisamente algo sencillo, requiere una enorme cantidad de imaginación, debido a que estamos trabajando en un espacio reducido. A su vez, debe intentar ser claro y destacar teniendo en cuenta su tamaño.
La idea es que sea una especie de identificación visual para nuestra web. Cuando un usuario vea nuestro favicon, automáticamente tiene que relacionarlo con nuestro sitio web. Especialmente cuando abren demasiadas pestañas y el nombre de la web no puede visualizarse.
La enorme importancia de un favicon
Los diseñadores web con más experiencia consideración que los favicons son un activo de suma importancia de cualquier sitio web. El motivo es que se pueden encontrar en lugares estratégicos ¿Dónde? Generalmente aparecerán aquí:
- En el lado izquierdo de las pestañas del navegador.
- Menú de historial de navegación web.
- En el menú desplegable de favoritos del navegador.
- Desde la aplicación de la barra de herramientas.
- Historial del navegador.
- Búsquedas.
- Sugerencias de búsquedas.
- Resultados de búsquedas.
El SEO y los favicons
La optimización de sitios webs para los motores de búsqueda (SEO) y los favicons están estrechamente relacionados. Es una herramienta útil que puede influir de forma indirecta en la clasificación de la misma. Además, estamos hablando de un activo de bajo costo con el cual no es necesario esforzarse de forma tan extrema ni enfocar una enorme cantidad de recursos.
- El favicon mejora las posibilidades de que un sitio web se marque como favorito en un navegador web como Firefox, Chrome o Edge. Lo que aumentara las posibilidades de que el usuario vuelva a visitar la web.
- Los sitios webs simples de utilizar tienen mejores posibilidades de clasificación SEO y el favicon aumenta la facilidad de uso.
- En gran medida, el SEO tiene mucho que ver con el marketing y la marca. Evidentemente, un favicon nos proporciona esto sin ambigüedades.
Especificaciones
Muchos sitios webs deciden usar una versión más pequeña del logo de su marca.
- En la enorme mayoría de los casos un favicon tiene que tener 16×16 píxeles.
- 57×57 vendría a ser el tamaño estándar para la pantalla de inicio de iOS.
- En el caso de plataformas como Google TV, usan favicons de 96×96 píxeles.
- Opera Speed Dial usa 195×195 píxeles.
- Los favicons táctiles de Apple tienen un tamaño de 180×180 píxeles.
En cuanto al formato de imagen que usaremos en favicon. Vamos a tener que usar el formato ICO, aunque también es factible utilizar otros formatos como PNG, JPEG, etc.