Le risposte fornite (al momento di questo post) sono solo risposte ai link, quindi ho pensato di riassumere i link in una risposta e cosa userò.
Quando si lavora per creare favicon Cross Browser (comprese le icone a sfioramento) ci sono diverse cose da considerare.
Il primo (ovviamente) è Internet Explorer. IE non supporta i favicon PNG fino alla versione 11. Quindi la nostra prima riga è un commento condizionale per favicon in IE 9 e precedenti:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Per coprire gli usi dell'icona crearla a 32x32 pixel. Si noti che rel="shortcut icon"per IE per riconoscere l'icona ha bisogno della parola shortcutche non è standard. Inoltre avvolgiamo la .icofavicon in un commento condizionale di IE perché Chrome e Safari utilizzeranno il .icofile se è presente, nonostante le altre opzioni disponibili, non quello che vorremmo.
Quanto sopra copre IE fino a IE 9. IE 11 accetta favicon PNG, tuttavia IE 10 no. Inoltre IE 10 non legge i commenti condizionali, quindi IE 10 non mostrerà una favicon. Con IE 11 e Edge disponibili non vedo IE 10 in uso diffuso, quindi ignoro questo browser.
Per il resto dei browser useremo il modo standard per citare una favicon:
<link rel="icon" href="path/to/favicon.png">
Questa icona deve avere dimensioni di 196x196 pixel per coprire tutti i dispositivi che possono utilizzare questa icona.
Per coprire le icone touch sui dispositivi mobili utilizzeremo il modo proprietario di Apple per citare un'icona touch:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
L'uso rel="apple-touch-icon-precomposed"non applica la lucentezza riflettente quando viene aggiunto un segnalibro su iOS. Per fare in modo che iOS applichi l'uso di Shinerel="apple-touch-icon" . Questa icona deve essere dimensionata a 180x180 pixel poiché è la dimensione corrente consigliata da Apple per gli ultimi iPhone e iPad. Ho letto che verrà utilizzato anche Blackberry rel="apple-touch-icon-precomposed".
Come nota: Chrome per Android afferma:
I apple-touch- * sono obsoleti e saranno supportati solo per un breve periodo. (Scritto dalla beta per m31 di Chrome).
Piastrelle personalizzate per IE 11+ su Windows 8.1+
IE 11+ su Windows 8.1+ offre un modo per creare riquadri bloccati per il tuo sito.
Microsoft consiglia di creare alcuni riquadri con le seguenti dimensioni:
Piccolo: 128 x 128
Medio: 270 x 270
Largo: 558 x 270
Grande: 558 x 558
Queste dovrebbero essere immagini trasparenti in quanto definiremo successivamente uno sfondo colorato.
Una volta create queste immagini, è necessario creare un file xml chiamato browserconfig.xmlcon il seguente codice:
<?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>
Salva questo file xml nella radice del tuo sito. Quando un sito viene bloccato, IE cercherà questo file. Se vuoi nominare il file xml con qualcosa di diverso o averlo in una posizione diversa aggiungi questo meta tag al head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Per ulteriori informazioni sui riquadri personalizzati di IE 11+ e sull'utilizzo del file XML, visitare il sito Web di Microsoft .
Mettere tutto insieme:
Per mettere tutto insieme il codice sopra sarebbe simile a questo:
<!-- 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">
Piastrelle live di Windows Phone
Se un utente utilizza un Windows Phone, può aggiungere un sito Web alla schermata iniziale del proprio telefono. Sfortunatamente, quando lo fanno mostra uno screenshot del tuo telefono, non una favicon (nemmeno il codice specifico per MS menzionato sopra). Per creare un "riquadro animato" per gli utenti di Windows Phone per il tuo sito Web, devi utilizzare il seguente codice:
Ecco le istruzioni dettagliate di Microsoft, ma ecco una sinossi:
Passo 1
Crea un'immagine quadrata per il tuo sito Web, per supportare schermate ad alta risoluzione, creala con dimensioni di 768x768 pixel.
Passo 2
Aggiungi un overlay nascosto di questa immagine. Ecco un esempio di codice di 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>
Passaggio 3
È quindi possibile aggiungere la seguente riga per aggiungere un pin per avviare il collegamento:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft consiglia di rilevare Windows Phone e di mostrare solo quel collegamento a tali utenti poiché non funzionerà per altri utenti.
Passaggio 4
Successivamente aggiungi alcuni JS per attivare la visibilità della sovrapposizione
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Nota sulle taglie
Sto usando una dimensione in quanto ogni browser ridimensionerà l'immagine se necessario. Potrei aggiungere più HTML per specificare più dimensioni se lo si desidera per quelli con una larghezza di banda inferiore, ma sto già comprimendo pesantemente i file PNG usando TinyPNG e lo trovo non necessario per i miei scopi. Inoltre, secondo la risposta di philippe_b , Chrome e Firefox hanno dei bug che causano il caricamento di icone di tutte le dimensioni nel browser. L'uso di un'icona grande può essere migliore di più di quelle più piccole per questo motivo.
Ulteriori letture
Per coloro che desiderano maggiori dettagli, consultare i collegamenti seguenti: