Favicons en 2026: qué medidas necesitas y el HTML listo para copiar
Durante años los generadores de favicons producían veinte archivos «por si acaso»: tamaños para Internet Explorer en Windows Vista, azulejos de Windows 8, Safari pinned tabs… La realidad de 2026 es mucho más simple: con 5 archivos y 5 líneas de HTML cubres todos los navegadores y dispositivos actuales.
Vale la pena el esfuerzo: un favicon bien hecho es lo primero que ve un usuario cuando tiene diez pestañas abiertas, y suele ser lo primero que revisa una auditoría de SEO técnico o una checklist de PWA. Faltante o roto, resta profesionalismo aunque el resto del sitio esté impecable.
Los archivos imprescindibles
| Archivo | Tamaño | Quién lo usa |
|---|---|---|
favicon.ico | 48 × 48 | Navegadores antiguos, lectores RSS, marcadores. Aunque parezca jurásico, sigue siendo el fallback universal: muchos clientes lo piden directamente en /favicon.ico. |
favicon-32.png | 32 × 32 | La pestaña del navegador en pantallas normales y retina. |
apple-touch-icon-180.png | 180 × 180 | iPhone y iPad al añadir el sitio a la pantalla de inicio. Sin transparencia: iOS pone fondo negro a lo transparente. |
icon-192.png + icon-512.png | 192 / 512 | El manifest de PWA: icono de la app instalada y pantalla de splash en Android/desktop. |
maskable-512.png | 512 × 512 | Variante «maskable» del manifest: Android la recorta en círculo u otras formas, así que el arte debe caber en el 80% central. |
El HTML
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#111317">
Y el site.webmanifest mínimo que referencia los iconos de PWA:
{
"name": "Mi App",
"short_name": "Mi App",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"display": "standalone"
}
Errores comunes
- Usar el logo completo a 16 px. En la pestaña caben unos pocos trazos: usa el símbolo, no el logotipo con texto.
- Olvidar el maskable. Sin él, Android mete tu icono cuadrado dentro de un círculo blanco — el clásico «icono dentro de un huevo frito».
- Transparencia en el apple-touch-icon. iOS la sustituye por negro. Pon siempre un fondo de color.
- Un solo SVG para todo. El favicon SVG es ideal como complemento moderno, pero los iconos del manifest y el apple-touch-icon siguen requiriendo PNG.
¿Y el favicon SVG?
Desde hace unos años los navegadores basados en Chromium y Firefox aceptan un favicon vectorial:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Es la opción ideal si tu icono es simple y geométrico: un solo archivo
se ve nítido en cualquier tamaño y pesa una fracción de un PNG. Pero no
reemplaza al set completo: colocalo como una línea extra antes
del favicon.ico, no en su lugar, porque Safari y los
iconos de manifest todavía necesitan PNG.
Cómo comprobar que quedaron bien
- Abrí el sitio en una pestaña nueva y mirá el favicon a tamaño real (no confíes en la vista previa del editor).
-
Probá en más de un navegador: Chrome, Firefox y Safari interpretan
el orden de
link rel="icon"con matices distintos. -
En el celular, añadí el sitio a la pantalla de inicio para ver el
apple-touch-icon(iOS) y el icono del manifest (Android) tal como los va a ver un usuario real. - Si no ves el cambio, vaciá la caché: los navegadores cachean favicons de forma muy agresiva, a veces durante días.
Preguntas frecuentes
¿El favicon.ico sigue siendo necesario en 2026?
Sí. Aunque los navegadores modernos prefieren el PNG declarado en el
link rel="icon", muchos clientes (lectores RSS, crawlers,
navegadores muy antiguos) todavía piden /favicon.ico
directamente en la raíz del dominio sin leer el HTML.
¿Puedo usar solo un SVG y olvidarme del resto?
No del todo. Un favicon SVG es un buen complemento porque escala perfecto y pesa poco, pero el apple-touch-icon y los iconos del manifest de PWA todavía requieren PNG: Safari y Android no aceptan SVG ahí.
¿Cómo pruebo que mis favicons se ven bien en todos lados?
Abrí el sitio en una pestaña nueva (Chrome, Firefox y Safari si podés) y mirá la pestaña a tamaño real; después añadí el sitio a la pantalla de inicio en un iPhone/Android para ver el apple-touch-icon y el icono del manifest. Vaciá la caché del navegador: los favicons se cachean agresivamente.
¿Qué pasa si no subo ningún favicon?
El navegador muestra un icono genérico y, si el sitio se instala como PWA, usa un cuadrado con la inicial del dominio. No rompe nada, pero se ve poco profesional y no identifica tu marca en pestañas ni marcadores.
Generarlos en 30 segundos
El Icon Studio de PhotoCut Studio produce exactamente este set (y los de iOS, Android, macOS y Windows si los necesitas) desde cualquier PNG, con vista previa pixel-perfect a 16, 32 y 48 px y un botón que copia el snippet HTML al portapapeles. Todo en tu navegador: tu logo no se sube a ningún servidor.
Generar mis favicons →Lo probamos: cómo se ve el favicon a 16 px
La vista a 16 y 32 px —el tamaño real de un favicon en la pestaña— es la prueba honesta: lo que se ve bien a 512 px puede volverse una mancha a 16. Con margen y un sujeto claro, el favicon se mantuvo legible.
Icon Studio genera el set de favicons y podés acompañarlo con el HTML listo para pegar en el <head>. Todo en el navegador.
Guías relacionadas
Medidas de iconos de app en 2026: iOS, Android, macOS, Windows y Web
Todas las medidas vigentes en un solo lugar, incluidos los modos dark/tinted de iOS 18 y los iconos temáticos de Android 13+.
Cómo quitar el fondo de una imagen gratis (y sin subirla a ningún servidor)
Los tres métodos que existen, cuándo conviene cada uno y cómo conseguir bordes limpios en pelo y detalles finos.
Fotos de producto para Amazon, Etsy y Shopify: medidas y fondo blanco
Las medidas exactas de cada marketplace y cómo dejar el producto sobre fondo blanco, centrado y listo para vender.