Ein zuverlässiges HTML-Favicon entsteht nicht durch einen einzelnen magischen Tag. Es benötigt wenige erreichbare Dateien und Verweise im head. Dieses Vorgehen deckt moderne Tabs, ältere Programme und mobile Verknüpfungen ab, ohne zahlreiche historische Varianten einzuführen.
Dateien vorbereiten
Beginne mit einem quadratischen Symbol, das auch sehr klein erkennbar bleibt. Lege favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest und die im Manifest referenzierten PNG-Dateien im öffentlichen Ordner ab, der am Stammverzeichnis der Domain ausgeliefert wird.
Ein Pfad wie /favicon.svg beginnt am Stammverzeichnis der Domain. Er bleibt deshalb auch unter /products oder /blog/article korrekt. favicon.svg kann dagegen relativ zur aktuellen Seite aufgelöst werden.
Elemente in den head einfügen
Gib zuerst das SVG mit rel icon und type image/svg+xml an, danach die ICO mit rel icon und sizes any. Ergänze rel apple-touch-icon für iOS und rel manifest für die Installation als Web-App.
Der Typ muss zur tatsächlich ausgelieferten Datei passen. Benenne kein PNG in .ico um: Inhalt und Header müssen dem ICO-Format entsprechen.
| Zweck | Beziehung | Datei |
|---|---|---|
| Moderner Browser | icon | /favicon.svg |
| Kompatibilität | icon | /favicon.ico |
| iOS-Startbildschirm | apple-touch-icon | /apple-touch-icon.png |
| Web-App | manifest | /site.webmanifest |
Veröffentlichen, ohne Pfade zu beschädigen
Öffne nach der Veröffentlichung jede Datei-URL direkt. Die Antwort muss ein Bild oder Manifest mit erfolgreichem Status liefern, keine Anmelde- oder 404-HTML-Seite mit irreführendem Statuscode.
Liegt die Website in einem Unterverzeichnis, passe die Pfade oder öffentliche Basis an. Prüfe die fertige Seite in den Entwicklerwerkzeugen: Der Browser sollte die erwarteten URLs ohne Umleitung auf einen anderen Host anfordern.
Ergebnis überprüfen
Lade die Seite mit deaktiviertem Cache neu und prüfe die link-Elemente im erzeugten DOM. Teste anschließend einen Tab, ein Lesezeichen und gegebenenfalls das Hinzufügen zum Startbildschirm eines echten Geräts.
Ein Favicon in Suchergebnissen unterliegt zusätzlich den Regeln und dem Crawl-Zeitplan der Suchmaschine. Ein sichtbares Symbol im Browser garantiert deshalb keine sofortige Aktualisierung in Suchergebnissen.
Primärquellen
Häufige Fragen
Gehört das Favicon-Element in den body?
Nein. Die link-Elemente für Symbole und Manifest gehören in den head des Dokuments.
Reicht eine favicon.ico im Stammverzeichnis?
Sie ist ein nützlicher Rückfall, beschreibt aber weder ein Apple Touch Icon noch installierbare Manifest-Symbole. Binde die Formate für diese Zwecke gesondert ein.
Warum einen Pfad verwenden, der mit / beginnt?
Er beginnt am Stammverzeichnis der Domain und verhindert, dass eine verschachtelte Seite im eigenen Ordner nach der Datei sucht.