HTML 5 Favicon - Unterstützung?

Ich habe die Favicon-Seite auf Wikipedia gelesen. Sie erwähnen die HTML 5-Spezifikation für Favicon:

In der aktuellen HTML5-Spezifikation wird empfohlen, Größensymbole in mehreren Größen mithilfe der Attribute rel = "icon" size = "durch Leerzeichen getrennte Liste der Symbolabmessungen" innerhalb eines Tags anzugeben. [ Quelle ] Mehrere Symbolformate, einschließlich Containerformate wie Microsoft .ico- und Macintosh .icns-Dateien sowie skalierbare Vektorgrafiken, können bereitgestellt werden, indem der Inhaltstyp des Symbols in Form von type = "file content-type" in das Feld eingefügt wird Etikett.

Mit Blick auf den zitierten Artikel (W3) zeigen sie dieses Beispiel:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Meine Frage ist, ob Browser die HTML 5-Methode unterstützen.

Hinweis: Ich weiß, dass Apple die apple-touch-iconMeta-Tag-Methode gegenüber der HTML5-Methode verwendet.

Der Wikipedia-Artikel behauptet:

Der Google Chrome-Webbrowser wählt jedoch die am besten passende Größe aus den in den HTML-Headern angegebenen Größen aus, um Anwendungssymbole mit 128 × 128 Pixel zu erstellen, wenn der Benutzer im Menü "Extras" die Option "Verknüpfungen zum Erstellen von Anwendungen ..." auswählt.

Wie gehen Internet Explorer (v9 bis v11) und Firefox damit um? Und stimmt der Artikel darin, wie Chrome mit den HTML-Favicons umgeht? (Es gibt keine Quelle für Chrome, die dies bestätigt.)

Bei der Suche konnte ich keine anderen (glaubwürdigen) Informationen zu HTML 5 Favicon als den Wikipedia-Artikel finden.

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:

• Wikipedia Artikel über Favicons
• Das Icon-Handbuch
• Verstehe das Favicon von Jonathan T. Neal
• rel = "Verknüpfungssymbol", das von Mathias Bynens als schädlich eingestuft wird
• Alles, was Sie schon immer über Touch-Symbole von Mathias Bynens wissen wollten

Nein, nicht alle Browser unterstützen das sizesAttribut:

• Safari: Ja, es wird das Bild ausgewählt, das am besten passt .
• Opera: Ja, es wird das Bild ausgewählt, das am besten passt .
• IE11: Nicht sicher. Es nimmt anscheinend das größere Bild auf, das es findet , was ein bisschen grob ist, aber okay.
• Chrome: Nein, siehe Fehler 112941 und 324820 . Tatsächlich lädt Chrome in der Regel alle deklarierten Symbole, nicht nur die besten / ersten / letzten.
• Firefox: Nein, siehe Fehler 751712 . Wie Chrome neigt Firefox dazu, alle deklarierten Symbole zu laden .

Beachten Sie, dass einige Plattformen bestimmte Größen definieren:

• Android Chrome erwartet ein 192x192-Symbol , bevorzugt jedoch die in deklarierten Symbole, manifest.jsonwenn es vorhanden ist. Außerdem verwendet Chrome das Apple Touch-Symbol für Lesezeichen .
• Coast by Opera erwartet ein 228x228-Symbol .
• Google TV erwartet ein 96x96-Symbol .