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