it-swarm.com.de

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 mit den Attributen rel = "icon" sizes = "durch Leerzeichen getrennte Liste der Symbolabmessungen" innerhalb eines Tags anzugeben. [ source ] Mehrere Symbolformate, einschließlich Containerformaten wie Microsoft .ico- und Macintosh .icns-Dateien sowie skalierbare Vektorgrafiken, können bereitgestellt werden, indem der Inhaltstyp des Symbols in Form von type = "angegeben wird. Dateiinhaltstyp "innerhalb des Tags.

Im zitierten Artikel (W3) sehen Sie folgendes 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 verwendet ihre Apple-touch-icon Meta-Tag-Methode über die HTML5-Methode.

Der Wikipedia-Artikel behauptet:

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

Wie gehen Internet Explorer (v9 bis v11) und Firefox damit um? Und ist der Artikel in der Art und Weise korrekt, wie Chrome behandelt die HTML-Favicons? (Es gibt keine Quelle für Chrome dies zu bestätigen.)

Bei der Suche konnte ich außer dem Wikipedia-Artikel keine (glaubwürdigen) Informationen zu HTML 5 Favicon finden.

162
L84

Die Antworten (zum Zeitpunkt dieses Beitrags) sind nur Link-Antworten, daher dachte ich, ich würde die Links in einer Antwort zusammenfassen und was ich verwenden werde.

Bei der Erstellung von Cross-Browser-Favoriten (einschließlich Touch-Symbolen) sind verschiedene Dinge zu beachten.

Der erste ist (natürlich) der Internet Explorer. IE unterstützt PNG-Favoriten erst ab Version 11. Unsere erste Zeile ist also ein bedingter Kommentar für Favoriten in IE= 9 und darunter:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Um die Verwendung des Symbols zu erläutern, erstellen Sie es mit 32 x 32 Pixel. Beachten Sie den rel="shortcut icon" Für IE=), um das Symbol zu erkennen, das das nicht standardmäßige Wort shortcut benötigt. Außerdem schließen wir das .ico - Favicon ein Ein IE bedingter Kommentar, da Chrome und Safari die .ico - Datei verwenden, wenn sie trotz anderer verfügbarer Optionen vorhanden ist, nicht das, was wir möchten mögen.

Das obige behandelt IE bis IE 9. IE 11 akzeptiert PNG-Favoriten, jedoch IE 10 nicht. Auch IE 10 liest keine bedingten Kommentare, daher IE 10 zeigt kein Favicon an. Mit IE 11 und Edge verfügbar IE 10 sind nicht weit verbreitet, 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 die proprietäre Methode von Apple, um ein Berührungssymbol zu zitieren:

<link rel="Apple-touch-icon-precomposed" href="Apple-touch-icon-precomposed.png">

Bei Verwendung von rel="Apple-touch-icon-precomposed" Wird der reflektierende Glanz nicht angewendet, wenn ein Lesezeichen für iOS erstellt wird. Um iOS zum Leuchten zu bringen, 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 von Apple für die neuesten iPhones und iPads empfohlen wird. Ich habe gelesen, dass Blackberry auch rel="Apple-touch-icon-precomposed" Verwenden wird.

Als Hinweis: Chrome für Android besagt:

Die Apple-touch- * sind veraltet und werden nur für kurze Zeit unterstützt. (Ab Beta für m31 von Chrome geschrieben).

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 sind, sollten Sie eine XML-Datei mit dem Namen browserconfig.xml Mit folgendem 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 Website. Wenn eine Site angeheftet ist IE sucht nach dieser Datei. Wenn Sie der XML-Datei einen anderen Namen geben möchten oder sie an einem anderen Ort haben möchten, fügen Sie dieses Meta-Tag zum head hinzu. :

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Weitere Informationen zu IE 11+ benutzerdefinierten Kacheln und Verwendung der XML-Datei besuchen Sie die Microsoft-Website .

Alles zusammen:

Um alles zusammenzufassen, würde der obige Code so 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 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 MS-spezifische Code, auf den oben verwiesen wurde). Um eine "Live-Kachel" für Windows Phone-Benutzer für Ihre Website zu erstellen, muss der folgende Code verwendet werden:

Hier sind detaillierte Anweisungen von Microsoft aber hier ist eine Übersicht:

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 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 der Verknüpfung hinzuzufügen:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft empfiehlt, dass Sie Windows Phone erkennen und nur diesen Link für diese Benutzer anzeigen, da dies für andere Benutzer nicht funktioniert.

Schritt 4

Als Nächstes fügen Sie JS hinzu, um die Sichtbarkeit der Überlagerung zu ändern

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Größenhinweis

Ich benutze eine Größe, da jeder Browser das Bild nach Bedarf verkleinert. Ich könnte mehr HTML hinzufügen, um mehrere Größen anzugeben, falls dies für diejenigen mit einer geringeren Bandbreite gewünscht wird, aber ich komprimiere die PNG-Dateien bereits stark mit TinyPNG und finde dies für meine Zwecke unnötig. Laut philippe_b 's answer Chrome) und Firefox gibt es auch Fehler, die dazu führen, dass der Browser alle Größen von Symbolen lädt Aus diesem Grund ist das Symbol möglicherweise besser als mehrere kleinere.

Weitere Lektüre

Für diejenigen, die mehr Details wünschen, siehe die folgenden Links:

316
L84

Nein, nicht alle Browser unterstützen das sizes Attribut:

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

16
philippe_b