Suporte para Favicon HTML 5?

Estava a ler a página Favicon na Wikipédia. Eles mencionam o HTML 5 spec para Favicon:

a actual especificação HTML5 recomenda a especificação de ícones de tamanho em vários tamanhos, usando os atributos rel=tamanhos de "ícones"=" lista separada por espaços de dimensões de ícones " dentro de uma marca. [source ] múltiplos formatos de ícones, incluindo formatos de contentores como a Microsoft .ico e Macintosh .os ficheiros icns, bem como os gráficos vectoriais escaláveis podem ser fornecidos através da inclusão do ícone content type in the form of type= "file content-type" within the 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">

a minha pergunta é se algum navegador suporta o método HTML 5?

Nota: eu sei que a Apple usa o seu método de meta tag apple-touch-icon sobre o método HTML5.

o artigo da Wikipédia diz:

o navegador Web Google Chrome, no entanto, irá seleccionar o tamanho correspondente mais próximo dos fornecidos nos cabeçalhos HTML para criar Ícones de aplicação de 128×128 pixels quando o utilizador escolhe os atalhos de criação de aplicações... do menu "Ferramentas".

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

ao procurar não consegui encontrar nenhuma informação (credível) no HTML 5 Favicon para além do Artigo da Wikipédia.

Author: Filype, 2014-05-25
Source

2 answers

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

Ao trabalhar para criar Favicons de navegação cruzada (incluindo ícones de toque) existem várias coisas a considerar.

O primeiro (claro) é o Internet Explorer. IE não suporta PNG favicons até a versão 11. Então a nossa primeira linha é um comentário condicional para favicons em IE 9 e Abaixo: 
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

To cubra as utilizações do ícone crie-o em 32x32 pixels. Observe o rel="shortcut icon" para que o IE reconheça o ícone, Ele precisa da palavra shortcut que não é padrão. Também embrulhamos o .ico favicon num comentário condicional IE porque o Chrome e o Safari irão usar o ficheiro .ico se estiver presente, apesar de outras opções disponíveis, não o que gostaríamos.

As acima referidas abrangem IE até IE 9. IE 11 aceita PNG favicons, no entanto, IE 10 não. Além disso, o IE 10 não lê comentários condicionais, pelo que o IE 10 não mostra um favicon. Com IE 11 e Edge disponível Eu não vejo IE 10 em uso generalizado, então eu ignoro este navegador.

Para o resto dos navegadores vamos usar a maneira padrão para 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 possam usar este ícone.

Para cobrir ícones de toque em dispositivos móveis vamos usar a forma proprietária da Apple para citar um ícone de Toque: 

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

Utilizar rel="apple-touch-icon-precomposed" não irá aplicar o reflector brilhar Quando marcado em iOS. Para que o iOS aplique o shine use rel="apple-touch-icon". Este ícone deve ser dimensionado para 180x180 pixels como este é o tamanho atual recomendado pela Apple para os mais recentes iPhones e iPads. Li que o Blackberry também vai usar rel="apple-touch-icon-precomposed".

Como nota: cromado para Android Estados:

O toque de maçã - * está desactualizado, e será suportado apenas por um curto período de tempo. (Written as of beta for m31 of Chrome).

Peças personalizadas para o IE 11+ nas janelas 8.1+

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

A Microsoft recomenda a criação de algumas peças do seguinte tamanho:

Pequeno: 128 x 128

Médio: 270 x 270

Larga: 558 x 270

Grande: 558 x 558

Estas devem ser imagens transparentes, pois a seguir definiremos um fundo de cor.

Uma vez criadas estas imagens, deverá criar um ficheiro xml chamado browserconfig.xml com 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 ficheiro xml na raiz do seu site. Quando um site está preso IE vai olhar para este arquivo. Se você quiser nomear o arquivo xml algo diferente ou tê-lo em um local diferente adicione esta meta tag para o head: 

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

Para obter informações adicionais sobre as peças personalizadas IE 11+ e usando o ficheiro XML , visite o sítio web da Microsoft .

Juntando tudo:

Para juntar tudo o código acima seria 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">

Peças Ao Vivo Do Windows Phone

Se um usuário estiver usando um Windows Phone, pode colocar um site na tela inicial de seu telefone. Infelizmente, quando eles fazem isso, ele exibe uma imagem do seu telefone, não um favicon (nem mesmo o código específico MS referenciado acima). Para fazer uma" telha ao vivo " para os usuários do Windows Phone para o seu site, deve-se usar o seguinte código:

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

Passo 1

Crie uma imagem quadrada para o seu site, para suportar telas hi-res criá-la em 768x768 pixels de tamanho.

Passo 2

Adicione uma sobreposição escondida desta imagem. Aqui está o código de exemplo 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>

Passo 3

Você pode então adicionar a seguinte linha para adicionar um pin para iniciar a ligação: 

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

A Microsoft recomenda que detecte O windows phone e apenas mostre esse link para esses usuários, uma vez que ele não vai funcionar para outros usuários.

Passo 4

Em seguida, adiciona alguns JS para comutar 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 os tamanhos

Estou a usar um tamanho porque cada navegador irá reduzir a imagem conforme necessário. Eu poderia adicionar mais HTML para especificar vários tamanhos se desejado para aqueles com uma largura de banda mais baixa, mas eu já estou comprimindo os arquivos PNG fortemente usando TinyPNG e eu acho isso desnecessário para os meus propósitos. Além disso, de acordo com philippe_b'S resposta Chrome e 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.

Outras Leituras

Para aqueles que querem mais detalhes veja os links abaixo:

 300
Author: L84, 2017-05-23 12:26:33

Não, nem todos os navegadores suportam o atributo sizes:

  • Safari: SIM, ele escolhe a imagem que melhor se encaixa.
    • Ópera: Sim, ele escolhe a imagem que melhor se encaixa.
  • IE11: Não tenho a certeza. Parece que tira a imagem maior que encontra, o que é um pouco rude, mas está bem.
  • cromo: não, ver bugs 112941 e 324820. Na verdade, o Chrome tende a carregar todos ícones declarados, não só os melhores / primeiros / últimos um.
  • Firefox: não, ver bug 751712 . Como o Chrome, o Firefox tende a carregar todo ícone declarado.

Note que algumas plataformas definem tamanhos específicos:

 14
Author: philippe_b, 2016-01-14 10:09:46