Qual é atualmente a melhor maneira de fazer com que um favicon seja exibido em todos os navegadores que oferecem suporte a Favicons?

83

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

Porfavor inclua:

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

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

html standards favicon Fred
fonte
1
Também pode valer a pena incluir aqui os 'favicons' para o iPhone; isto é, se o usuário decidir adicionar seu site à tela inicial. O código usado neste caso é o seguinte: <link rel = "apple-touch-icon" href = "touch.png" /> As dimensões devem ser 57x57 pixels. Alternativamente, você pode omitir a tag do link e apenas colocar um arquivo chamado 'apple-touch-icon.png' no diretório raiz do seu site.
diferente de
Já que você está nisso, leia isto: mathiasbynens.be/notes/touch-icons
Zach Lysobey
Observe que você precisará de ícones maiores para telas do iPad e retina do iPhone. Consulte as diretrizes da Apple: developer.apple.com/library/IOs/#documentation/…
Mike Ottum

Respostas:

108

Eu opto por uma abordagem de cinto e chaves aqui.

Eu criar um ícone de 32x32 em ambos os .icoe .pngformatos chamados favicon.icoe favicon.png. O nome do ícone realmente não importa, a menos que você esteja lidando com navegadores mais antigos.

  1. Coloque favicon.icona raiz do seu site para suportar os navegadores mais antigos (opcional e relevante apenas para navegadores mais antigos.
  2. Coloque favicon.png no 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 = "ícone de atalho" href = "/ favicon.ico" />

Observe que:

  • O tipo MIME para .icoarquivos foi registrado como image / vnd.microsoft.icon pela IANA .
  • O Internet Explorer irá ignorar o typeatributo para a relação do ícone de atalho e este é o único navegador que oferece suporte para essa relação, não precisa ser fornecido.

Referência

Brian Matthews
fonte
2
OK, estou tendo um dia de 'Microsoft está me dando nos nervos'. Não consigo fazer isso funcionar no Internet Explorer, apesar de mostrar o favicon para o site stackoverflow. Existem outras configurações que afetam isso, como doctype?
belugabob
1
FYI - eu encontrei a resposta. Se você se referir ao site via localhost: 8080 / index.html , ele não funcionará - se você usar o nome real da máquina ( machineName: 8080 / index.html ), tudo funciona conforme o esperado. Não consigo nem começar a entender esse comportamento - alguém se importa em tentar?
belugabob
2
Atualizar - o comportamento é causado pelo cache do navegador do ícone. Limpar os arquivos temporários da Internet vai resolver isso, se você se sentir feliz em perder o cache.
belugabob
2
Seria mais legal colocar a versão do IE do link em um comentário condicional do IE?
EoghanM
9
32x32 ?? 16x16 não é a norma?
Eduardo Molteni
10

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" />
John Topley
fonte
6

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

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

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

Se nenhum ícone for especificado no HTML, o iOS Safari pesquisará no diretório raiz do site por ícones com o prefixo apple-touch-icon ou apple-touch-icon-pré-composto. Por exemplo, se o tamanho do ícone apropriado para o dispositivo é 57 × 57 pixels, o iOS procura nomes de arquivos na seguinte ordem:

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

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

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

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

Willem de Wit
fonte
O primeiro link está desatualizado, precisa ir para github.com/h5bp/html5-boilerplate/blob/master/src/doc/… agora. Eu me editaria, mas não mudou o suficiente de caracteres: / Obrigado pela sua resposta!
Brendan
4

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

ágil
fonte
3

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

Os navegadores modernos também oferecem suporte a 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 .

Antti Kissaniemi
fonte
3

Também existe um site onde você pode verificar como o favicon de qualquer página é feito

getfavicon.org

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


fonte
Não está mais operacional.
Roman Starkov
2

Ter um 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.

Ross
fonte
Não, não é "favicon. *", Apenas alguns formatos funcionam: ico, png, gif, jpeg e SVG. Consulte en.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo