Tamaños de favicon: todas las dimensiones que realmente necesitas
Los tamaños de favicon que necesitas son 16x16 y 32x32 en PNG para pestañas y marcadores del navegador, 180x180 para el apple-touch-icon de iOS, y 192x192 más 512x512 en PNG para las pantallas de inicio de Android y la instalación de PWA. Un favicon.ico con entradas de 16, 32 y 48 píxeles cubre cualquier cosa que solicite /favicon.ico directamente. Todos los demás tamaños son opcionales, y la mayoría de los sitios no incluye ninguno.
Por qué más de un tamaño
La pestaña de un navegador pide un icono de unos 16 a 32 píxeles de ancho. Una pantalla de inicio de Android pide 192. Una pantalla de bienvenida de PWA pide 512. No son la misma imagen escalada. A 16 píxeles una marca dispone de unos 256 píxeles con los que trabajar, y todo lo que sobreviva ahí tiene que ser mucho más simple que lo que se ve bien a 512.
Cuando declaras varios tamaños, el navegador elige la coincidencia más cercana y escala a partir de ahí. Declarar solo un icono grande hace que cada superficie pequeña lo reduzca, que es de donde sale la mancha gris en la pestaña. Declarar solo uno pequeño hace que cada superficie grande lo amplíe, que es de donde sale el icono borroso en la pantalla de inicio.
Tamaños de favicon esenciales
| Tamaño | Usado para | Prioridad |
|---|---|---|
| 16x16 | Barra de direcciones, navegadores antiguos, marcadores | Esencial |
| 32x32 | Pestañas del navegador, navegadores modernos | Esencial |
| 96x96 | Accesos directos de escritorio, mosaicos de Windows | Opcional |
| 192x192 | Pantalla de inicio de Android, iconos de PWA | Esencial |
| 512x512 | Pantallas de bienvenida, iconos de alta resolución | Esencial |
Qué aspecto tienen esos números
Tamaños de apple touch icon
| Tamaño | Dispositivo |
|---|---|
| 57x57 | iPhone (sin retina) |
| 60x60 | iPhone (retina) |
| 72x72 | iPad (sin retina) |
| 76x76 | iPad (retina) |
| 114x114 | iPhone (retina) |
| 120x120 | iPhone (retina HD) |
| 144x144 | iPad (retina) |
| 152x152 | iPad (retina HD) |
| 180x180 | iPhone (retina HD) principal |
Dónde van los archivos
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
Planos en la raíz de public es la convención porque varios de ellos también se solicitan por ruta, sin que intervenga ninguna etiqueta link.
Preguntas frecuentes sobre tamaños de favicon
¿Cuál es el conjunto mínimo de tamaños de favicon?
Un favicon.ico que contenga 16 y 32, un apple-touch-icon.png de 180x180, y PNG de 192x192 y 512x512 listados en tu manifiesto de aplicación web. Eso cubre navegadores de escritorio, pantallas de inicio de iOS, Android y la instalación de PWA con cinco archivos.
¿Sigo necesitando 57x57 y 72x72 para iOS?
Solo si das soporte a iPhones e iPads muy antiguos. El iOS actual usa el apple-touch-icon de 180x180 y lo reduce donde necesita algo más pequeño, así que un único 180 basta para casi cualquier sitio.
¿Un favicon más grande ralentiza la página?
No de forma apreciable. Los iconos son PNG pequeños que se miden en kilobytes de una sola cifra y los navegadores solicitan solo el tamaño que necesitan, además de que se almacenan en caché de forma agresiva. Incluir un 512 que nunca usas cuesta menos que un icono borroso en la pantalla de inicio.