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.
| 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. |
<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"
}
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 →Todas las medidas vigentes en un solo lugar, incluidos los modos dark/tinted de iOS 18 y los iconos temáticos de Android 13+.
Los tres métodos que existen, cuándo conviene cada uno y cómo conseguir bordes limpios en pelo y detalles finos.
Las medidas exactas de cada marketplace y cómo dejar el producto sobre fondo blanco, centrado y listo para vender.