Como evitar solicitações de favicon.ico?

551

Eu não tenho um favicon.ico, mas o IE sempre faz um pedido.

É possível impedir que o navegador solicite o favicon do meu site? Talvez algum META-TAG no cabeçalho HTML?

favicon

— Daniel Silveira
fonte

21

+1 com uma boa pergunta, mas parece que a solução mais simples é adicionar um favicon válido :-) certamente esse é um trabalho de um minuto e seu site parece mais profissional imediatamente?

— precisa saber é o seguinte

4

Você também pode ter um arquivo favicon.ico vazio. Isso interromperá as solicitações (após a primeira), mas não fará com que o navegador renderize um favicon em branco, onde geralmente é renderizado, seja qual for o ícone padrão.

— Mxcl

38

Devo dizer que concordo completamente com o ponto implícito do questionador: com que finalidade algo extra se tornaria obrigatório ? e, além disso, como é que não podemos simplesmente adicionar alguns metadados à resposta dizendo "se comporte exatamente como se você tivesse solicitado um favicon.ico e adquirido um 404, apenas não faça a solicitação e não peça novamente até que esta página muda ".

— Daniel

36

Isso é uma dor. Eu tenho um serviço da web que serve apenas JSON e nem sequer tem a capacidade básica de servir arquivos sem algumas alterações (para começar, todo método requer um token de autenticação para evitar um 401/403). Registro solicitações com falha para poder analisá-las posteriormente - os registros são constantemente inundados com solicitações de um favicon.

— Básico

3

É 2015. Alguma notícia sobre isso?

— Jonathan Prates

575

Primeiro vou dizer que ter um favicon em uma página da Web é uma coisa boa (normalmente).

No entanto, nem sempre é desejado e, às vezes, os desenvolvedores precisam de uma maneira de evitar a carga útil extra. Por exemplo, um IFRAME solicitaria um favicon sem mostrá-lo. Pior ainda, no Chrome e no Android, um IFRAME gerará três solicitações de favoritos:

"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

A seguir, é utilizado o URI de dados e pode ser usado para evitar solicitações de favicon falsas:

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

Para referências, veja aqui:

O bug / comportamento do Chrome provavelmente será corrigido nas próximas versões.

Aqui está o envio de bug para você votar:

https://bugs.chromium.org/p/chromium/issues/detail?id=131567

ATUALIZAÇÃO 1:

A partir dos comentários (jpic), parece que o Firefox> = 25 não gosta mais da sintaxe acima. Eu testei no Firefox 27 e ele não funciona enquanto ainda funciona no Webkit / Chrome.

Então, aqui está o novo que deve cobrir todos os navegadores recentes. Eu testei o Safari, Chrome e Firefox:

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

Eu deixei de fora o nome do "atalho" do valor do atributo "rel", pois isso é apenas para o IE mais antigo e as versões do IE <8 também não gostam de dataURIs. Não testado no IE8.

ATUALIZAÇÃO 2:

Se você precisar validar seu documento no HTML5, use-o:

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

— Diego Perini
fonte

1

Brilhante. Eu tenho que adivinhar o fato de você ter conseguido tão poucos votos que tem a ver apenas com o fato de que vários anos se passaram desde que a pergunta foi feita, e respostas menos inteligentes tiveram mais tempo para reunir votos.

— iconoclast

21

Sua ATUALIZAÇÃO 2 teve problemas com o Lollipop ... a adição <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">parece resolver o problema.

— Alko

2

Se eu acertar, posso abrir data:image/png;base64,iVBORw0KGgo=no navegador, salvá-lo como favicon.icoaka. arquivo vazio em PNG e armazene-o na raiz do site. Direita?

— Martin

3

@Alko Esse arquivo PNG vazio ainda é inválido. Se este é apenas sobre como criar um URL de dados que descreve um arquivo vazio, use: <link rel = "ícone" href = "Dados:">

— vog

2

