Un favicon es un pequeño icono que representa tu sitio web en las pestañas del navegador. Para Aplicaciones Web Progresivas (PWA), también necesitas un manifiesto web e iconos más grandes para pantallas de inicio móviles.
Instala los archivos de favicon e iconos PWA
El ZIP Web contiene favicon.ico, PNG de 16/32 px, icono Apple touch de 180 px, iconos PWA de 192/512 px, site.webmanifest y og.png de 1200x630.
Contenido del ZIP Web
Los dos PNG PWA son iconos cuadrados normales. Sus nombres y tamaños coinciden con el array icons de site.webmanifest; og.png es una imagen separada para compartir.
Conecta los iconos a tu web
- Copia los archivos de Web al directorio público del sitio y publícalos en la raíz del dominio, o ajusta las rutas al directorio elegido.
- Edita name y short_name en site.webmanifest. start_url y scope son relativos al manifiesto; las rutas de iconos exportadas empiezan por /. Cámbialas si las imágenes están en un subdirectorio.
- Añade los enlaces de manifiesto, favicon y Apple touch al head del HTML. Usa HTTPS o localhost. En las herramientas del navegador, revisa el manifiesto y que cada URL devuelva una imagen, no una página HTML de respaldo.
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Estos iconos no están preparados como imágenes maskable. El ZIP no añade service worker ni soporte sin conexión; los iconos por sí solos no garantizan la instalación. Prueba el navegador y dispositivo de destino.
Leer la guía de integración Web, PWA y Chrome