Favicon zur Website hinzufügen: WordPress, Wix, Squarespace und Shopify

Sie haben das Logo geändert, die Website veröffentlicht, und im Browser-Tab steht immer noch eine graue Weltkugel. Das Tab-Symbol ist eine eigene Datei, und die meisten Baukästen fragen in einer eigenen Einstellung danach.

Dieser Leitfaden begleitet ein illustratives Beispiel, die Kaffeerösterei Bean There, vom Logo bis zum Favicon, das im Browser-Tab, in den Lesezeichen, auf dem Startbildschirm eines Smartphones und neben der Website bei Google erscheint. Für jedes andere Logo sind die Schritte dieselben.

Kurz gesagt

• Ein Favicon entsteht aus dem Symbol Ihres Logos, nicht aus dem ganzen Logo mit Namen.
• Ein vollständiger Satz besteht aus wenigen Dateien: favicon.ico, favicon.svg, einem 180-Pixel-Symbol für das iPhone und zwei größeren PNGs für Android.
• Baukästen verlangen ein quadratisches Bild und erzeugen die kleinen Größen selbst.
• Bei einer selbst programmierten Website kommen die Dateien in den Stammordner und vier Zeilen in den <head>.
• Browser speichern alte Favicons lange im Cache. Prüfen Sie das Ergebnis deshalb in einem privaten Fenster.

Woraus ein Favicon entsteht

Im Browser-Tab bekommt das Favicon ein Quadrat von 16 Pixeln. In dieser Größe wird ein Firmenname zu einem grauen Fleck, deshalb besteht das Favicon nur aus dem Symbol: dem Bildzeichen, dem Monogramm oder dem ersten Buchstaben. Bean There hat ein B mit einer Kaffeebohne, und genau das kommt in den Tab.

Auch die quadratische Form zählt. Ein breites Symbol wird so lange verkleinert, bis es ins Quadrat passt, und wird dadurch noch kleiner. Ist Ihr Symbol breit, braucht das Favicon meist eine Fassung, die quadratisch zugeschnitten oder neu angeordnet ist.

Sehen Sie sich zuerst die 16-Pixel-Fassung an. Feine Linien verschwinden in dieser Größe, und zwei kleine Formen laufen ineinander. Beim Favicon von Bean There ist die Linie in der Bohne kräftig genug; eine Haarlinie wäre es nicht.

Welche Dateien ein vollständiges Favicon braucht

Jede Stelle, an der Ihr Symbol erscheint, sucht nach einer eigenen Datei:

• favicon.ico für Browser-Tab und Lesezeichen, auch in älteren Browsern und unter Windows. Eine Datei enthält die Fassungen mit 16, 32 und 48 Pixeln.
• favicon.svg, das moderne Browser in jeder Größe scharf darstellen.
• apple-touch-icon.png mit 180 × 180 Pixeln, das Symbol, das iPhone und iPad auf den Startbildschirm legen, wenn jemand Ihre Website dort speichert.
• android-chrome-192x192.png und android-chrome-512x512.png mit einer kleinen Datei site.webmanifest, die auf beide verweist, für dieselbe Aufgabe unter Android.
• Eine maskierbare Fassung mit 512 Pixeln und mehr Abstand um das Symbol, weil Android Symbole zu Kreisen und abgerundeten Quadraten zuschneidet.

Google zeigt Ihr Symbol außerdem neben Ihren Seiten in den Suchergebnissen. Die Dokumentation verlangt ein quadratisches Bild von mindestens 8 × 8 Pixeln, empfiehlt eines über 48 × 48 und nennt SVG nicht unter den unterstützten Formaten. Deshalb muss die .ico-Datei oder ein PNG auf der Website liegen, auch wenn das SVG im Browser perfekt aussieht.

Sie müssen diese Dateien nicht von Hand erstellen. Geben Sie oben auf unserer Startseite Ihren Firmennamen ein, öffnen Sie das passende Logo im Editor und wählen Sie Favicon-Paket (ZIP): Es enthält alle oben genannten Dateien, das Manifest und die vier HTML-Zeilen. Favicon-Dateien aus Ihrem Logo erstellen, dann geht es hier mit Ihrer Plattform weiter.

