Die Antworten (zum Zeitpunkt dieses Beitrags) sind Link-Only-Antworten, so dass ich dachte, ich würde die Links in eine Antwort zusammenfassen und was ich verwenden werde.
Bei der Erstellung von Cross Browser Favicons (einschließlich Touch-Icons) müssen einige Dinge berücksichtigt werden.
Die erste (natürlich) ist Internet Explorer. IE nicht unterstützt PNG favicons bis Version 11.e Unsere erste Linie ein bedingter Kommentar für Favicons in IE 9 ist und unten:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
die Verwendungen des Symbols erstellen Sie es auf 32x32 Pixel abzudecken. Beachten Sie die rel="shortcut icon" für IE das Symbol zu erkennen, es benötigt das Wort shortcut, die nicht Standard ist. Außerdem wickeln wir das Favicon .ico in einen IE-bedingten Kommentar ein, da Chrome und Safari die Datei .ico verwenden werden, wenn sie vorhanden ist, obwohl andere Optionen verfügbar sind, was wir nicht möchten.
Das obige deckt IE bis zu IE 9 ab. IE 11 akzeptiert PNG Favicons, IE 10 jedoch nicht. Auch IE 10 liest keine bedingten Kommentare, daher zeigt IE 10 kein Favicon. Da IE 11 und Edge verfügbar sind, wird IE 10 nicht häufig verwendet. Daher ignoriere ich diesen Browser.
Für den Rest des Browser wir die Standardmethode verwenden wollen ein Favicon zu zitieren:
<link rel="icon" href="path/to/favicon.png">
Dieses Symbol sollte 196x196 Pixel groß sein, um alle Geräte abdecken, die dieses Symbol verwenden.
zu berühren Symbole auf mobilen Geräten decken wir Apples proprietäre Art und Weise zu verwenden, werden ein Touch-Symbol zu zitieren:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Mit rel="apple-touch-icon-precomposed" den reflektierenden Glanz nicht gelten, wenn auf iOS vorgemerkt. Um iOS verwenden zu können, verwenden Sie den Glanz rel="apple-touch-icon". Dieses Symbol sollte eine Größe von 180x180 Pixeln haben, da dies die aktuelle Größe ist, die von Apple für die neuesten iPhones und iPads empfohlen wird. Ich habe gelesen, Blackberry wird auch rel="apple-touch-icon-precomposed" verwenden.
Als Hinweis: Chrome für Android heißt es:
Der Apfel-Touch- * sind veraltet und werden nur für kurze Zeit unterstützt werden. (Geschrieben ab Beta für M31 von Chrome).
Custom Tiles für IE 11+ auf Windows 8.1+
IE 11+ auf Windows 8.1+ nicht bieten eine Möglichkeit gemerkte Fliesen für Ihre Website zu erstellen.
Microsoft empfiehlt ein paar Fliesen in der folgenden Größe zu erstellen:
Klein: 128 x 128
Medium: 270 x 270
Breite: 558 x 270
Groß: 558 x 558
Diese sollten tr sein ansparent Bilder, wie wir einen Farbhintergrund als nächstes definieren werden.
Sobald diese Bilder erstellt werden, sollten Sie eine XML-Datei browserconfig.xml mit dem folgenden Code genannt 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 Diese XML-Datei in dem Stammverzeichnis Ihrer Website. Wenn eine Site gepinnt ist, sucht IE nach dieser Datei. Wenn Sie die XML-Datei etwas anderes oder haben sie an einem anderen Ort hinzufügen, um diesen Meta-Tag zum head nennen wollen:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Für weitere Informationen über IE 11+ individuelle Fliesen und mit Hilfe der XML-Datei visit Microsoft's website.
es Putting alles zusammen:
es um alle zusammen den obigen Code würde wie folgt 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 Tiles
Wenn ein Benutzer Mit einem Windows Phone können sie eine Website an den Startbildschirm ihres Telefons anheften. Wenn sie dies tun, zeigt sie leider einen Screenshot Ihres Telefons an, kein Favicon (nicht einmal der oben erwähnte MS-spezifische Code). Um Ihre Website eine „Live Tile“ für Windows Phone Nutzer zu machen muss man den folgenden Code verwenden:
Here are detailed instructions from Microsoft aber hier ist eine Zusammenfassung:
Schritt 1
ein quadratisches Bild erstellen für Ihre Website, um Hi-Res-Bildschirme zu unterstützen, erstellen Sie es mit 768x768 Pixel Größe.
Schritt 2
eine versteckte Overlay dieses Bildes hinzufügen. Es folgt 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 thew Linie nach einem Stift hinzufügen zu starten Link:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft empfiehlt, dass Sie Fenster erkennen Telefon und zeigen Sie nur diesen Link zu diesen Benutzern, da es für andere Benutzer nicht funktioniert.
Schritt 4
Weiter Sie einige JS hinzufügen die Overlay-Sichtbarkeit
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Hinweis auf Größen wechseln
ich eine Größe bin mit wie jeder Browser nach unten skaliert die Bild wie nötig. Ich könnte mehr HTML hinzufügen, um mehrere Größen zu spezifizieren, wenn gewünscht für diejenigen mit einer niedrigeren Bandbreite, aber ich komprimiere bereits die PNG-Dateien stark mit TinyPNG und ich finde das für meine Zwecke unnötig. Nach philippe_b 's answer Chrome und Firefox haben Fehler, die den Browser laden alle Größen von Symbolen verursachen. Die Verwendung eines großen Symbols ist daher möglicherweise besser als mehrere kleinere Symbole.
Weiterführende Literatur
Für diejenigen, die mehr Details möchten sehen Sie die Links unten:
Etwas scheint seltsam im Code oben - erlaubt HTML5 nicht Attributwerte zu zitieren? Antwort - https://stackoverflow.com/questions/6495310/do-you-quote-html5-attributes – Jakub