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.
Los tamaños que realmente necesitas
| Tamaño | Usado para | ¿Mantener? |
|---|---|---|
| 16, 32, 48 | Pestaña del navegador y marcadores, agrupados dentro del favicon.ico | Mantener |
| 180x180 | apple-touch-icon para la pantalla de inicio de iOS | Mantener |
| 192x192 | Icono del launcher de Android, listado en el manifest | Mantener |
| 512x512 | Splash y prompt de instalación de la PWA, listados en el manifest | Mantener |
| SVG | Icono de pestaña nítido en cualquier tamaño, puede adaptarse al modo oscuro | Opcional |
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.
Qué aspecto tienen esos números
Tamaños que deberías dejar de publicar
| Tamaño | Era para | ¿Mantener? |
|---|---|---|
| 57, 60, 72, 76 | apple-touch-icon para iOS 6 e iPads más antiguos | Eliminar |
| 114, 120, 144, 152 | apple-touch-icon Retina para iPhones e iPads antiguos | Eliminar |
| 70, 150, 310 | Iconos de tile de Windows vía browserconfig.xml | Eliminar |
| 160, 196 | Varios tamaños antiguos de acceso directo de Android y Chrome | Eliminar |
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.
¿Debo publicar iconos de tile de Windows?
No. Los tamaños de tile 70, 150 y 310 y el browserconfig.xml apuntaban a los live tiles de Windows, que fueron descontinuados. Elimínalos.
¿Un favicon.ico puede contener más de un tamaño?
Sí. El formato .ico es un contenedor que contiene 16, 32 y 48 en un único archivo. El navegador elige el tamaño que necesita desde dentro de él.