Busca un generador de favicons y casi todos te darán un zip con un archivo ICO, nueve PNG, un manifiesto y una configuración de navegador para un mosaico de Microsoft que se retiró hace años. Casi nada de eso hace falta.
El formato ICO existe porque Internet Explorer lo exigía. Todos los navegadores actuales aceptan un PNG, y la mayoría prefieren un SVG.
Lo que de verdad necesitas
| Archivo | Para qué |
|---|---|
favicon.svg |
el icono de la pestaña, nítido a cualquier tamaño, puede responder al modo oscuro |
favicon-32x32.png |
alternativa para lo que no acepte SVG |
apple-touch-icon.png de 180 px |
pantalla de inicio de iOS |
PNG de 192 y 512 |
aviso de instalación y pantalla de arranque en Android |
Cuatro archivos y cuatro líneas de HTML. El favicon SVG es el que conviene añadir primero, porque se ve nítido en cualquier pantalla y puede llevar una regla prefers-color-scheme para que un logotipo oscuro pase a claro en el modo oscuro, algo que ningún PNG puede hacer.
Por qué 16 píxeles es la verdadera limitación
El icono que aparece en una pestaña del navegador mide 16 píxeles, o 32 en una pantalla de alta densidad mostrados a 16. No hay sitio para un logotipo.
A ese tamaño cabe una forma o una letra. El detalle no se reduce, se convierte en papilla: un logotipo con nombre se vuelve una mancha gris, un emblema detallado se vuelve un borrón.
Por eso tantos favicons son una sola inicial. No es pereza: es lo único que se lee. Diseña primero para 16, y si funciona ahí funcionará en todas partes.
Por qué importa que el origen sea cuadrado
Un favicon es cuadrado. Si le das a un generador un logotipo ancho, tiene que ponerle bandas, que parecen un fallo de renderizado, o recortarlo y perder los extremos.
Recortar para llenar es mejor opción por defecto porque las bandas parecen un error, pero la respuesta de verdad es darle un símbolo cuadrado. Casi todas las marcas con un logotipo ancho tienen un símbolo compacto justo para esto.
¿Por qué no aparece mi favicon nuevo?
Porque los navegadores guardan en caché los favicons con mucha más insistencia que otros recursos, y a menudo ignoran una recarga forzada.
El archivo casi siempre está bien. Lo que funciona: abrir directamente la URL del icono y recargarla, borrar los datos del sitio o usar otro perfil del navegador. Cambiar el nombre del archivo funciona siempre y es la opción práctica mientras desarrollas.
Preguntas que hace la gente
¿Sigo necesitando favicon.ico en la raíz? Algunos rastreadores y lectores de feeds lo piden y registrarán un 404 si falta. No hace daño ni en un caso ni en otro.
¿Un solo SVG lo cubre todo? Para los navegadores, en la práctica sí. iOS sigue queriendo un PNG para la pantalla de inicio.
¿El favicon afecta al SEO? Google lo muestra junto al resultado en la búsqueda móvil, así que influye en que alguien haga clic. No es un factor de posicionamiento.
¿Y la configuración del mosaico de Microsoft? Retirada. Puedes saltártela.
El generador de favicons, de momento en inglés, produce los tamaños que se usan y te da el HTML, y redimensionar imágenes y recortar y girar imágenes ayudan a preparar un origen cuadrado.