Wo die Einstellung auf jeder Plattform liegt

WordPress

Ab WordPress 6.5 liegt die Einstellung unter Einstellungen › Allgemein › Website-Icon (in der englischen Oberfläche: Settings › General › Site Icon). WordPress verlangt ein quadratisches Bild von mindestens 512 × 512 Pixeln, laden Sie also android-chrome-512x512.png hoch und speichern Sie. Ältere Versionen haben dieselbe Einstellung unter Design › Customizer › Website-Informationen.

Wix

Wix erlaubt ein eigenes Favicon, sobald die Website einen Premium-Tarif und eine verbundene Domain hat. Die Einstellung liegt unter Einstellungen › Website-Einstellungen › Favicon. Laut Hilfe-Center muss das Bild quadratisch sein und eine Seitenlänge haben, die ein Vielfaches von 48 Pixeln ist, deshalb passt favicon-96x96.png.

Squarespace

Die Einstellung für das Browser-Symbol ist zwischen den Squarespace-Versionen umgezogen. Am schnellsten finden Sie sie, wenn Sie in den Einstellungen nach „favicon“ oder „browser icon“ suchen. Laden Sie android-chrome-192x192.png hoch.

Shopify

Öffnen Sie Onlineshop › Themes › Anpassen › Theme-Einstellungen. Je nach Theme steht das Favicon unter Logo oder unter Favicon. Shopify verkleinert das Bild selbst, favicon-96x96.png ist eine bequeme Größe dafür. Veröffentlichen Sie das Theme anschließend: Eine Änderung an einem nicht veröffentlichten Theme erreicht den Live-Shop nicht.

Eine selbst programmierte Website

Laden Sie alle Dateien aus dem Paket in den Stammordner der Website, also den Ordner mit Ihrer Startseite. Fügen Sie dann diese Zeilen auf jeder Seite in den <head> ein:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Die .ico-Zeile steht zuerst, für ältere Browser und für Google. Browser, die SVG lesen, nehmen die zweite Zeile.

Warum das alte Symbol noch da ist

Browser behalten Favicons viel länger als den Rest einer Seite. Erscheint das neue Symbol nicht, öffnen Sie die Website in einem privaten Fenster oder einem anderen Browser, bevor Sie etwas anderes ändern. Auf dem Smartphone entfernen Sie das gespeicherte Symbol vom Startbildschirm und fügen es neu hinzu.

Google aktualisiert das Symbol in den Ergebnissen, wenn die Startseite das nächste Mal gecrawlt wird, laut Dokumentation nach einigen Tagen bis einigen Wochen. Eine Indexierungsanfrage für die Startseite in der Search Console kann das beschleunigen.

Wenn Ihr Symbol bei 16 Pixeln nicht lesbar ist

Manche Logos wurden nie für ein Quadrat von 16 Pixeln gezeichnet: eine detaillierte Illustration, ein Symbol aus dünnen Linien oder ein reiner Schriftzug ohne Symbol. Verkleinern hilft da nicht. Sie brauchen eine eigens gezeichnete kleine Fassung mit weniger Details, kräftigeren Strichen und Formen, die auf dem Pixelraster sitzen, damit das Tab-Symbol noch erkennbar Ihres ist.

Diese kleine Fassung gehört zur Arbeit, wenn unsere Designer ein Logo zeichnen. Ist das Favicon das Teil, das nie richtig aussieht, zeichnen unsere Designer mit Ihnen ein individuelles Logo, samt Favicon und App-Symbol.

Checkliste vor der Veröffentlichung

• Das Favicon zeigt das Symbol, nicht das ganze Logo mit Namen
• Sie haben es bei 16 Pixeln angesehen, und es ist noch erkennbar
• favicon.ico, favicon.svg und apple-touch-icon.png liegen auf der Website
• Die Android-Symbole und site.webmanifest sind hochgeladen (bei selbst programmierten Websites)
• Sie haben das Ergebnis in einem privaten Fenster geprüft
• Sie haben die Indexierung der Startseite beantragt, falls Google noch das alte Symbol zeigt