Made on
Tilda
· Categoría: Diseño web y UX
Un favicon es el icono pequeño de una web que aparece en la pestaña del navegador, en los marcadores y junto al resultado en Google. Google pide que sea cuadrado y con un tamaño múltiplo de 48 píxeles —48 × 48, 96 × 96 o 144 × 144— para mostrarlo en sus resultados (Google Search Central).
El favicon no es el logotipo completo: es una versión mínima y reconocible de la marca, pensada para verse a 16 o 32 píxeles.
Generador de código del favicon
+10 XPEl favicon aparece en la pestaña del navegador, en la lista de marcadores, en el historial, en el acceso directo de la pantalla de inicio del móvil y junto al nombre de la web en los resultados de Google.
En los resultados de búsqueda, el favicon es lo primero que distingue visualmente tu resultado de los de al lado: un icono claro y reconocible ayuda a que el usuario identifique la marca de un vistazo.
Para el favicon, Google pide que sea cuadrado, con un tamaño múltiplo de 48 píxeles, que su URL sea estable, que se pueda rastrear y que represente a la marca de forma visual (Google Search Central).
Si el favicon no cumple los requisitos o es inapropiado, Google muestra un icono genérico. Los cambios pueden tardar días o semanas en verse, porque Google rastrea el favicon con su propio robot. Un favicon Google bien configurado se ve tanto en los resultados de móvil como en los de ordenador.
Lo recomendable es un SVG, que se ve nítido a cualquier tamaño, junto con un PNG de 48 × 48 o 96 × 96 píxeles y un icono de 180 × 180 para la pantalla de inicio de iPhone.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">El generador de esta página crea ese código con la ruta de tus archivos.
Un buen favicon usa un solo elemento reconocible de la marca —una inicial, un símbolo o un punto de color— con alto contraste, porque a 16 píxeles cualquier detalle se pierde.
El logotipo de Estrategia 360 lleva un punto verde lima como acento, un elemento simple que funciona también a tamaño mínimo. Los logotipos con texto largo o muchos detalles casi nunca sirven tal cual como favicon.
Antes de publicarlo, conviene ver el icono junto a los de otras webs en una pestaña real del navegador: si no se distingue, hay que simplificarlo.
En Tilda, el favicon se sube en los ajustes del sitio; en WordPress, en Apariencia → Personalizar → Identidad del sitio, como «icono del sitio».
En ambos casos conviene subir una imagen cuadrada de al menos 512 × 512 píxeles para que la plataforma genere los tamaños necesarios, y comprobar después que el archivo carga desde una URL estable.
Cómo crear y publicar un favicon:
En modo oscuro, un favicon negro o con fondo transparente puede desaparecer sobre el fondo de la pestaña o de los resultados; por eso conviene un fondo propio o colores que funcionen sobre claro y oscuro.
Con un favicon SVG se puede incluso adaptar el color según el modo del sistema con una media query dentro del propio archivo. La solución más sencilla sigue siendo un icono con fondo de color sólido y buen contraste.
El favicon no es un factor de posicionamiento, pero influye en el CTR: un icono reconocible hace que el resultado destaque y transmita confianza frente a uno con el icono genérico.
En búsquedas donde aparecen muchas webs parecidas, ese pequeño detalle visual puede decidir en qué resultado hace clic el usuario, sobre todo en móvil.
El error más común es usar el logotipo completo reducido, que a 16 píxeles se convierte en una mancha ilegible.
| Archivo | Tamaño | Para qué |
|---|---|---|
| favicon.svg | Vectorial | Navegadores modernos |
| favicon-96.png | 96 × 96 | Google y navegadores |
| apple-touch-icon.png | 180 × 180 | Pantalla de inicio en iPhone |
| favicon.ico | 48 × 48 | Compatibilidad antigua |
El favicon no hace posicionar una web ni compensa un título o una descripción poco atractivos: es un detalle de reconocimiento. Y Google puede tardar semanas en mostrar un favicon nuevo.
El icono pequeño de una web en la pestaña del navegador y en Google.
Cuadrado y múltiplo de 48 px; 96 × 96 es una buena opción.
SVG y PNG; ICO solo para compatibilidad.
Puede no cumplir los requisitos, estar bloqueado o no haberse rastreado todavía.
No en la posición, pero sí en el reconocimiento y el CTR.
De días a semanas.
Mejor un elemento simple del logotipo, legible a 16 px.
Conviene un apple-touch-icon de 180 × 180 para la pantalla de inicio del iPhone.
¿Quieres aplicarlo a tu web? Estrategia 360 hace diseño web en Barcelona y en remoto.
Fuentes: Google Search Central, definir un favicon para los resultados de búsqueda · identidad visual de Estrategia 360
Escrito por Alena Shakina, CEO de Estrategia 360 · Conoce al equipo