Die Antworten (zum Zeitpunkt dieses Beitrags) sind nur Linkantworten, daher dachte ich, ich würde die Links zu einer Antwort zusammenfassen und was ich verwenden werde.
Bei der Erstellung von Cross-Browser-Favoriten (einschließlich Touch-Symbolen) sind verschiedene Punkte zu beachten.
Der erste ist (natürlich) der Internet Explorer. IE unterstützt PNG-Favicons erst ab Version 11. Unsere erste Zeile ist also ein bedingter Kommentar für Favicons in IE 9 und darunter:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Um die Verwendung des Symbols abzudecken, erstellen Sie es mit 32 x 32 Pixel. Beachten Sie, dass der rel="shortcut icon"IE, um das Symbol zu erkennen, das Wort benötigt, das shortcutnicht Standard ist. Außerdem verpacken wir das .icoFavicon in einen IE-bedingten Kommentar, da Chrome und Safari die .icoDatei verwenden, wenn sie vorhanden ist, obwohl andere Optionen verfügbar sind, nicht das, was wir möchten.
Das Obige deckt IE bis IE 9 ab. IE 11 akzeptiert PNG-Favicons, IE 10 jedoch nicht. Auch IE 10 liest keine bedingten Kommentare, so dass IE 10 kein Favicon anzeigt. Da IE 11 und Edge verfügbar sind, wird IE 10 nicht häufig verwendet, daher ignoriere ich diesen Browser.
Für den Rest der Browser verwenden wir die Standardmethode, um ein Favicon zu zitieren:
<link rel="icon" href="path/to/favicon.png">
Dieses Symbol sollte 196 x 196 Pixel groß sein, um alle Geräte abzudecken, die dieses Symbol verwenden können.
Um Berührungssymbole auf Mobilgeräten abzudecken, verwenden wir Apples proprietäre Methode, um ein Berührungssymbol zu zitieren:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Bei Verwendung rel="apple-touch-icon-precomposed"wird der reflektierende Glanz nicht angewendet, wenn unter iOS Lesezeichen gesetzt werden. Damit iOS den Glanz anwendet, verwenden Sie rel="apple-touch-icon". Dieses Symbol sollte eine Größe von 180 x 180 Pixel haben, da dies die aktuelle Größe ist, die Apple für die neuesten iPhones und iPads empfiehlt. Ich habe gelesen, Blackberry wird auch verwenden rel="apple-touch-icon-precomposed".
Als Hinweis: Chrome für Android gibt Folgendes an:
Die Apple-Touch- * sind veraltet und werden nur für kurze Zeit unterstützt. (Geschrieben ab Beta für m31 von Chrome).
Benutzerdefinierte Kacheln für IE 11+ unter Windows 8.1+
IE 11+ unter Windows 8.1+ bietet eine Möglichkeit, angeheftete Kacheln für Ihre Site zu erstellen.
Microsoft empfiehlt, einige Kacheln in der folgenden Größe zu erstellen:
Klein: 128 x 128
Medium: 270 x 270
Breit: 558 x 270
Groß: 558 x 558
Dies sollten transparente Bilder sein, da wir als nächstes einen farbigen Hintergrund definieren werden.
Sobald diese Bilder erstellt wurden, sollten Sie eine XML-Datei browserconfig.xmlmit dem folgenden Code erstellen:
<?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>
Speichern Sie diese XML-Datei im Stammverzeichnis Ihrer Site. Wenn eine Site angeheftet ist, sucht der IE nach dieser Datei. Wenn Sie der XML-Datei einen anderen Namen geben oder sie an einem anderen Speicherort haben möchten, fügen Sie dieses Meta-Tag hinzu zu head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Weitere Informationen zu benutzerdefinierten Kacheln für IE 11+ und zur Verwendung der XML-Datei finden Sie auf der Microsoft-Website .
Alles zusammen:
Um alles zusammenzusetzen, würde der obige Code folgendermaßen aussehen:
<!-- 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 Live-Kacheln
Wenn ein Benutzer ein Windows Phone verwendet, kann er eine Website an den Startbildschirm seines Telefons anheften. Leider wird dabei ein Screenshot Ihres Telefons angezeigt, kein Favicon (nicht einmal der oben angegebene MS-spezifische Code). Um eine "Live-Kachel" für Windows Phone-Benutzer für Ihre Website zu erstellen, muss der folgende Code verwendet werden:
Hier finden Sie detaillierte Anweisungen von Microsoft, aber hier eine Zusammenfassung:
Schritt 1
Erstellen Sie ein quadratisches Bild für Ihre Website, um hochauflösende Bildschirme zu unterstützen. Erstellen Sie es mit einer Größe von 768 x 768 Pixel.
Schritt 2
Fügen Sie eine versteckte Überlagerung dieses Bildes hinzu. Hier ist ein Beispielcode von 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>
Schritt 3
Sie können dann die folgende Zeile hinzufügen, um einen Pin zum Starten des Links hinzuzufügen:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft empfiehlt, dass Sie Windows Phone erkennen und diesen Link nur diesen Benutzern anzeigen, da er für andere Benutzer nicht funktioniert.
Schritt 4
Als Nächstes fügen Sie JS hinzu, um die Overlay-Sichtbarkeit umzuschalten
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Hinweis zu Größen
Ich verwende eine Größe, da jeder Browser das Bild nach Bedarf verkleinert. Ich könnte mehr HTML hinzufügen, um bei Bedarf mehrere Größen für Benutzer mit geringerer Bandbreite anzugeben, aber ich komprimiere die PNG-Dateien bereits stark mit TinyPNG und finde dies für meine Zwecke unnötig. Auch nach philippe_b ‚s Antwort Chrome und Firefox haben Fehler , die den Browser laden alle Größen von Symbolen führen. Aus diesem Grund ist die Verwendung eines großen Symbols möglicherweise besser als die Verwendung mehrerer kleinerer Symbole.
Weiterführende Literatur
Für diejenigen, die weitere Details wünschen, siehe die folgenden Links: