Was ist die beste Vorgehensweise zum Erstellen eines Favicons auf einer Website?

103

Frage

  • Was ist die beste Vorgehensweise zum Erstellen eines Favicons auf einer Website?
  • und ist eine .ico- Datei mit 16x16- und 32x32-Bildern besser als eine .png- Datei mit nur 16x16?
  • Könnte die heute bevorzugte Methode nicht in einigermaßen alten Browsern funktionieren?

Methode 1

Das Ablegen einer Datei mit dem Namen favicon.icoim Hauptverzeichnis ist eine Möglichkeit. Der Browser fordert diese Datei immer an. Sie können dies in den Apache-Protokolldateien sehen.

Methode 2

HTML-Tag im <head>Abschnitt:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon Bytecode77
quelle

Antworten:

153

Es gibt verschiedene Möglichkeiten, ein Favicon zu erstellen. Der beste Weg für Sie hängt von verschiedenen Faktoren ab:

  • Die Zeit, die Sie für diese Aufgabe aufwenden können. Für viele Menschen ist dies "so schnell wie möglich".
  • Die Anstrengungen, zu denen Sie bereit sind. Zeichnen Sie beispielsweise ein 16x16-Symbol von Hand, um bessere Ergebnisse zu erzielen.
  • Bestimmte Einschränkungen, z. B. die Unterstützung eines bestimmten Browsers mit ungeraden Spezifikationen.

Erste Methode: Verwenden Sie einen Favicon-Generator

Wenn Sie die Arbeit gut und schnell erledigen möchten, können Sie einen Favicon-Generator verwenden . Dieser erstellt die Bilder und den HTML-Code für alle gängigen Desktop- und Handy-Browser. Vollständige Offenlegung: Ich bin der Autor dieser Website.

Vorteile einer solchen Lösung: Sie ist schnell und alle Kompatibilitätsaspekte wurden bereits für Sie berücksichtigt.

Zweite Methode: Erstellen Sie eine favicon.ico (nur Desktop-Browser)

Wie Sie vorschlagen, können Sie eine favicon.icoDatei erstellen , die 16 x 16- und 32 x 32-Bilder enthält (beachten Sie, dass Microsoft 16 x 16, 32 x 32 und 48 x 48 empfiehlt ).

Deklarieren Sie es dann in Ihrem HTML-Code:

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

Diese Methode funktioniert mit allen alten und neuen Desktop-Browsern. Die meisten mobilen Browser ignorieren das Favicon jedoch.

Zu Ihrem Vorschlag, die favicon.icoDatei im Stammverzeichnis abzulegen und nicht zu deklarieren: Vorsicht, obwohl diese Technik in den meisten Browsern funktioniert, ist sie nicht 100% zuverlässig. Zum Beispiel kann Windows Safari es nicht finden (zugegeben: Dieser Browser ist unter Windows irgendwie veraltet, aber Sie verstehen es). Diese Technik ist nützlich, wenn sie mit PNG-Symbolen kombiniert wird (für moderne Browser).

Dritte Methode: Erstellen Sie eine favicon.ico, ein PNG-Symbol und ein Apple Touch-Symbol (alle Browser)

In Ihrer Frage erwähnen Sie die mobilen Browser nicht. Die meisten von ihnen ignorieren die favicon.icoDatei. Obwohl Ihre Website möglicherweise Desktop-Browsern gewidmet ist, möchten Sie mobile Browser wahrscheinlich nicht ganz ignorieren.

Sie können eine gute Kompatibilität erreichen mit:

  • favicon.ico, siehe oben.
  • Ein 192x192 PNG-Symbol für Android Chrome
  • Ein 180x180 Apple Touch-Symbol (für iPhone 6 Plus; andere Geräte verkleinern es nach Bedarf).

Erkläre sie mit 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Dies ist nicht die ganze Geschichte, aber in den meisten Fällen gut genug.

philippe_b
quelle
9
Tatsächlich ist das immer noch häufig verwendete <link rel = "Verknüpfungssymbol" href = "/ path / to / icons / favicon.ico"> keine gültige Option. Es ist nicht einmal Standard und nur der IE unterstützt es. Ab IE 9 unterstützt IE die Standardmethode "Look at Root". Es ist also nicht eine Möglichkeit, alle Browser zu unterstützen, sondern nur eine Möglichkeit, IE <9 zu unterstützen. Verlassen Sie sich auf die (jetzt standardmäßige) Methode "Platz im Stammverzeichnis" oder fügen Sie, wenn Sie darauf bestehen, Folgendes hinzu: <link rel = "icon" href = "/ favicon.ico"> (Auch wenn dies nicht Standard ist)
HappyMe
7
Der Favicon-Mechanismus hat sich im Laufe der Jahre definitiv weiterentwickelt. Ich habe heute bemerkt, dass die Spezifikation bei MDN jetzt sagt: Der Verknüpfungstyp wird oft vor dem Symbol angezeigt, aber dieser Verknüpfungstyp ist nicht konform, wird ignoriert und Webautoren dürfen ihn nicht mehr verwenden. Bedeutung Verwendung <link ref="icon" ...>statt <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Vielen Dank an @ broc.seib für das Feedback. Zum Zeitpunkt des Schreibens dieses Kommentars habe ich den Überblick verloren, warum es sich um ein "Verknüpfungssymbol" und nicht um ein "Symbol" handelt. Sicher, Mozilla hat seine Stimme in dieser Geschichte. Wir dürfen jedoch nicht vergessen, warum diese Erklärung überhaupt hier ist: Zur Unterstützung älterer Browser wie IE 8. Die neuesten Browser verwenden PNG-Symbole, die sauberer und leichter als ICO sind. Mein Plan für RealFavicon ist es, diese Erklärung vollständig zu entfernen. Vorher muss ich Tests auf IE 7, 8 und 9 ausführen.
philippe_b
Ganz zu schweigen davon, dass, wenn Sie auf dieser Seite "Quelle anzeigen", auf "Stapelüberlauf" ref="shortcut icon"genau das ist, was sie verwenden.
Steven Ventimiglia
1
@laggingreflex /favicon.icoist die bevorzugte Methode. Das bekommen Sie beim Besuch www.google.com. Möglicherweise möchten Sie Ihr Stammverzeichnis jedoch nicht mit einem Symbol verschmutzen. In diesem Fall funktioniert das Markup einwandfrei.
philippe_b
2
  1. Sie können mit dieser Website arbeiten, um favin.ico zu generieren
  2. Ich empfehle die Verwendung des .ico-Formats, da das PNG nicht mit Methode 1 funktioniert und ico detaillierter sein könnte!
  3. Beide Methoden funktionieren mit allen Browsern, aber wenn es automatisch funktioniert, was möchten Sie einen Code dafür eingeben? Ich denke also, Methode 1 ist besser.
a828h
quelle
2

Ich habe https://iconifier.net verwendet. Ich habe mein Bild hochgeladen, die Zip-Datei für Bilder heruntergeladen, Bilder zu meinem Server hinzugefügt, den Anweisungen auf der Website gefolgt, einschließlich des Hinzufügens der Links zu meiner index.html, und es hat funktioniert. Mein Favicon wird jetzt auf meinem iPhone in Safari angezeigt, wenn "Zum Startbildschirm hinzufügen".

Hblegg
quelle