¿Cómo evitar solicitudes favicon.ico?

551

No tengo un favicon.ico, pero IE siempre lo solicita.

¿Es posible evitar que el navegador solicite el favicon desde mi sitio? ¿Quizás algo de META-TAG en el encabezado HTML?

favicon Daniel Silveira
fuente
21
+1 buena pregunta, pero parece que la solución más simple es simplemente agregar un favicon válido :-) seguramente este es un trabajo de un minuto y su sitio se ve más profesional de inmediato?
Matt Wilko
44
También puede tener un archivo favicon.ico vacío. Esto detendrá las solicitudes (después de la primera), pero no hará que el navegador muestre un favicon en blanco donde generalmente muestra el icono predeterminado.
mxcl
38
Tengo que decir que estoy completamente de acuerdo con el punto implícito del interlocutor: ¿con qué propósito se haría obligatorio algo adicional ? y además, ¿cómo es que no podemos simplemente agregar algunos metadatos a la respuesta que dice "comportarse exactamente como si solicitara un favicon.ico y obtuviera un 404, solo que en realidad no haga la solicitud y además no pregunte nuevamente hasta esta página cambia ".
Daniel
36
Esto es un dolor. Tengo un servicio web que solo sirve JSON y ni siquiera tiene la capacidad básica de servir archivos sin algunos cambios (para empezar, cada método requiere un token de autenticación para evitar un 401/403). Registro solicitudes fallidas para poder analizarlas más tarde: los registros se inundan constantemente con solicitudes de un favicon.
Básico
3
Es 2015. ¿Alguna noticia al respecto?
Jonathan Prates

Respuestas:

575

Primero diré que tener un favicon en una página web es algo bueno (normalmente).

Sin embargo, no siempre se desea y, en ocasiones, los desarrolladores necesitan una forma de evitar la carga adicional. Por ejemplo, un IFRAME solicitaría un favicon sin mostrarlo. Peor aún, en Chrome y Android, un IFRAME generará 3 solicitudes de favicons:

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

Lo siguiente usa URI de datos y puede usarse para evitar solicitudes de favicon falsas:

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

Para referencias ver aquí:

El error / comportamiento de Chrome probablemente se solucionará en las próximas versiones.

Aquí está el envío de errores para que pueda votar:

ACTUALIZACIÓN 1:

De los comentarios (jpic) parece que Firefox> = 25 ya no le gusta la sintaxis anterior. Probé en Firefox 27 y no funciona mientras todavía funciona en Webkit / Chrome.

Así que aquí está el nuevo que debería cubrir todos los navegadores recientes. Probé Safari, Chrome y Firefox:

<link rel="icon" href="data:;base64,=">

Dejé el nombre de "acceso directo" del valor del atributo "rel", ya que eso es solo para IE más antiguo y las versiones de IE <8 tampoco les gustan los dataURI. No probado en IE8.

ACTUALIZACIÓN 2:

Si necesita que su documento valide con HTML5, use esto en su lugar:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Diego Perini
fuente
1
Brillante. Tengo que adivinar que el hecho de que haya obtenido tan pocos votos tiene que ver solo con el hecho de que han pasado varios años desde que se hizo la pregunta, y las respuestas menos inteligentes tuvieron más tiempo para reunir votos.
iconoclasta
21
Su ACTUALIZACIÓN 2 tuvo problemas con Lollipop ... agregar <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">parece resolver el problema.
Alko
2
Si lo hice bien, puedo abrirlo data:image/png;base64,iVBORw0KGgo=en el navegador, guardarlo como favicon.icoaka. archivo PNG vacío y guárdelo en la raíz del sitio web. ¿Derecha?
Martin
3
@Alko Ese archivo PNG vacío aún no es válido. Si se trata de crear una URL de datos que describa un archivo vacío, use: <link rel = "icon" href = "data:,">
vog
2
Los navegadores tienden a solicitar el favicon incluso si no hay referencias a él en el archivo index.html, entonces, ¿cómo podría esta solución evitar esto? Específicamente, he visto que Firefox es muy agresivo al solicitarlo tan pronto como visita un dominio. Otros navegadores pueden hacerlo más tarde, tal vez después de que el archivo de índice haya cargado el encabezado (alguien que tenga más conocimiento de los componentes internos de los navegadores, por favor comente). No tener un favicon tiene posibles efectos secundarios, solo búscalo en google o: stackoverflow.com/questions/4269695/…
juanheyns
131

