Favicon HTML 5 - Suporte?

Eu estava lendo a página do Favicon na Wikipedia. Eles mencionam a especificação do HTML 5 para o Favicon:

A especificação atual do HTML5 recomenda a especificação de ícones de tamanho em vários tamanhos, usando os atributos rel = "icon" size = "lista de dimensões de ícones separada por espaço" em uma tag. [ fonte ] Vários formatos de ícone, incluindo formatos de contêiner, como arquivos Microsoft .ico e Macintosh .icns, além de Scalable Vector Graphics, podem ser fornecidos incluindo o tipo de conteúdo do ícone na forma de type = "file content-type" dentro do diretório tag.

Olhando para o artigo citado (W3), eles mostram este exemplo:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Minha pergunta é: algum navegador suporta o método HTML 5?

Nota: Eu sei que a Apple usa o apple-touch-iconmétodo de metatags sobre o método HTML5.

O artigo da wikipedia afirma:

O navegador da web Google Chrome, no entanto, selecionará o tamanho de correspondência mais próximo do fornecido nos cabeçalhos HTML para criar ícones de aplicativos de 128 × 128 pixels quando o usuário escolher os atalhos Criar aplicativo ... no menu "Ferramentas".

Como o Internet Explorer (v9 a v11) e o Firefox lidam com isso? E o artigo está correto em como o Chrome lida com os Favicons HTML? (Não há nenhuma fonte citada para o Chrome confirmar isso.)

Na pesquisa, não consegui realmente encontrar nenhuma informação (confiável) no HTML 5 Favicon além do artigo da Wikipedia.

As respostas fornecidas (no momento deste post) são apenas para links, então pensei em resumir os links em uma resposta e no que vou usar.

Ao trabalhar para criar Favicons entre navegadores (incluindo ícones de toque), há várias coisas a considerar.

O primeiro (é claro) é o Internet Explorer. O IE não suporta favicons PNG até a versão 11. Portanto, nossa primeira linha é um comentário condicional para favicons no IE 9 e abaixo:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Para cobrir os usos do ícone, crie-o em 32x32 pixels. Observe o rel="shortcut icon"IE para reconhecer o ícone que precisa da palavra shortcutque não é padrão. Também envolvemos o .icofavicon em um comentário condicional do IE, porque o Chrome e o Safari usarão o .icoarquivo se ele estiver presente, apesar de outras opções disponíveis, não do que gostaríamos.

A descrição acima abrange o IE até o IE 9. O IE 11 aceita favicons PNG, mas o IE 10 não. Além disso, o IE 10 não lê comentários condicionais, portanto, o IE 10 não mostra um favicon. Com o IE 11 e o Edge disponíveis, não vejo o IE 10 em uso generalizado, por isso ignoro este navegador.

Para o restante dos navegadores, usaremos a maneira padrão de citar um favicon:

<link rel="icon" href="path/to/favicon.png">

Este ícone deve ter 196x196 pixels de tamanho para cobrir todos os dispositivos que podem usar esse ícone.

Para cobrir ícones de toque em dispositivos móveis, usaremos a maneira proprietária da Apple para citar um ícone de toque:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

O uso rel="apple-touch-icon-precomposed"não aplicará o brilho reflexivo quando marcado no iOS. Para que o iOS aplique o uso do brilho rel="apple-touch-icon". Esse ícone deve ter o tamanho de 180x180 pixels, já que é o tamanho atual recomendado pela Apple para os mais recentes iPhones e iPads. Eu li que o Blackberry também usará rel="apple-touch-icon-precomposed".

Observação: o Chrome para Android declara:

O apple-touch- * foi descontinuado e será suportado apenas por um curto período de tempo. (Escrito a partir da versão beta para m31 do Chrome).

Mosaicos personalizados para IE 11+ no Windows 8.1+

O IE 11+ no Windows 8.1+ oferece uma maneira de criar blocos fixados para o seu site.

