favicon.ico: qué es y si todavía necesitas uno
favicon.ico es el archivo de icono que los navegadores solicitan desde la raíz de tu dominio en /favicon.ico cuando una página no declara ningún icono propio. Es un contenedor ICO, así que un único archivo puede contener varios mapas de bits a la vez (normalmente 16x16, 32x32 y 48x48), y el cliente elige el tamaño que necesita. Sigues queriendo uno, porque los rastreadores, los lectores de feeds y los bots de vista previa de enlaces solicitan esa ruta exacta sin leer tu HTML.
Una convención, no un estándar
La ruta /favicon.ico nunca fue especificada por nadie; Internet Explorer 5 la solicitaba, y el resto de la web lo siguió. Por eso funciona sin ningún marcado. Un navegador que no encuentra ninguna etiqueta link de icono en tu página simplemente le pide al servidor esa ruta y usa lo que reciba.
El efecto colateral es que la solicitud ocurre tengas o no el archivo. Si falta, el servidor registra un 404 por cada visitante, y cualquier herramienta que solo comprueba esa ruta muestra un marcador de posición en blanco para tu sitio.
Qué hay dentro de un favicon.ico típico
| Entrada | Usado para |
|---|---|
| 16x16 | Barra de direcciones, listas de marcadores, entradas del historial |
| 32x32 | Pestañas del navegador en pantallas de densidad estándar |
| 48x48 | Accesos directos de Windows y pestañas de mayor densidad |
Dónde va el archivo
- public/
- favicon.icoaddServed at /favicon.ico
- favicon-32x32.pngPrimary tab icon
- apple-touch-icon.pngiOS Home Screen
Tiene que resolverse en la raíz del sitio, no en un subdirectorio. La mayoría de los frameworks mapean un directorio public o static a la raíz precisamente por esto; algunos, incluido Next.js reciente, también aceptan un app/favicon.ico y conectan la etiqueta por ti.
Declararlo explícitamente
<link rel="icon" href="/favicon.ico" sizes="any">Opcional, ya que la ruta se solicita de todos modos, pero vale la pena añadirlo: hace visible el conjunto de iconos en el marcado y te permite forzar el refresco de caché con una cadena de consulta cuando el icono cambia.
Preguntas frecuentes sobre favicon.ico
¿Puede favicon.ico ser en realidad un PNG?
Los navegadores analizan el contenido en vez de fiarse de la extensión, así que un PNG servido en /favicon.ico normalmente funciona. Sigue siendo una mala idea. Pierdes el comportamiento multitamaño que es la única razón para usar la ruta, y los consumidores más estrictos pueden rechazarlo.
¿Cómo detengo los 404 en mis registros?
Distribuye el archivo. Silenciar la línea de registro oculta el síntoma mientras cada herramienta que solicita la ruta sigue sin recibir nada.
¿El archivo tiene que estar en la raíz?
Para la solicitud automática, sí. Los clientes piden /favicon.ico específicamente. Puedes servir un icono desde cualquier ruta si lo referencias con una etiqueta link, pero el archivo en la raíz es lo que cubre a los clientes que nunca analizan tu HTML.