Simplemente agregue la siguiente línea a la <head>sección de su archivo HTML:

<link rel="icon" href="data:,">

Características de esta solución:

  • HTML5 100% válido
  • muy corto
  • no incurre en ninguna peculiaridad de IE 8 y anteriores
  • no hace que el navegador interprete el código HTML actual como favicon (que sería el caso con href="#")
vog
fuente
44
Si solo está tratando de cerrar las herramientas de Chrome en un proyecto local, esta es, con mucho, la forma más fácil y limpia de hacerlo.
Andrew
Por favor, amplíe esto. ¿Solo necesito incluir esto en mi archivo HTML para detener la solicitud de favicon?
Aakash Verma
2
@AakashVerma Sí, eso es todo. No se necesita nada más. (A menos que su sitio necesite soportar Internet Explorer 8 o anterior). Mejoré mi respuesta en consecuencia.
vog
@asynts ¿Qué quieres decir con reserves space?
mvorisek
@ Andrew ¿Cuál es el problema que Chrome DevTools tiene con esta solución?
Flinsch
47

Creo que he visto esto (No lo he probado ni lo he usado personalmente):

<link rel="shortcut icon" href="#" />

Alguien tuvo una experiencia similar?

EDITAR:

Acabo de probar el fragmento anterior y en una actualización completa forzada, no se vieron solicitudes de favicon en Fiddler. Probé contra IE8 (modo Compat como estándares IE7) y FF 3.6.

mlhDev
fuente
1
mis pruebas también indican que este truco funciona. Sin embargo, tendría el hrefenlace a algún recurso estático (en caché) que ya haya cargado (por ejemplo, css o archivo de script), para garantizar que una página dinámica (sin caché) no se solicite dos veces. (Solo para estar seguro ya que href="#"técnicamente apunta a la página web actual).
Már Örlygsson
2
Lo intenté en Safari. La solicitud de favicon llega nuevamente a la página de alojamiento.
Morgan Cheng
27
No sugeriría esto, porque hace que el navegador (Safari5 / Mac, tal vez otros también) solicite la página web del servidor dos veces.
Manav
2
@Manav Ese ya no es el caso en Safari6 / Mac.
Marcel
2
¡BOOM ESTO! Gracias: D ahora no veré ese molesto error, hasta que finalmente logre hacer ese ícono jeje.
Leon Gaban
39

No puedes Todo lo que puede hacer es hacer que la imagen sea lo más pequeña posible y establecer algunos encabezados de invalidación de caché ( Expires, Cache-Control) en el futuro. Esto es lo que Yahoo! tiene que decir sobre las solicitudes de favicon.ico.

Ionuț G. Stan
fuente
77
Dijo que no tiene un favicon. No se vuelven mucho más pequeños que eso. Y no tiene ningún sentido almacenar en caché archivos no existentes.
innaM
16
Si él no tiene un favicon, entonces debería hacer uno, ese era mi punto. No hay mejor solución que esta. ¿No es lógico? Si no hay posibilidad de detener las solicitudes, a menos que use el almacenamiento en caché, ¿qué debe hacer?
Ionuț G. Stan
5

Puede usar las directivas .htaccess o del servidor para denegar el acceso a favicon.ico, pero el servidor enviará una respuesta de acceso denegado al navegador y esto todavía ralentiza el acceso a la página.

Puede detener el navegador que solicita favicon.ico cuando un usuario regrese a su sitio, haciendo que permanezca en la memoria caché del navegador.

