So erstellen Sie ein Favicon
Die Größen, Formate und der Code für ein Favicon, das überall erscheint.
Das Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und neben Ihrer Website in Googles mobilen Suchergebnissen. Ein fehlendes Favicon lässt eine Website unfertig wirken, ein verschwommenes noch schlimmer. Ein gutes zu erstellen dauert nur ein paar Minuten.
Mit der richtigen Grafik anfangen
Ein Favicon wird so klein wie 16 mal 16 Pixel angezeigt, ein vollständiges Logo mit Schriftzug ist dann unlesbar. Nutzen Sie ein einfaches Zeichen: das Symbol aus Ihrem Logo, einen einzelnen Anfangsbuchstaben oder eine kräftige Form in Ihrer Markenfarbe. Testen Sie es, indem Sie es am Bildschirm auf ein Viertel verkleinern: Erkennen Sie es dann noch, funktioniert es.
Beginnen Sie mit einem quadratischen Bild von mindestens 512 mal 512 Pixeln, idealerweise ein PNG mit transparentem Hintergrund. Ist Ihr Logo nicht quadratisch, schneiden Sie es mit fixiertem Seitenverhältnis 1:1 quadratisch zu.
Die benötigten Dateien
| Datei | Größe | Verwendet von |
|---|---|---|
| favicon.ico | Enthält Versionen mit 16, 32 und 48 Pixeln | Browser, ältere Systeme, die Standardanfrage nach /favicon.ico |
| Ein PNG-Symbol | 32 mal 32 und 192 mal 192 | Moderne Browser, Android-Startbildschirme |
| apple-touch-icon.png | 180 mal 180 | Lesezeichen auf dem Startbildschirm von iPhone und iPad |
Auch die Google-Suche zeigt Ihr Favicon in den Ergebnissen. Es muss quadratisch sein, mindestens 48 mal 48 Pixel, und auf Ihrer Website crawlbar sein.
Die ICO-Datei erstellen
Legen Sie Ihr quadratisches PNG im PNG-in-ICO-Konverter ab. Er erzeugt eine echte .ico-Datei mit den kleinen Größen, die Browser anfordern. Für die PNG-Versionen skalieren Sie dasselbe quadratische Bild auf 180, 192 und 32 Pixel.
Einbinden auf der Website
Laden Sie favicon.ico ins Hauptverzeichnis Ihrer Website hoch, damit es unter ihreseite.de/favicon.ico erreichbar ist, und fügen Sie diese Zeilen in den head Ihrer Seiten ein:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
In WordPress gehen Sie zu Design, Customizer, Website-Informationen und laden ein quadratisches Bild als Website-Icon hoch; WordPress erstellt die Größen selbst. Shopify, Wix und Squarespace haben jeweils eine Favicon-Einstellung in den Website- oder Theme-Einstellungen.
Wenn das neue Favicon nicht erscheint
Browser cachen Favicons hartnäckig. Öffnen Sie die Website in einem privaten Fenster, oder rufen Sie ihreseite.de/favicon.ico direkt auf und laden Sie neu. Google kann Tage oder Wochen brauchen, bis das Symbol in den Suchergebnissen aktualisiert ist, nachdem die Startseite erneut gecrawlt wurde.
Häufige Fehler
- Das vollständige Logo mit kleinem Text verwenden, das bei 16 Pixeln zum Fleck wird.
- Ein weißes Symbol auf transparentem Hintergrund, das auf hellen Browser-Tabs verschwindet.
- Nur eine winzige 16-Pixel-Datei bereitstellen, die auf hochauflösenden Bildschirmen unscharf aussieht.
- Die Datei unter /favicon.ico vergessen, die manche Browser und Crawler anfordern, egal was die Seite angibt.