Os navegadores tendem a solicitar o favicon mesmo se não houver referências a ele no arquivo index.html, então como essa solução evitaria isso? Especificamente, vi o Firefox ser muito agressivo em solicitá-lo assim que você visita um domínio. Outros navegadores podem fazer isso mais tarde, talvez depois que o arquivo de índice carregou o cabeçalho (alguém com mais conhecimento das partes internas dos navegadores, por favor, comente). Não ter um favicon tem efeitos colaterais potenciais, apenas google-lo, ou: stackoverflow.com/questions/4269695/...

— juanheyns

131

Basta adicionar a seguinte linha à <head>seção do seu arquivo HTML:

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

Recursos desta solução:

HTML5 100% válido
muito curto
não incorre em nenhuma peculiaridade do IE 8 e mais antigo
não faz o navegador interpretar o código HTML atual como favicon (o que seria o caso href="#")

— vog
fonte

4

Se você está apenas tentando desligar os devtools do chrome em um projeto local, essa é de longe a maneira mais fácil e limpa de executar.

— Andrew

Por favor, expanda isso. Eu só preciso incluir isso no meu arquivo HTML para interromper a solicitação de favicon?

— Aakash Verma

2

@AakashVerma Sim, é tudo. Nada mais é necessário. (A menos que seu site precise oferecer suporte ao Internet Explorer 8 ou mais antigo). Melhorei minha resposta de acordo.

— Vog

@asynts Como assim reserves space?

— mvorisek 02/09/19

@ Andrew Qual é o problema que o Chrome DevTools tem com esta solução?

— Flinsch 22/10/19

47

Eu acredito que já vi isso ~~(Ainda não testei ou usei pessoalmente)~~:

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

Alguém teve experiência semelhante?

EDITAR:

Acabei de testar o trecho acima e, em uma atualização completa forçada, nenhuma solicitação de favicon foi vista no Fiddler. Eu testei contra o IE8 (modo Compat como padrões IE7) e o FF 3.6.

— mlhDev
fonte

1

meus testes também indicam que esse truque funciona. No entanto, eu teria o hreflink para algum recurso estático (armazenado em cache) que você já carregou (por exemplo, arquivo CSS ou script) - para garantir que uma página dinâmica (não armazenada em cache) não seja solicitada duas vezes. (Apenas por segurança, pois href="#"aponta tecnicamente para a página da web atual).

— 22611

2

Eu tentei no Safari. A solicitação favicon atinge a página de hospedagem novamente.

— Morgan Cheng

27

Eu não sugeriria isso, porque faz com que o navegador (Safari5 / Mac, talvez outros também) solicite a página da Web do servidor duas vezes.

— Manav

2

@Manav Esse não é mais o caso do Safari6 / Mac.

— Marcel

2

BOOM ISTO! Obrigado: D agora não vou ver esse erro irritante, até que finalmente cheguei a fazer esse ícone hehe.

— precisa saber é o seguinte

39

Você não pode. Tudo o que você pode fazer é tornar a imagem o menor possível e definir alguns cabeçalhos de invalidação de cache ( Expires, Cache-Control) no futuro. Aqui está o que o Yahoo! tem a dizer sobre pedidos favicon.ico.

— Ionuț G. Stan
fonte

7

Ele disse que não tem um favicon. Eles não ficam muito menores que isso. E não faz sentido armazenar em cache arquivos inexistentes.

— InnaM 24/08/09

16

Se ele não tem um favicon, então ele deveria fazer um, esse era o meu ponto. Não há solução melhor do que esta. Não é lógico? Se não houver possibilidade de interromper solicitações, a menos que você use o cache, o que você faz?

— Ionuţ G. Stan

5

Você pode usar as diretivas .htaccess ou server para negar acesso ao favicon.ico, mas o servidor enviará uma resposta de acesso negado ao navegador e isso ainda diminui o acesso à página.

Você pode interromper o navegador que solicita o favicon.ico quando um usuário retornar ao seu site, fazendo com que ele permaneça no cache do navegador.

Primeiro, forneça uma pequena imagem favicon.ico, que pode ficar em branco, mas o menor possível. Eu fiz um preto e branco com menos de 200 bytes. Em seguida, usando diretivas .htaccess ou de servidor, defina o cabeçalho Expirar arquivo um ou dois meses no futuro. Quando o mesmo usuário voltar ao seu site, ele será carregado no cache do navegador e nenhuma solicitação será direcionada ao seu site. Não há mais 404 nos logs do servidor também.

Se você tiver controle sobre um servidor Apache completo ou talvez um servidor virtual, poderá fazer o seguinte: -

Se a raiz do documento do servidor for / var / www / html, adicione-a ao /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>

Então, um único favicon.ico funcionará para todos os sites virtuais hospedados, já que você está usando o alias. Ele será retirado do cache do navegador por um mês após a visita dos usuários.

Para .htaccess, isso é relatado como funcionando (não verificado por mim): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"

— Anon1
fonte

Não se esqueça de ativar o módulo: ~ / etc / apache2 # a2enmod expira && restart apache2 serviço

— Sino Boeckmann

4

Uma solução muito simples é colocar o código abaixo no seu .htaccess. Eu tive o mesmo problema e resolve o meu problema.

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

Referência: http://perishablepress.com/block-favicon-url-404-requests/

— Marcio Mazzucato
fonte

O artigo vinculado a partir daqui é muito bom, mas acredito que a sintaxe na resposta está incorreta.

— Erica Kane

4

se você usa nginx

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}

— Vincent-cm
fonte

Isso não impede a solicitação, mas eu gosto como alternativa.

— QasimK

Claro, se você pode controlar o servidor da web.

— jbruni

1

No Node.js,

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

— Visv M
fonte

0

Em nossa experiência, com o Apache caindo a pedido do favicon.ico, comentamos cabeçalhos extras no arquivo .htaccess.

Por exemplo, o cabeçalho definiu a proteção X-XSS "1; mode = block"

... mas esquecemos de sudo os cabeçalhos do a2enmod de antemão. Comentar o envio de cabeçalhos extras resolveu o problema do favicon.ico.

Também tínhamos vários hosts virtuais configurados para desenvolvimento, e só falhamos com o 500 Internal Server Error ao usar http: // localhost e buscar /favicon.ico. Se você executar "curl -v http: //localhost/favicon.ico " e receber um aviso sobre o nome do host não estar no cache do resolvedor ou algo nesse sentido, poderá ocorrer problemas.

Pode ser tão simples quanto não buscar (tentamos isso e não funcionou, porque nossa causa raiz era diferente) ou procurar diretivas no apache2.conf ou no .htaccess que podem estar causando estranhas mensagens de erro do 500 Internal Server.

Nós descobrimos que falhou tão rapidamente que não havia nada útil nos logs de erros do Apache e passamos a manhã inteira mudando pequenas coisas aqui e ali até resolvermos o problema de definir cabeçalhos extras quando esquecemos de carregar o mod_headers!

— J. Declan Young
fonte

0

Às vezes, esse erro ocorre quando o HTML tem algum código comentado e o navegador está tentando procurar algo. Como no meu caso, eu tinha comentado o código de um formulário da Web no balão e estava obtendo isso.

Depois de duas horas, eu o consertei das seguintes maneiras:

1) Criei um novo ambiente python e, em seguida, ele gerou um erro na linha HTML comentada; antes disso, era gerado apenas o erro 'GET /favicon.ico HTTP / 1.1 "404"

2) Às vezes, quando eu tinha um código duplicado, como um arquivo python existente com o mesmo nome, também vi esse erro, tente removê-los também

— ohsoifelse
fonte

-10

Você poderia usar

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

Dessa forma, ele não será realmente solicitado pelo servidor.

— Josh
fonte

1

Parece que isso pode fazer com que alguns navegadores gerem mensagens de erro assustadoras - você também deve usar esse truque em páginas que podem ser veiculadas por HTTPS.

— Brighid McDonnell

6

Usando about: blank é melhor.

— Lucas