Cómo funciona
La imagen o las letras se dibujan en un canvas en todos los tamaños que piden los navegadores y los móviles, y se guardan como archivos PNG. Las versiones de 16, 32 y 48 px se empaquetan en un único favicon.ico. Todo se crea en tu navegador y no se sube nada.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
Para qué sirve cada archivo
- favicon.ico: el icono clásico de la pestaña del navegador. Todos los navegadores y Windows lo siguen buscando en la raíz del sitio.
- apple-touch-icon.png: el icono que usan el iPhone y el iPad cuando alguien añade tu sitio a la pantalla de inicio. Siempre tiene un fondo sólido.
- icon-192.png, icon-512.png: Android y las aplicaciones web instalables (PWA) los toman del manifiesto.
- site.webmanifest: un pequeño archivo JSON con el nombre de tu sitio, los colores y la lista de iconos.
Consejos
- Pon todos los archivos en la carpeta raíz de tu sitio, junto a index.html, y pega el código en el head de cada página.
- Las formas sencillas y marcadas se ven mejor a 16 px; el texto fino y las líneas delgadas desaparecen.
- Los navegadores guardan el favicon en caché con mucha insistencia. Abre directamente la URL del icono o usa una ventana privada para ver el cambio.
- La etiqueta theme-color tiñe la barra del navegador en Android con tu color de fondo.
Criterios y fuentes
- HTML Standard — link rel="icon" · WHATWG
- Manifiesto de aplicación web (Web Application Manifest) · W3C
- Configurar aplicaciones web (apple-touch-icon) · Apple Developer
Última revisión 15 de octubre de 2026
Preguntas frecuentes
¿Qué tamaños de favicon necesito?
Un favicon.ico con 16, 32 y 48 px, un apple-touch-icon de 180 px e iconos de 192 y 512 px para Android cubren los navegadores y móviles actuales.
¿Se sube mi logotipo?
No. Los iconos se dibujan y se empaquetan en tu navegador.
¿Puedo usar un SVG?
Sí. Se admiten SVG, PNG, JPG, WebP y GIF; una imagen cuadrada de 512 px o más da el resultado más nítido.
¿Por qué el icono de Apple no es transparente?
iOS rellena de negro las zonas transparentes, así que el icono de 180 px siempre usa tu color de fondo.
Mi nuevo favicon no aparece.
Los navegadores guardan el favicon en caché durante mucho tiempo. Abre directamente la dirección del icono, borra la caché o prueba con una ventana privada.