Qual é a prática recomendada para criar um favicon em um site?

103

Questão

  • Qual é a prática recomendada para criar um favicon em um site?
  • e um arquivo .ico com imagens 16x16 e 32x32 é melhor do que um arquivo .png com 16x16 apenas?
  • Será que o método correto preferido hoje não está funcionando em navegadores razoavelmente antigos?

Método 1

Colocar um arquivo nomeado favicon.icono diretório principal é uma maneira. O navegador sempre solicita esse arquivo. Você pode ver isso nos arquivos de log do apache.

Método 2

Tag HTML na <head>seção:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon bytecode77
fonte

Respostas:

153

Existem várias maneiras de criar um favicon. A melhor maneira para você depende de vários fatores:

  • O tempo que você pode gastar nesta tarefa. Para muitas pessoas, isso é "o mais rápido possível".
  • Os esforços que você está disposto a fazer. Por exemplo, desenhar um ícone de 16x16 manualmente para obter melhores resultados.
  • Restrições específicas, como suporte a um navegador específico com especificações estranhas.

Primeiro método: use um gerador de favicon

Se você deseja realizar o trabalho bem e rapidamente, pode usar um gerador de favicon . Este cria as imagens e o código HTML para todos os principais navegadores de desktop e celulares. Divulgação completa: sou o autor deste site.

Vantagens dessa solução: é rápida e todas as considerações de compatibilidade já foram tratadas para você.

Segundo método: crie um favicon.ico (apenas navegadores de desktop)

Como você sugere, você pode criar um favicon.icoarquivo que contenha imagens 16x16 e 32x32 (observe que a Microsoft recomenda 16x16, 32x32 e 48x48 ).

Em seguida, declare-o em seu código HTML:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Este método funcionará com todos os navegadores de desktop, antigos e novos. Mas a maioria dos navegadores móveis irá ignorar o favicon.

Sobre sua sugestão de colocar o favicon.icoarquivo na raiz e não declarar: cuidado, embora essa técnica funcione na maioria dos navegadores, ela não é 100% confiável. Por exemplo, o Windows Safari não consegue localizá-lo (concedido: este navegador está de alguma forma obsoleto no Windows, mas você entendeu). Essa técnica é útil quando combinada com ícones PNG (para navegadores modernos).

Terceiro método: crie um favicon.ico, um ícone PNG e um ícone Apple Touch (todos os navegadores)

Em sua pergunta, você não menciona os navegadores móveis. A maioria deles irá ignorar o favicon.icoarquivo. Embora seu site possa ser dedicado a navegadores de desktop, é provável que você não queira ignorar totalmente os navegadores de celular.

Você pode obter uma boa compatibilidade com:

  • favicon.ico, Veja acima.
  • Um ícone 192x192 PNG para Android Chrome
  • Um ícone 180x180 do Apple Touch (para iPhone 6 Plus; outro dispositivo o reduzirá conforme necessário).

Declare-os com 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Esta não é a história completa, mas é boa o suficiente na maioria dos casos.

philippe_b
fonte
9
Na verdade, o ainda frequentemente usado <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> não é uma opção válida. Não é nem padrão e apenas o IE o suporta. E a partir do IE 9, o IE oferece suporte ao método padrão 'olhar para a raiz'. Portanto, não é uma forma de oferecer suporte a todos os navegadores, mas apenas uma forma de oferecer suporte ao IE <9. Confie no método (agora padrão) 'colocar na raiz' ou, se você insistir, adicione: <link rel = "icon" href = "/ favicon.ico"> (Mesmo que também não seja padrão)
HappyMe
7
O mecanismo de favicon definitivamente evoluiu ao longo dos anos. Percebi hoje que a especificação no MDN agora diz: O tipo de link de atalho costuma ser visto antes do ícone, mas esse tipo de link não está em conformidade, é ignorado e os autores da web não devem mais usá-lo. Significa usar em <link ref="icon" ...>vez de <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Obrigado @ broc.seib pelo feedback. No momento em que escrevi este comentário, perdi a noção do motivo pelo qual era "ícone de atalho" e não "ícone". Claro, a Mozilla tem sua voz nesta história. Mas não devemos esquecer por que essa declaração está aqui em primeiro lugar: para oferecer suporte a navegadores legados, como o IE 8. A maioria dos navegadores recentes usa ícones PNG, que são mais limpos e mais leves do que ICO. Meu plano para o RealFavicon é remover essa declaração completamente. Antes disso, preciso executar testes no IE 7, 8 e 9.
philippe_b
Sem mencionar que se você "visualizar a fonte" nesta página, no Stack Overflow, ref="shortcut icon"é exatamente o que eles usam.
Steven Ventimiglia
1
@laggingreflex /favicon.icoé o método preferido. Isso é o que você ganha ao visitar www.google.com. Ainda assim, você pode não querer poluir seu diretório raiz com um ícone. Nesse caso, a marcação funciona perfeitamente.
philippe_b
2
  1. você pode trabalhar com este site para gerar favin.ico
  2. Eu recomendo usar o formato .ico porque o png não funciona com o método 1 e o ico poderia ter mais detalhes!
  3. ambos os métodos funcionam com todos os navegadores, mas quando funcionar automaticamente o que você deseja digitar um código para ele? então acho que o método 1 é melhor.
a828h
fonte
2

Eu usei https://iconifier.net Eu carreguei minha imagem, baixei o arquivo zip de imagens, adicionei imagens ao meu servidor, segui as instruções do site incluindo a adição de links para o meu index.html e funcionou. Meu favicon agora é exibido no meu iPhone no Safari quando 'Adicionar à tela inicial'

Hblegg
fonte