Configuración del favicon para PWA: todos los archivos que realmente necesitas (probado en Chrome, Safari, Edge)
Pasé cuatro horas ajustando los iconos de la PWA de un cliente. El service worker solo me tomó 20 minutos. Esa proporción no tiene sentido, y se debe a que cada tutorial te indica generar 47 archivos de icono, pero nadie especifica cuáles se usan realmente.
Probé la instalación de una PWA en Chrome para Android, Chrome de escritorio, Safari iOS, Edge y Samsung Internet. Aquí tienes qué lee cada navegador y qué archivos puedes omitir.
Los archivos que realmente necesitas (no necesitas más de 5)
Toda guía de favicons para PWA te recomienda generar tamaños de 192px, 512px, iconos enmascarables, monocromáticos, SVG, ICO, PNG y iconos táctiles de Apple en 5 tamaños distintos; eso suma más de 15 archivos. En mis pruebas realizadas en cinco navegadores durante junio de 2026, solo cinco archivos son relevantes:
favicon.svg — Los navegadores modernos (Chrome, Firefox, Edge) prefieren SVG icon-192.png — Pantalla de inicio de Android, pantalla de carga de PWA icon-512.png — Pantalla de carga de PWA en Android, alta densidad apple-touch-icon.png — Marcador de pantalla de inicio iOS (180x180) favicon.ico — Alternativa para IE11 y versiones antiguas de Safari
Eso es todo. Cinco archivos. Realicé pruebas sin PNG de 32x32, sin 16x16 y sin variante enmascarable; ningún navegador presentó fallos. El SVG cubre todos los escenarios modernos en cualquier resolución, los PNG de 192/512 gestionan la instalación de la PWA y el ICO sirve como respaldo para navegadores obsoletos.
El favicon SVG ya cuenta con soporte generalizado
Durante años los favicons SVG fueron una funcionalidad "próximamente disponible". A partir de
