Qual é atualmente a melhor maneira de exibir um favicon em todos os navegadores que suportam Favicons?
Pergunta
Qual é atualmente a melhor maneira de exibir um favicon em todos os navegadores que atualmente o suportam?
Porfavor inclua:
Quais formatos de imagem são suportados por quais navegadores.
Quais linhas são necessárias em quais locais para os vários navegadores.
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.
- Lugar
favicon.ico
na raiz do seu site para oferecer suporte a navegadores mais antigos (opcional e relevante apenas para navegadores mais antigos). - Coloque favicon.png no meu subdiretório de imagens (apenas para manter as coisas organizadas).
- 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.
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:
- apple-touch-icon-57x57-precomposto.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposto.png
- 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
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.