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: