Guía de favicons: todos los tamaños que necesita tu web en 2026
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.
odos los tamaños necesarios
El ecosistema actual de dispositivos y navegadores requiere múltiples tamaños de favicon. Estos son los imprescindibles en 2026:
avicon.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.
avicon-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.
pple-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.
ndroid-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.
avicon-16x16.png
Versión pequeña para contextos donde 32x32 es demasiado grande y el navegador necesita exactamente 16x16 píxeles.
ó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:
Todo se procesa en tu navegador usando la API Canvas. Tu imagen nunca se sube a ningún servidor.
ódigo HTML correcto
El código que debes incluir en el 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" }
]
}
iseño: mejores prácticas
rrores comunes
?v=2 para forzar la actualización.onclusió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.