Muss ein Link-Tag für favicon.ico hinzugefügt werden?

153

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 ...

html favicon html-head user1087110
quelle
Ich habe noch nie gesehen, dass ein Browser es gebraucht hat. Hast du irgendwelche Beispiele?
Shark555
Ich kann einige Browser mit Voreinstellungen benennen, nach denen favicon.icoautomatisch gesucht werden soll oder nicht . Wenn Sie also sicherstellen möchten, dass Ihr Symbol angezeigt wird, fügen Sie besser einen Link in Ihr HTML ein. Übrigens sind PNG-Dateien normalerweise kleiner als vergleichbare ICO-Dateien.
Herr Lister
Bitte nennen Sie einige Mr Lister :) Nein shark555, ich kann keine nennen ...
user1087110
5
Firefox (und andere Gecko-basierte Browser wie SeaMonkey) verfügen über verschiedene Einstellungen, um das Verhalten zu optimieren. browser.chrome.faviconsWenn der Wert auf true gesetzt ist, wird im Stammverzeichnis nach favicon.ico gesucht. Wenn false, werden nur Symbole geladen, wenn dies auf der HTML-Seite angegeben ist. Siehe kb.mozillazine.org/Browser.chrome.favicons und verwandte Seiten.
Herr Lister
Mögliches Duplikat von Müssen Sie <link rel = "icon" href = "favicon.ico" type = "image / x-icon" /> einschließen?
Dan Dascalescu

Antworten:

253

So wählen Sie einen anderen Speicherort oder Dateityp (z. B. PNG oder SVG ) für das Favicon aus:
Ein Grund kann sein, dass Sie das Symbol an einem bestimmten Speicherort haben möchten, möglicherweise im Bilderordner oder ähnlichem. Beispielsweise:

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

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

Weitere Informationen zur Verwendung anderer Dateitypen wie PNG finden Sie in dieser 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 werden sehr stark zwischengespeichert und dies ist eine großartige Möglichkeit, um eine Aktualisierung sicherzustellen.

Fußnote zum Standardspeicherort:
Was den ersten Teil der Frage betrifft: Alle modernen Browser würden ein Favicon am Standardspeicherort erkennen, daher ist dies kein Grund, ein dafür zu verwenden link.

Fußnote zu rel="icon":
Wie in der Antwort von @ Semanino angegeben , ist die Verwendung rel="shortcut icon"eine alte Technik, die von älteren Versionen von Internet Explorer benötigt wurde, aber in den meisten Fällen durch die korrektere rel="icon"Anweisung ersetzt werden kann. Der Artikel @Semanino basiert auf korrekten Links zu der entsprechenden Spezifikation, die anzeigt, dass der relWert von shortcutkeine gültige Option ist.

Jeroen
quelle
Sollte dies in den <head>Tag gehen?
Max Williams
1
@ MaxWilliams Ja. (Siehe "Zulässige übergeordnete Elemente" in den MDN-Dokumenten oder "Kontexte" in der W3-Spezifikation. )
Jeroen
1
Es ist 2016 - und Chrome erkennt immer noch (oder wieder?) Die Standardeinstellung favicon.ico im Stammverzeichnis nicht, wenn Sie auch andere Symbole angeben ...
Sebastian G. Marinescu
52

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

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

Beachten Sie den Wert des Attributs "rel"!

Der Wert shortcut iconfür das relAttribut ist eine sehr alte Internet Explorer-spezifische Erweiterung und veraltet .

Bitte verwenden Sie es 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 großartigen Beitrag werfen: rel = "Verknüpfungssymbol", das als schädlich eingestuft wird

Semanino
quelle
1
Nicht ganz "veraltet" (es war nie Teil einer Spezifikation). In der HTML5-Spezifikation heißt es jedoch: "Aus historischen Gründen kann dem Symbolschlüsselwort das Schlüsselwort" Verknüpfung "vorangestellt werden. Wenn das Schlüsselwort" Verknüpfung "vorhanden ist, muss es unmittelbar vor dem Symbolschlüsselwort stehen und die beiden Schlüsselwörter müssen getrennt werden durch nur ein einziges U + 0020 SPACE-Zeichen. " Beachten Sie außerdem Folgendes: "Es gibt keinen Standardtyp für Ressourcen, die durch das Symbolschlüsselwort angegeben werden."
DocRoot
12 
<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" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

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!

Demo

Logo auf der Registerkarte Browser anzeigen

Geben Sie hier die Bildbeschreibung ein

xgqfrms
quelle
iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon links:
xgqfrms
UX hat damit nichts zu tun.
Paddotk
@paddotk Ich meine, dass der Benutzer leicht erkennen kann, welcher Tab zur Zielwebsite gehört, wenn er mehrere Registerkarten im Browser öffnet, wenn auf der Registerkarte ein Favicon-Symbol angezeigt wird.
xgqfrms
1

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">
Abhilash
quelle
0

Unterm Strich ist nicht alle Browser wird tatsächlich für Ihre aussehen favicon.ico - Datei. In einigen Browsern können Benutzer auswählen, ob es automatisch aussehen soll oder nicht. Um sicherzustellen, dass es immer angezeigt und angezeigt wird, müssen Sie es daher definieren.

animuson
quelle
6
Vielen Dank für Ihren Kommentar animuson. Können Sie einige Browser nennen, die nicht automatisch aussehen?
user1087110
11
@ user1087110: Ich kenne keine aus dem Kopf und ehrlich, wen interessiert das? Der Punkt ist, dass Sie nicht davon ausgehen können, dass dies der Fall ist, und dass Sie diejenigen berücksichtigen müssen, die dies nicht tun.
Animuson
Da dies nicht mehr relevant ist, können Sie Ihre Antwort löschen, um die Seite zu bereinigen.
Hühner