A Microsoft recomenda criar alguns blocos no seguinte tamanho:

Pequeno: 128 x 128

Médio: 270 x 270

Largura: 558 x 270

Grande: 558 x 558

Essas devem ser imagens transparentes, pois definiremos um plano de fundo colorido a seguir.

Depois que essas imagens são criadas, você deve criar um arquivo xml chamado browserconfig.xmlcom o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Salve este arquivo xml na raiz do seu site. Quando um site é fixado, o IE procurará esse arquivo. Se você quiser nomear o arquivo xml como algo diferente ou tê-lo em um local diferente, adicione esta metatag ao head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Para obter informações adicionais sobre os blocos personalizados do IE 11+ e sobre o uso do arquivo XML, visite o site da Microsoft .

Juntando tudo:

Para juntar tudo, o código acima ficaria assim:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Azulejos do Windows Phone Live

Se um usuário estiver usando um Windows Phone, ele poderá fixar um site na tela inicial do telefone. Infelizmente, quando fazem isso, ele exibe uma captura de tela do seu telefone, não um favicon (nem mesmo o código específico da Microsoft mencionado acima). Para criar um "Live Tile" para usuários do Windows Phone no seu site, é necessário usar o seguinte código:

Aqui estão instruções detalhadas da Microsoft, mas aqui está uma sinopse:

Passo 1

Crie uma imagem quadrada para o seu site, para suportar telas de alta resolução, crie-a com 768x768 pixels de tamanho.

Passo 2

Adicione uma sobreposição oculta desta imagem. Aqui está um exemplo de código da Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

etapa 3

Você pode adicionar a seguinte linha para adicionar um pino ao link inicial:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

A Microsoft recomenda que você detecte o windows phone e mostre apenas esse link para esses usuários, pois ele não funcionará para outros usuários.

Passo 4

Em seguida, adicione algumas JS para alternar a visibilidade da sobreposição

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Nota sobre tamanhos

Estou usando um tamanho, pois cada navegador reduz a imagem conforme necessário. Eu poderia adicionar mais HTML para especificar vários tamanhos, se desejado, para aqueles com largura de banda menor, mas já estou compactando os arquivos PNG usando o TinyPNG e acho isso desnecessário para meus propósitos. Além disso, de acordo com a resposta de philippe_b , o Chrome e o Firefox têm bugs que fazem com que o navegador carregue todos os tamanhos de ícones. Usar um ícone grande pode ser melhor do que vários menores por causa disso.

Leitura adicional

Para quem deseja obter mais detalhes, consulte os links abaixo:

• Artigo da Wikipedia sobre Favicons
• O Manual do Ícone
• Entenda o Favicon por Jonathan T. Neal
• rel = "ícone de atalho" considerado prejudicial por Mathias Bynens
• Tudo o que você sempre quis saber sobre ícones de toque de Mathias Bynens

Não, nem todos os navegadores suportam o sizesatributo:

• Safari: Sim, ele escolhe a imagem que melhor se encaixa .
• Opera: Sim, ele escolhe a imagem que melhor se encaixa .
• IE11: Não tenho certeza. Aparentemente, leva a imagem maior que encontra , o que é um pouco grosseiro, mas tudo bem.
• Chrome: Não, consulte os erros 112941 e 324820 . De fato, o Chrome tende a carregar todos os ícones declarados, não apenas o melhor / primeiro / último.
• Firefox: Não, veja o bug 751712 . Como o Chrome, o Firefox tende a carregar todos os ícones declarados.

Observe que algumas plataformas definem tamanhos específicos:

• O Android Chrome espera um ícone de 192x192 , mas favorece os ícones declarados manifest.jsonse estiverem presentes. Além disso, o Chrome usa o ícone Apple Touch para marcadores .
• O Coast by Opera espera um ícone de 228x228 .
• O Google TV espera um ícone de 96 x 96 .