Le risposte fornite (al momento di questo post) sono solo risposte di collegamento, quindi ho pensato di riassumere i collegamenti in una risposta e ciò che userò.
Quando si lavora per creare le Favicon Cross Browser (incluse le icone a sfioramento) ci sono diverse cose da considerare.
Il primo (ovviamente) è Internet Explorer. IE non supporta favicon PNG fino alla versione 11. Quindi la nostra prima linea è un commento condizionale per favicon in IE 9 e sotto:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Per coprire gli usi della icona di crearla a 32x32 pixel. Notare rel="shortcut icon" per IE per riconoscere l'icona di cui ha bisogno la parola shortcut che non è standard. Inoltre, includiamo la preferenza .ico in un commento condizionale IE perché Chrome e Safari utilizzeranno il file .ico se è presente, nonostante le altre opzioni disponibili, non ciò che vorremmo.
Le coperture di cui sopra IE fino a IE 9. IE 11 accetta favicon PNG, tuttavia, IE 10 non lo fa. Anche 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 che stiamo per usare il modo standard per citare una favicon:
<link rel="icon" href="path/to/favicon.png">
Questa icona dovrebbe essere 196x196 pixel di dimensioni per coprire tutti i dispositivi che possono utilizzare questa icona.
Per coprire le icone a sfioramento su dispositivi mobili ci accingiamo a utilizzare modo proprietario di Apple per citare l'icona di un tocco:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Utilizzando rel="apple-touch-icon-precomposed" non si applicherà la lucentezza riflettente quando segnalibro su iOS. Per fare in modo che iOS applichi la lucentezza usa rel="apple-touch-icon". Questa icona deve avere dimensioni pari a 180x180 pixel in quanto è la dimensione corrente consigliata da Apple per gli ultimi iPhone e iPad. Ho letto che Blackberry userà anche rel="apple-touch-icon-precomposed".
Come nota: Chrome per Android afferma:
La mela-touch * sono deprecati, e sarà supportato solo per un breve periodo di tempo. (Scritto come beta per m31 di Chrome).
piastrelle personalizzate per IE su Windows 11+ 8.1+
IE su Windows 11+ 8.1+ non offre un modo per creare piastrelle appuntato per il sito.
Microsoft consiglia la creazione di alcune mattonelle al seguente formato:
piccola: 128 x 128
Medium: 270 x 270
Wide: 558 x 270
Grande: 558 x 558
Queste devono essere tr immagini ansparenti come definiremo uno sfondo colorato dopo.
Una volta che queste immagini sono create si dovrebbe creare un file XML denominato browserconfig.xml con 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 il file xml nella root del vostro sito. Quando un sito è bloccato, IE cercherà questo file. Se si vuole dare un nome al file xml qualcosa di diverso o avere in una posizione diversa aggiungere questo meta tag al head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Per ulteriori informazioni su IE 11+ piastrelle personalizzate e utilizzando il file XML visit Microsoft's website.
Mettere tutto insieme:
a mettere tutto insieme il codice di cui sopra sarebbe simile a questa:
<!-- 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">
Windows Phone Tiles Live
Se un utente sta usando un Windows Phone possono attaccare 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 MS di cui sopra). Per fare un "Live Tile" per gli utenti Windows Phone per il tuo sito si deve usare il seguente codice:
Here are detailed instructions from Microsoft ma qui è una sinossi:
Fase 1
Creare un'immagine quadrata per la vostra sito web, per supportare schermate ad alta risoluzione, crea una dimensione di 768x768 pixel.
Fase 2
aggiungere una sovrapposizione di nascosto di questa immagine. Ecco esempio di codice 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>
Fase 3
È quindi possibile aggiungere Thew seguente riga per aggiungere un perno per avviare link:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
si consiglia pertanto di rilevare le finestre telefono e mostra solo quel collegamento a quegli utenti poiché non funzionerà per altri utenti.
Fase 4
successivo si aggiunge un po 'di JS per attivare o disattivare la visibilità di sovrapposizione
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Nota sulla Taglie
Sto usando una taglia come ogni browser ridurre la portata del 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 non lo ritengo necessario per i miei scopi. Inoltre, in base allo philippe_b di answer, Chrome e Firefox presentano bug che fanno sì che il browser carichi icone di tutte le dimensioni. A causa di ciò, l'utilizzo di un'icona grande potrebbe essere migliore rispetto a più piccoli.
Ulteriori letture
Per chi volesse maggiori dettagli si veda il link qui sotto:
Qualcosa sembra strano nel codice precedente: html5 non consente di quotare i valori degli attributi? Risposta: https://stackoverflow.com/questions/6495310/do-you-quote-html5-attributes – Jakub