Webflow Favicon hinzufügen: Favicon und Webclip

Favicon und Webclip in Webflow hinzufügen: wo die Icons-Einstellung liegt, welche Größen Webflow erzeugt, wie du veröffentlichst und was bei Problemen hilft.

Häufige Fragen

Welche Größe sollte ein Webflow-Favicon haben?

Das Webflow-Hilfecenter nennt 32x32 Pixel für das Favicon und 256x256 Pixel für das Webclip. Im aktuellen Ablauf lädst du ein quadratisches Bild hoch, und Webflow erzeugt die übrigen Größen selbst. Starte also mit einer quadratischen Datei von mindestens 256x256 Pixeln, die auch verkleinert noch gut lesbar bleibt.

Wo lade ich in Webflow ein Favicon hoch?

Öffne die Site settings (Website-Einstellungen), wechsle zu General (Allgemein) und suche den Bereich Icons. Lade dein quadratisches Bild hoch, wähle aus, welche Icons aktualisiert werden sollen, übernimm die Änderung und veröffentliche anschließend die Website. Ältere Anleitungen nennen das Project settings, es ist aber derselbe Ort.

Was ist ein Webclip in Webflow?

Ein Webclip ist das größere Icon, das erscheint, wenn jemand deine Website auf dem Startbildschirm seines Smartphones oder als ähnliche Verknüpfung speichert. Webflow gibt dafür 256x256 Pixel an. Es ist getrennt vom kleinen Icon im Browser-Tab.

Warum wird mein Webflow-Favicon nach dem Hochladen nicht angezeigt?

Meist wurde die Website nach dem Hochladen nicht veröffentlicht, denn Icons ändern sich nur auf der veröffentlichten Website. Die zweithäufigste Ursache ist der Browser-Cache. Veröffentliche die Seite und prüfe sie in einem privaten Fenster oder einem anderen Browser, bevor du annimmst, dass der Upload fehlgeschlagen ist.

Unterstützt Webflow SVG- oder Dark-Mode-Favicons?

Laut den Update-Hinweisen von Webflow kannst du PNG, JPG, GIF, ICO oder SVG hochladen, und der Hilfeartikel nennt ein optionales Tab-Icon für den Dark Mode. Webflow wandelt SVG-Uploads außerdem für die Browserkompatibilität in PNG um. Teste das Ergebnis daher in den Browsern, die für dich wichtig sind.

Wie lange dauert es, bis Google mein neues Webflow-Favicon anzeigt?

Einen festen Zeitraum gibt es nicht. Google entscheidet selbst, wann es neu crawlt und das Icon in den Suchergebnissen aktualisiert. Berichte aus der Community sprechen von Tagen bis Wochen oder länger. Du kannst nur dafür sorgen, dass das Icon auf deiner veröffentlichten Website live ist.

Kurzantwort: Öffne in Webflow Site settings > General > Icons (Website-Einstellungen > Allgemein > Icons), lade ein quadratisches Bild hoch, wähle aus, welche Icons aktualisiert werden sollen (helles Favicon, optionales Dark-Mode-Favicon, Webclip), übernimm die Änderung und veröffentliche die Website. Webflow nennt 32x32 Pixel für das Favicon und 256x256 Pixel für das Webclip und erzeugt die übrigen Größen aus deinem Upload. Auf der Live-Website ändert sich nichts, bevor du veröffentlichst. (Stand: November 2026, geprüft anhand des Webflow-Hilfecenters und der Update-Hinweise.)

Was Webflow verlangt

Ältere Tutorials beschreiben zwei getrennte Upload-Felder, eines für ein 32x32-Favicon und eines für ein 256x256-Webclip. Der aktuelle Hilfeartikel von Webflow beschreibt einen einfacheren Ablauf: Du lädst ein einziges quadratisches Bild hoch, und Webflow übernimmt die Größenanpassung. Wofür welches Icon gedacht ist, zeigt die Tabelle.

Icon	Von Webflow genannte Größe	Wo es erscheint
Favicon (hell)	32x32	Browser-Tabs und Lesezeichen
Favicon (Dark Mode, optional)	32x32	Browser-Tabs, wenn der Browser im Dark Mode läuft
Webclip	256x256	Verknüpfungen auf dem Startbildschirm und ähnliche gespeicherte Links
Automatisch erzeugte Extras	48x48-Favicon, 180x180- und 192x192-Touch-Icons	Von Webflow aus deinem Upload erzeugt

Akzeptierte Upload-Formate laut den Update-Hinweisen von Webflow: PNG, JPG, GIF, ICO und SVG. SVG-Uploads werden für die Browserkompatibilität in PNG umgewandelt.

Mehr zu den Größen auf verschiedenen Plattformen findest du in unserem Leitfaden zu Favicon-Größen.

Bereite zuerst dein Bild vor

Ein Favicon wird im Tab nur etwa 16 bis 32 Pixel breit dargestellt. Die Qualität der Quelldatei ist deshalb wichtiger als die Einstellungen.

Quadratisch beginnen. Exportiere eine quadratische Arbeitsfläche mit mindestens 256x256 Pixeln, damit das Webclip nicht hochskaliert wird.
Vereinfachen. Nimm eine Bildmarke oder einen einzelnen Buchstaben statt der kompletten Wortmarke. Feine Details verschwimmen in Tab-Größe.
Auf den Hintergrund achten. Ein transparentes PNG sieht in hellen Tabs gut aus und kann in dunklen verschwinden. Wenn du ein Dark-Mode-Favicon nutzt, erstelle eine Version mit heller Marke.
Neutralen Dateinamen verwenden. Namen hochgeladener Dateien können im veröffentlichten HTML landen, vermeide also etwas wie „final_v3_REAL.png“.

So fügst du in Webflow ein Favicon und ein Webclip hinzu

Öffne dein Projekt im Webflow Designer oder im Dashboard und gehe zu Site settings (Website-Einstellungen).
Wähle den Tab General (Allgemein) und scrolle zu Icons.
Klicke auf Upload icon (Icon hochladen) und wähle dein quadratisches Bild.
Wähle aus, welche Icons das Bild aktualisieren soll: das Favicon, das optionale Dark-Mode-Favicon und das Webclip.
Wenn du ein anderes Icon für den Dark Mode möchtest, füge es im Dark-Mode-Feld hinzu. Das ist optional.
Klicke auf Apply (Übernehmen). Die Bezeichnungen in der Oberfläche können sich mit Webflow-Updates leicht ändern, orientiere dich also an den Labels, die du siehst.
Veröffentliche die Website auf deinen Domains. Das reine Speichern bringt die Icons nicht auf die Live-Website.
Öffne die Live-Website in einem privaten Fenster und prüfe den Tab.

Checkliste zum Kopieren

`` [ ] Quadratisches Quellbild, 256x256 oder größer [ ] Die Marke ist einfach genug, um in Tab-Größe lesbar zu sein [ ] Mit hellem und dunklem Browser-Theme getestet [ ] Hochgeladen unter Site settings > General > Icons [ ] Änderung übernommen (Apply) [ ] Auf der Live-Domain veröffentlicht (nicht nur auf der webflow.io-Staging-Domain) [ ] In einem privaten Fenster geprüft [ ] Hard Refresh durchgeführt oder Cache geleert, falls das alte Icon bleibt ``

Fehlerbehebung

Das Favicon zeigt noch das alte Icon oder das Webflow-Logo

Gehe diese Punkte der Reihe nach durch:

Erneut veröffentlichen. Icons gehen nur mit einer Veröffentlichung live. Wenn du auf mehrere Domains veröffentlichst, wähle alle aus.
In einem privaten Fenster testen. Browser speichern Favicons sehr hartnäckig im Cache, und ein normaler Tab zeigt das alte Icon unter Umständen lange weiter an.
Hard Refresh der Seite durchführen oder den Browser schließen und neu öffnen.
Die Datei direkt aufrufen. Prüfe, ob die Icon-URL aus dem Seitenquelltext in einem eigenen Tab lädt.

Der Upload wird abgelehnt oder das Icon wirkt verzerrt

In einigen Community-Threads wird von Größenfehlern bei älteren Abläufen berichtet, die exakte Abmessungen verlangten. Wenn dir das passiert, nimm ein quadratisches Bild und versuche es erneut. Bleibt das Problem bestehen, probiere einen anderen Browser oder ein privates Fenster. Dieser Tipp stammt aus Forenberichten, nicht aus der Dokumentation von Webflow, betrachte ihn also als Notlösung.

Google zeigt in den Suchergebnissen das falsche Icon

Das Icon in den Suchergebnissen steuert Google, nicht Webflow. Community-Threads beschreiben Aktualisierungen, die Tage, Wochen oder länger dauern. Prüfe, ob das Icon auf deiner Live-Website lädt, und warte dann ab. Hilfreich ist ein stabiles, quadratisches Icon unter einer gleichbleibenden URL.

Das Icon wirkt in Tabs unscharf

Das liegt meist daran, dass die Quelle zu viele Details hat oder von Anfang an zu niedrig aufgelöst war. Zeichne eine einfachere Marke in größerer Auflösung und lade sie neu hoch.

Welches Format solltest du hochladen?

Format	Geeignet für	Darauf achten
PNG	Die meisten Websites; zuverlässig und mit Transparenz	Braucht für das Webclip genug Auflösung
SVG	Saubere Vektorgrafiken	Webflow wandelt es in PNG um, sieh dir das Ergebnis also in der Vorschau an
ICO	Ältere Arbeitsabläufe	Oft überflüssig, wenn Webflow die Größen selbst erzeugt
JPG	Selten eine gute Wahl	Keine Transparenz, es bleibt ein Hintergrundkasten

Wenn du unsicher bist, ist ein quadratisches PNG mit 256x256 Pixeln oder mehr die sicherste Wahl.

Wo das in die Launch-Vorbereitung passt

Ein Favicon ist nur ein kleiner Punkt auf der Launch-Checkliste, neben Titeln, Beschreibungen und Social-Media-Bildern. Wenn du noch Plattformen vergleichst, bevor du dich festlegst, findest du die Abwägungen auf unseren Seiten Webflow-Vergleich und Webflow-Alternativen. Der allgemeine Leitfaden zum Ändern eines Favicons hilft dir, wenn du Websites auf mehr als einer Plattform verwaltest.

Wenn du lieber mit einem fertigen Layout startest: Mit dem kostenlosen Tarif von We.Inc kannst du bis zu drei Websites aus fertigen Vorlagen veröffentlichen. Der KI-Builder, der aus einem Prompt eine Website entwirft, beginnt mit dem Starter-Tarif für $20 im Monat. Du kannst dich hier registrieren.

Kostenlos starten · Keine Kreditkarte nötig

Umair Ali Sadaqat

Gründer von We.Inc

Umair ist der Gründer von We.Inc. Er schreibt über die Erstellung von Websites mit KI, Agenturen und den Geschäftsbetrieb eines Webstudios.

Bereit, etwas Großartiges zu bauen?

Schließe dich 15,000+ Unternehmen an, die mit We.Inc starten, wachsen und automatisieren, alles auf einer Plattform.