Was ist derzeit der beste Weg, um ein Favicon in allen Browsern anzuzeigen, die Favicons unterstützen?

83

Was ist derzeit der beste Weg, um ein Favicon in allen Browsern anzuzeigen, die es derzeit unterstützen?

Bitte beziehe ... mit ein:

  1. Welche Bildformate werden von welchen Browsern unterstützt?

  2. Welche Zeilen werden an welchen Stellen für die verschiedenen Browser benötigt?

html standards favicon Fred
quelle
1
Es könnte sich auch lohnen, auch hier die "Favoriten" für das iPhone aufzunehmen. Dies ist der Fall, wenn der Benutzer Ihre Website zu seinem Startbildschirm hinzufügt. Der in diesem Fall verwendete Code lautet wie folgt: <link rel = "apple-touch-icon" href = "touch.png" /> Die Abmessungen sollten 57 x 57 Pixel betragen. Alternativ können Sie das Link-Tag weglassen und einfach eine Datei mit dem Namen "apple-touch-icon.png" in das Stammverzeichnis Ihrer Website einfügen.
anders
Wenn
Zach Lysobey
Beachten Sie, dass Sie größere Symbole für iPad- und Retina-iPhone-Displays benötigen. Siehe Apples Richtlinien: developer.apple.com/library/IOs/#documentation/…
Mike Ottum

Antworten:

108

Ich gehe hier auf einen Gürtel und eine Zahnspange zu.

Ich erstelle ein 32x32 icon In den beiden .icound .pngFormate bezeichnet favicon.icound favicon.png. Der Symbolname spielt keine Rolle, es sei denn, Sie haben es mit älteren Browsern zu tun.

  1. Platzieren Sie es favicon.icoan Ihrem Site-Stammverzeichnis, um die älteren Browser zu unterstützen (optional und nur für ältere Browser relevant).
  2. Platziere favicon.png in meinem Bilder-Unterverzeichnis (nur um Ordnung zu schaffen).
  3. Fügen Sie dem <head>Element den folgenden HTML-Code hinzu .
<link rel = "icon" href = "/ images / favicon.png" type = "image / png" />
<link rel = "Verknüpfungssymbol" href = "/ favicon.ico" />

Bitte beachte, dass:

  • Der MIME-Typ für .icoDateien wurde von der IANA als image / vnd.microsoft.icon registriert .
  • Internet Explorer ignoriert das typeAttribut für die Verknüpfungssymbolbeziehung. Dies ist der einzige Browser, der diese Beziehung unterstützt. Er muss nicht angegeben werden.

Referenz

Brian Matthews
quelle
2
OK, ich habe einen Tag, an dem Microsoft mir auf die Nerven geht. Ich kann dies in Internet Explorer nicht zum Laufen bringen, obwohl das Favicon für die Stackoverflow-Site angezeigt wird. Gibt es andere Einstellungen, die dies beeinflussen, wie z. B. doctype?
Belugabob
1
Zu Ihrer Information: Ich habe die Antwort gefunden. Wenn Sie über localhost: 8080 / index.html auf die Site verweisen , funktioniert dies nicht. Wenn Sie den tatsächlichen Namen des Computers ( machineName: 8080 / index.html ) verwenden, funktioniert alles wie erwartet. Ich kann dieses Verhalten nicht einmal verstehen - will es jemand versuchen?
Belugabob
2
Update - Das Verhalten wird dadurch verursacht, dass der Browser das Symbol zwischenspeichert. Durch das Löschen der temporären Internetdateien wird dies behoben, wenn Sie glücklich sind, Ihren Cache zu verlieren.
Belugabob
2
Wäre es ordentlicher, die IE-Version des Links in einen IE-bedingten Kommentar einzufügen?
EoghanM
9
32x32 ?? Ist 16x16 nicht die Norm?
Eduardo Molteni
10

Ich verwende das .ico-Format und füge die folgenden zwei Zeilen in das <head>Element ein:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
John Topley
quelle
6

Um auch Touch-Symbole für Tablets und Smartphones zu unterstützen, bevorzuge ich den Ansatz von HTML5Boilerplate

Weitere Informationen zu Touch-Symbolen finden Sie in diesem Artikel .

Mit dem aktuellen Status der Browserunterstützung müssen Sie nicht einmal das 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 im HTML-Code keine Symbole angegeben sind, durchsucht iOS Safari das Stammverzeichnis der Website nach Symbolen mit dem Präfix "Apple-Touch-Icon" oder "Apple-Touch-Icon". Wenn die entsprechende Symbolgröße für das Gerät beispielsweise 57 × 57 Pixel beträgt, sucht iOS in der folgenden Reihenfolge nach Dateinamen:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Mein Rat ist, kein Favicon in Ihr Dokument aufzunehmen, sondern eine Liste der Dateien auf der Root-Website bereit zu halten:

  • 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 von html5boilerplate.com herunterladen, sind diese alle enthalten. Sie müssen sie nur durch Ihre eigenen Symbole ersetzen.

Willem de Wit
quelle
Der erste Link ist veraltet und muss jetzt zu github.com/h5bp/html5-boilerplate/blob/master/src/doc/… gehen . Ich würde mich selbst bearbeiten, aber es sind nicht genug Zeichen geändert: / Danke für deine Antwort!
Brendan
4

IE6 kann PNGs nicht korrekt verarbeiten, seien Sie gewarnt.

nimish
quelle
3

Favicon muss eine ICO-Datei sein , damit es in allen Browsern ordnungsgemäß funktioniert.

Moderne Browser unterstützen auch PNG- und GIF-Bilder.

Ich habe festgestellt, dass der einfachste Weg, einen zu erstellen, im Allgemeinen darin besteht, einen frei verfügbaren Webdienst wie favicon.cc zu verwenden .

Antti Kissaniemi
quelle
3

Es gibt auch eine Site, auf der Sie überprüfen können, wie das Favicon einer Seite erstellt wird

getfavicon.org

Dort sehen Sie ein Tutorial über das Erstellen von Favoriten, Bildtypen und Auflösungen. Es ist schön!


quelle
Nicht mehr betriebsbereit.
Roman Starkov
2

Ein favicon.*in Ihrem Stammverzeichnis zu haben, wird von den meisten Browsern automatisch erkannt. Sie können sicherstellen, dass es erkannt wird, indem Sie:

 <link rel="icon" type="image/png" href="/path/image.png" />

Persönlich verwende ich .png-Bilder, aber die meisten Formate sollten funktionieren.

Ross
quelle
Nein, es ist kein "Favicon. *", Nur sehr wenige Formate funktionieren: ico, png, gif, jpeg und SVG. Siehe en.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo