wake-up-neo.net

Müssen Sie ein Link-Tag für favicon.ico hinzufügen?

Gibt es moderne Browser, die favicon.ico nicht automatisch erkennen? Gibt es einen Grund, das Link-Tag für favicon.ico hinzuzufügen?

<link rel="shortcut icon" href="/favicon.ico">

Ich vermute, dass es nur notwendig ist, es in das HTML-Dokument aufzunehmen, wenn Sie sich für GIF oder PNG entscheiden ...

141
user1087110

Zur Auswahl eines anderen Speicherorts oder Dateityps (z. B. PNG oder SVG ) für das Favicon:
Ein Grund kann sein, dass Sie das Symbol an einem bestimmten Ort haben möchten, vielleicht im Bilderordner oder ähnlichem. Zum Beispiel:

<link rel="icon" href="_/img/favicon.png">

Dieser andere Ort kann sogar eine CDN sein, genau wie SO scheint mit <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"> Zu tun zu haben.

Weitere Informationen zur Verwendung anderer Dateitypen wie PNG finden Sie unter diese Frage .

Für Cache-Busting Zwecke:
Fügen Sie dem Pfad eine Abfragezeichenfolge für Cache-Busting-Zwecke hinzu:

<link rel="icon" href="/favicon.ico?v=1.1"> 

Favicons sind sehr stark zwischengespeichert und dies ist eine großartige Möglichkeit, um eine Aktualisierung zu gewährleisten.


Fußnote zum Standardspeicherort:
Soweit die erste Frage: Alle modernen Browser würden ein Favicon an der Standardposition erkennen, also ist das nicht ein Grund, ein link zu verwenden. dafür.


Fußnote zu rel="icon":
Wie durch @ Semaninos Antwort angegeben, ist die Verwendung von rel="shortcut icon" Eine alte Technik, die in älteren Versionen von Internet Explorer erforderlich war, in den meisten Fällen jedoch durch die von more ersetzt werden kann korrekte rel="icon" Anweisung. Der Artikel @Semanino, auf dem dies basiert verweist ordnungsgemäß auf die entsprechende Spezifikation , die einen rel -Wert von shortcut anzeigt, ist keine gültige Option .

233
Jeroen

Bitte beachten Sie , dass sowohl die HTML5-Spezifikation von W3C als auch WhatWG standardisieren

<link rel="icon" href="/favicon.ico">

Beachten Sie den Wert des Attributs "rel"!

Der Wert shortcut icon für das rel-Attribut ist eine sehr alte Internet Explorer-spezifische Erweiterung und veraltet.

Verwenden Sie es daher nicht mehr und aktualisieren Sie Ihre Dateien, damit sie den Standards entsprechen und in allen Browsern korrekt angezeigt werden.

Vielleicht möchten Sie auch einen Blick auf diesen tollen Beitrag werfen: rel = "Verknüpfungssymbol" gilt als schädlich

51
Semanino
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />

Es hängt alles davon ab, welches Bildformat Sie verwenden möchten!
Wenn Sie ein Symbol Ihrer Website haben, ist es für UX viel besser!

10
xgqfrms

Wir können für alle Geräte mit plattformspezifischer Größe hinzufügen

<link rel="Apple-touch-icon" sizes="57x57" href="fav_icons/Apple-icon-57x57.png">
<link rel="Apple-touch-icon" sizes="60x60" href="fav_icons/Apple-icon-60x60.png">
<link rel="Apple-touch-icon" sizes="72x72" href="fav_icons/Apple-icon-72x72.png">
<link rel="Apple-touch-icon" sizes="76x76" href="fav_icons/Apple-icon-76x76.png">
<link rel="Apple-touch-icon" sizes="114x114" href="fav_icons/Apple-icon-114x114.png">
<link rel="Apple-touch-icon" sizes="120x120" href="fav_icons/Apple-icon-120x120.png">
<link rel="Apple-touch-icon" sizes="144x144" href="fav_icons/Apple-icon-144x144.png">
<link rel="Apple-touch-icon" sizes="152x152" href="fav_icons/Apple-icon-152x152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="fav_icons/Apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/Android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">
0
Abhilash

Die Quintessenz ist, dass nicht alle Browser wird tatsächlich nach Ihrer favicon.ico -Datei suchen. In einigen Browsern können Benutzer auswählen, ob das Fenster automatisch angezeigt werden soll oder nicht. Um sicherzustellen, dass es immer erscheint und angezeigt wird, müssen Sie es daher definieren.

0
animuson