Qual é atualmente a melhor maneira de exibir um favicon em todos os navegadores que suportam Favicons?

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

Pergunta

Qual é atualmente a melhor maneira de exibir um favicon em todos os navegadores que atualmente o suportam?

Porfavor inclua:

  1. Quais formatos de imagem são suportados por quais navegadores.

  2. Quais linhas são necessárias em quais locais para os vários navegadores.

Foi útil?

Solução

Eu opto por uma abordagem com cinto e aparelho aqui.

Eu crio um ícone 32x32 tanto no .ico e .png formatos chamados favicon.ico e favicon.png.O nome do ícone realmente não importa, a menos que você esteja lidando com navegadores mais antigos.

  1. Lugar favicon.ico na raiz do seu site para oferecer suporte a navegadores mais antigos (opcional e relevante apenas para navegadores mais antigos).
  2. Coloque favicon.png no meu subdiretório de imagens (apenas para manter as coisas organizadas).
  3. Adicione o seguinte HTML dentro do <head> elemento.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Observe que:

  • O tipo MIME para .ico arquivos foram registrados como image/vnd.microsoft.icon pelo IANA.
  • O Internet Explorer irá ignorar o type atributo para o relacionamento do ícone de atalho e este é o único navegador que suporta esse relacionamento, ele não precisa ser fornecido.

Referência

Outras dicas

Eu uso o formato .ico e coloco as duas linhas a seguir dentro do <head> elemento:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Para também oferecer suporte a ícones de toque para tablets e smartphones, prefiro a abordagem de HTML5Boilerplate

Mais informações sobre ícones de toque podem ser encontradas em Este artigo.

Com o status atual de suporte ao navegador, você nem precisa adicionar a tag HTML para o favicon no seu documento.Os navegadores irão pesquisar automaticamente uma lista de arquivos, veja este exemplo para iOS:

Se nenhum ícones for especificado no HTML, o iOS Safari pesquisará o diretório raiz do site em busca de ícones com o prefixo Apple-Touch-icon ou Apple-Touch-icon-Compompous.Por exemplo, se o tamanho apropriado do ícone para o dispositivo for de 57 × 57 pixels, o iOS busca nomes de arquivos na seguinte ordem:

  1. apple-touch-icon-57x57-precomposto.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposto.png
  4. apple-touch-icon.png

Meu conselho é não incluir um favicon no seu documento, mas ter uma lista de arquivos pronta no site raiz:

  • apple-touch-icon-114x114-precomposto.png
  • apple-touch-icon-144x144-precomposto.png
  • apple-touch-icon-57x57-precomposto.png
  • apple-touch-icon-72x72-precomposto.png
  • apple-touch-icon-precomposto.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Quando você baixa um modelo de html5boilerplate.com todos estão incluídos, basta substituí-los por seus próprios ícones.

O IE6 não consegue lidar com PNGs corretamente, esteja avisado.

O favicon deve ser um arquivo .ico para funcionar corretamente em todos os navegadores.

Os navegadores modernos também suportam imagens PNG e GIF.

Descobri que, em geral, a maneira mais fácil de criar um é usar um serviço da Web disponível gratuitamente, como favicon.cc.

Existe também um site onde você pode conferir como é feito o favicon de qualquer página

getfavicon.org

Lá você pode ver um tutorial sobre como fazer favicons, tipos de imagens e resoluções, é legal!

Tendo uma favicon.* em seu diretório raiz é detectado automaticamente pela maioria dos navegadores.Você pode garantir que ele seja detectado usando:

 <link rel="icon" type="image/png" href="/path/image.png" />

Pessoalmente eu uso imagens .png, mas a maioria dos formatos deve funcionar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top