¿Qué es un favicon y por qué importa?
El favicon (favorite icon) es el pequeño icono que aparece en la pestaña del navegador junto al título de la página, en los marcadores, en el historial y en los resultados de búsqueda en dispositivos móviles. Es uno de los elementos visuales más pequeños de tu web, pero tiene un impacto desproporcionado en la percepción profesional y la identidad de marca.
Un sitio web sin favicon se muestra con un icono genérico del navegador (normalmente un globo terráqueo gris), lo que transmite una sensación de dejadez o de web amateur. Los usuarios con muchas pestañas abiertas identifican las webs por su favicon, no por el texto de la pestaña, que suele estar truncado.
Desde la perspectiva del SEO, Google puede mostrar el favicon junto a los resultados de búsqueda en móviles, lo que mejora la tasa de clics (CTR) al hacer tu resultado más reconocible y profesional.
Todos los tamaños necesarios
El ecosistema actual de dispositivos y navegadores requiere múltiples tamaños de favicon. Estos son los imprescindibles en 2026:
favicon.ico (16x16, 32x32, 48x48)
El formato clásico que soportan todos los navegadores. El archivo .ico puede contener múltiples resoluciones. El navegador selecciona la más apropiada según el contexto: 16x16 para pestañas, 32x32 para accesos directos de escritorio y 48x48 para la barra de tareas de Windows.
favicon-32x32.png
PNG de alta calidad para navegadores modernos. Preferido sobre .ico por su mejor compresión y soporte de transparencia. Se usa en pestañas de navegador y marcadores.
apple-touch-icon (180x180)
Requerido por dispositivos Apple. Cuando un usuario añade tu web a la pantalla de inicio de iPhone o iPad, se muestra este icono. Apple aplica automáticamente esquinas redondeadas y, en algunas versiones, un efecto de brillo. Si no proporcionas este icono, iOS hará una captura de pantalla de tu web que raramente se ve bien.
android-chrome (192x192, 512x512)
Para Progressive Web Apps (PWA) y cuando los usuarios de Android añaden tu web a su pantalla de inicio. El tamaño 512x512 se usa para la pantalla de splash al abrir la app. Ambos se declaran en el archivo manifest.json.
favicon-16x16.png
Versión pequeña para contextos donde 32x32 es demasiado grande y el navegador necesita exactamente 16x16 píxeles.
Cómo generar todos los tamaños
En lugar de crear manualmente cada tamaño en Photoshop o GIMP, puedes usar un generador automático como el generador de favicon de GarTools. Sube una sola imagen de alta resolución (idealmente 512x512 o más) y la herramienta genera automáticamente todos los tamaños necesarios:
- Abre el generador de favicon.
- Sube tu imagen o logo en formato PNG, JPG o WebP.
- La herramienta genera 7 tamaños: 16x16, 32x32, 48x48, 180x180, 192x192, 512x512 y favicon.ico.
- Descarga cada tamaño individualmente o todos a la vez.
- Copia el código HTML generado y pégalo en el
<head>de tu web.
Todo se procesa en tu navegador usando la API Canvas. Tu imagen nunca se sube a ningún servidor.
Código HTML correcto
El código que debes incluir en el <head> de todas tus páginas:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
Y en tu archivo manifest.json:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Diseño: mejores prácticas
- Simplifica. A 16x16 píxeles, los detalles finos son invisibles. Usa formas simples, letras individuales o iconos abstractos. El logo completo de tu empresa raramente funciona bien como favicon.
- Contraste alto. El favicon se muestra sobre fondos variables (pestañas claras, oscuras, barras de marcadores). Elige colores que destaquen en ambos contextos.
- Fondo transparente o de color sólido. PNG con transparencia funciona bien en la mayoría de contextos. Si usas fondo de color, asegúrate de que sea el color principal de tu marca.
- Prueba en contexto real. Mira cómo se ve tu favicon junto a otros en una barra de pestañas. ¿Es reconocible? ¿Se diferencia de otros favicons comunes?
- Evita texto pequeño. Las letras menores de 12px son ilegibles a 16x16. Si usas una letra, que sea una sola, grande y en negrita.
- Consistencia de marca. El favicon debe ser coherente con el resto de tu identidad visual: mismos colores, mismo estilo (flat, outlined, 3D).
Errores comunes
- No tener favicon. El error más básico y frecuente. Google penaliza indirectamente los sitios sin favicon al mostrar un icono genérico en los resultados móviles, reduciendo el CTR.
- Solo tener favicon.ico. Si no incluyes apple-touch-icon, los usuarios de iPhone verán una captura de pantalla genérica al guardar tu web en su pantalla de inicio.
- Imagen demasiado compleja. Un logo horizontal con texto se convierte en una mancha irreconocible a 16x16 píxeles.
- No actualizar el favicon. Si cambias tu marca, actualiza el favicon. Los navegadores cachean favicons agresivamente: usa un query string como
?v=2para forzar la actualización.
Favicon en frameworks modernos
Next.js y React
En Next.js (App Router), basta con colocar un archivo favicon.ico en la carpeta app/ y el framework lo sirve automaticamente. Para formatos adicionales, crea un archivo icon.tsx que genere iconos dinamicamente con next/og, o añade los archivos estaticos en la carpeta public/ y referencia los metadatos en el layout.tsx con la API de metadata.
Astro, Hugo y generadores estaticos
En generadores de sitios estaticos, coloca los archivos de favicon en la carpeta publica (public/ o static/) y añade las etiquetas link manualmente en el layout base. Algunos generadores tienen plugins que automatizan la generacion de favicons a partir de una imagen fuente.
PWA y modo offline
Para Progressive Web Apps (PWA), el favicon tiene un papel adicional: define el icono de la aplicacion instalada en el dispositivo. El archivo manifest.json debe incluir iconos en multiples tamaños (al menos 192x192 y 512x512) y puede especificar iconos con proposito "maskable" que se adaptan a las diferentes formas de iconos de cada sistema operativo (circulares en Android, cuadrados redondeados en iOS).
Un icono maskable tiene una "zona segura" en el centro que siempre sera visible, independientemente de la mascara que aplique el sistema operativo. Si tu icono tiene contenido importante en los bordes, crea una version maskable especifica con el contenido centrado y margenes generosos.
Favicon y SEO
Google muestra favicons en los resultados de busqueda moviles junto al nombre del sitio y la URL. Un favicon bien diseñado mejora el reconocimiento de marca y puede aumentar el CTR (Click-Through Rate) de tus resultados. Los sitios sin favicon reciben un icono generico gris que transmite falta de profesionalismo.
Google tiene requisitos especificos para mostrar favicons en resultados: el archivo debe estar accesible para Googlebot (no bloqueado en robots.txt), debe ser cuadrado, con un minimo de 48x48 pixeles, y debe representar tu marca de forma reconocible. Si Google considera que el favicon no cumple sus directrices de calidad (es ofensivo, enganoso o demasiado generico), mostrara el icono predeterminado en su lugar.
Formato SVG para favicon: la opcion moderna
Los navegadores modernos soportan favicons en formato SVG, lo que ofrece varias ventajas: escalabilidad perfecta a cualquier tamaño sin pixelacion, soporte para modo oscuro con media queries CSS dentro del SVG, y tamaño de archivo extremadamente pequeno. Un favicon SVG tipico pesa menos de 1 KB.
Para implementar un favicon SVG con soporte de modo oscuro, incluye una media query prefers-color-scheme dentro del SVG que cambie los colores del icono segun el tema del sistema operativo del usuario. Asi, un icono oscuro sobre fondo claro se invierte automaticamente cuando el usuario activa el modo oscuro, manteniendo siempre la visibilidad.
Sin embargo, Safari en iOS no soporta favicons SVG (a mediados de 2026), por lo que necesitas mantener los formatos PNG e ICO como fallback. La estrategia recomendada es servir el SVG como formato preferido y los PNG como respaldo.
Herramientas de generacion y optimizacion
Ademas del generador de GarTools, existen otras herramientas utiles para trabajar con favicons. RealFaviconGenerator es un servicio online completo que genera todas las variantes necesarias y proporciona el codigo HTML correspondiente. Favicon.io permite crear favicons a partir de texto, emojis o imagenes. Y para desarrolladores que prefieren la linea de comandos, ImageMagick puede generar todas las variantes de tamaño con un script bash.
La clave es automatizar el proceso para no tener que repetirlo manualmente cada vez que actualizas tu marca visual. Incluye la generacion de favicons en tu pipeline de build o documenta el proceso en tu repositorio para que cualquier miembro del equipo pueda regenerarlos cuando sea necesario.
Testing de favicons en diferentes contextos
Un error comun es diseñar el favicon mirando solo la previsualizacion a tamaño grande y no verificar como se ve en los contextos reales donde aparecera. Prueba tu favicon en los siguientes escenarios: como pestaña del navegador en Chrome, Firefox, Safari y Edge (cada uno renderiza de forma ligeramente diferente), como icono de acceso directo en el escritorio de Windows y macOS, como icono de app web en la pantalla de inicio de iOS y Android, y como favicon junto a los resultados de busqueda de Google en movil.
En cada uno de estos contextos, verifica que el favicon es reconocible, que tiene suficiente contraste con el fondo y que no pierde detalles importantes al reducirse a 16x16 pixeles. Si detectas problemas, crea versiones especificas optimizadas para cada tamaño en lugar de depender de un unico archivo escalado automaticamente.
Conclusión
Un favicon profesional es un detalle pequeño que marca la diferencia entre una web amateur y una web profesional. Con el generador de favicon de GarTools, puedes generar todos los tamaños necesarios en segundos a partir de una sola imagen, con el código HTML listo para copiar y pegar.
¿Te ha sido útil este artículo?
Suscríbete a la newsletter mensual: un correo cuando publicamos algo igual de útil. Sin spam.
Los comentarios se activarán próximamente. ¿Quieres compartir algo sobre este artículo? Escríbenos en /contacto.