Primero, proporcione una pequeña imagen favicon.ico, podría estar en blanco, pero lo más pequeña posible. Hice uno en blanco y negro de menos de 200 bytes. Luego, usando .htaccess o las directivas del servidor, establezca el encabezado del archivo Expires un mes o dos en el futuro. Cuando el mismo usuario regrese a su sitio, se cargará desde la memoria caché del navegador y no se enviará ninguna solicitud a su sitio. No más 404 en los registros del servidor también.

Si tiene control sobre un servidor Apache completo o tal vez un servidor virtual, puede hacer esto:

Si la raíz del documento del servidor es decir / var / www / html, agregue esto a /etc/httpd/conf/httpd.conf:-

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
    <Files favicon.ico>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
    </Files>
</Directory>

Luego, un solo favicon.ico funcionará para todos los sitios alojados virtuales, ya que lo está aliasando. Se extraerá del caché del navegador durante un mes después de la visita de los usuarios.

Para .htaccess se informa que esto funciona (no comprobado por mí): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
Anon1
fuente
No olvide habilitar el módulo: ~ / etc / apache2 # a2enmod caduca y & service apache2 restart
Sino Boeckmann
4

Una solución muy simple es poner el siguiente código en su .htaccess. Tuve el mismo problema y resolvió mi problema.

<IfModule mod_alias.c>
    RedirectMatch 403 favicon.ico
</IfModule>

Referencia: http://perishablepress.com/block-favicon-url-404-requests/

Marcio Mazzucato
fuente
El artículo vinculado desde aquí es muy bueno, pero creo que la sintaxis en la respuesta es incorrecta.
Erica Kane
4

si usas nginx 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
Vincent-cm
fuente
Esto no impide la solicitud, pero me gusta como alternativa.
QasimK
Claro, si puedes controlar el servidor web.
jbruni
1

En Node.js,

res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
Visv M
fuente
0

En nuestra experiencia, con Apache cayendo a petición de favicon.ico, comentamos encabezados adicionales en el archivo .htaccess.

Por ejemplo, teníamos el conjunto de encabezado X-XSS-Protection "1; mode = block"

... pero nos habíamos olvidado de sudo encabezados a2enmod de antemano. Comentar los encabezados adicionales que se envían resolvió nuestro problema favicon.ico.

También teníamos varios hosts virtuales configurados para el desarrollo, y solo fallamos con 500 Internal Server Error al usar http: // localhost y obtener /favicon.ico. Si ejecuta "curl -v http: //localhost/favicon.ico " y recibe una advertencia acerca de que el nombre de host no está en la memoria caché de resolución o algo por el estilo, puede experimentar problemas.

Podría ser tan simple como no recuperar (lo intentamos y no funcionó, porque nuestra causa raíz era diferente) o buscar directivas en apache2.conf o .htaccess que podrían estar causando 500 mensajes extraños de error interno del servidor.

Descubrimos que fallaba tan rápido que no había nada útil en los registros de errores de Apache y pasamos una mañana entera cambiando cosas pequeñas aquí y allá hasta que resolvimos el problema de configurar encabezados adicionales cuando habíamos olvidado cargar mod_headers.

J. Declan Young
fuente
0

A veces aparece este error, cuando HTML tiene algún código comentado y el navegador intenta buscar algo. Como en mi caso, había comentado el código de un formulario web en un matraz y estaba obteniendo esto.

Después de pasar 2 horas, lo arreglé de las siguientes maneras:

1) Creé un nuevo entorno de Python y luego arrojó un error en la línea HTML comentada, antes de esto solo arrojé el error 'GET /favicon.ico HTTP / 1.1 "404'

2) A veces, cuando tenía un código duplicado, como el archivo python existente con el mismo nombre, entonces también vi este error, intente eliminarlos también

ohsoifelse
fuente
-10

Podrías usar

<link rel="shortcut icon" href="http://localhost/" />

De esa manera, en realidad no se solicitará al servidor.

josh
fuente
1
Parece que puede causar que algunos navegadores arrojen mensajes de error de miedo, también tendrá que tener cuidado con el uso de ese truco en las páginas que pueden publicarse a través de HTTPS.
Brighid McDonnell
66
Usar about: blank es mejor.
Lucas