Was ist derzeit der beste Weg, um ein Favicon in allen Browsern anzuzeigen, die Favicons unterstützen?
https://stackoverflow.com/questions/37073
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Was ist derzeit der beste Weg, um ein Favicon in allen Browsern anzuzeigen, die es derzeit unterstützen?
Bitte beziehe ... mit ein:
Welche Bildformate werden von welchen Browsern unterstützt?
Welche Zeilen werden an welchen Stellen für die verschiedenen Browser benötigt?
Lösung
Ich wähle hier einen Gürtel-und-Hosenträger-Ansatz.
Ich erstelle in beiden ein 32x32-Symbol .ico Und .png Formate genannt favicon.ico Und favicon.png.Der Symbolname spielt keine Rolle, es sei denn, Sie arbeiten mit älteren Browsern.
- Ort
favicon.icoim Stammverzeichnis Ihrer Website, um die älteren Browser zu unterstützen (optional und nur für ältere Browser relevant). - Platzieren Sie favicon.png in meinem Unterverzeichnis „Bilder“ (nur um Ordnung zu schaffen).
- Fügen Sie den folgenden HTML-Code hinzu
<head>Element.
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/favicon.ico" />
Bitte beachte, dass:
- Der MIME-Typ für
.icoDateien wurden von der als image/vnd.microsoft.icon registriert IANA. - Internet Explorer ignoriert das
typeDa es sich um ein Attribut für die Verknüpfungssymbolbeziehung handelt und dies der einzige Browser ist, der diese Beziehung unterstützt, muss es nicht angegeben werden.
Andere Tipps
Ich verwende das .ico-Format und füge die folgenden zwei Zeilen ein <head> Element:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Um auch Touch-Icons für Tablets und Smartphones zu unterstützen, bevorzuge ich den Ansatz von HTML5Boilerplate
Weitere Informationen zu Touch-Symbolen finden Sie in Dieser Artikel.
Mit dem aktuellen Status der Browserunterstützung müssen Sie nicht einmal den HTML-Tag für das Favicon in Ihrem Dokument hinzufügen.Die Browser durchsuchen automatisch eine Liste von Dateien, siehe dieses Beispiel für iOS:
Wenn in der HTML keine Symbole angegeben sind, sucht iOS Safari das Root-Verzeichnis der Website nach Icons mit Apple-Touch-Icon oder Apple-Touch-ICON-vorgefertigten Präfix.Wenn beispielsweise die entsprechende Symbolgröße für das Gerät 57 × 57 Pixel beträgt, sucht iOS in der folgenden Reihenfolge nach Dateinamen:
- apple-touch-icon-57x57-precomposed.png
- Apple-Touch-Icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
Mein Rat ist, kein Favicon in Ihr Dokument einzufügen, sondern eine Liste der Dateien auf der Stammwebsite bereitzuhalten:
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
Wenn Sie eine Vorlage herunterladen von html5boilerplate.com Diese sind alle enthalten, Sie müssen sie nur durch Ihre eigenen Symbole ersetzen.
IE6 kann PNGs nicht korrekt verarbeiten, seien Sie gewarnt.
Favicon muss ein sein .ico-Datei damit es in allen Browsern ordnungsgemäß funktioniert.
Moderne Browser unterstützen auch PNG- und GIF-Bilder.
Ich habe herausgefunden, dass es im Allgemeinen am einfachsten ist, einen solchen zu erstellen, indem man einen frei verfügbaren Webdienst nutzt, z. B favicon.cc.
Es gibt auch eine Website, auf der Sie überprüfen können, wie das Favicon einer Seite erstellt wird
Dort können Sie sich ein Tutorial zum Erstellen von Favoriten, Bildtypen und Auflösungen ansehen, es ist schön!
Ein ... haben favicon.* in Ihrem Stammverzeichnis wird von den meisten Browsern automatisch erkannt.Sie können sicherstellen, dass es erkannt wird, indem Sie Folgendes verwenden:
<link rel="icon" type="image/png" href="/path/image.png" />
Persönlich verwende ich PNG-Bilder, aber die meisten Formate sollten funktionieren.
