Favicon für Webflow

Der Favicon-Upload von Webflow ist Teil des Bedienfelds „Projekteinstellungen“, das von der Designer-Leinwand getrennt ist. Klicken Sie im Webflow-Dashboard auf den Projektnamen und navigieren Sie dann zu Projekteinstellungen > Allgemein. Scrollen Sie nach unten zum Abschnitt „Favicon & App-Symbol“, klicken Sie auf den Upload-Bereich und wählen Sie Ihre Bilddatei aus. Webflow akzeptiert die Formate PNG, ICO und GIF.

Ein PNG mit 32×32 Pixeln ist die erforderliche Mindestgröße für den Favicon-Uploader von Webflow, aber ab 512×512 ergibt sich ein viel schärferes Ergebnis. Webflow führt ein Downsampling Ihres Bildes für die Tab-Anzeige und alle CDN-generierten Varianten durch. Stellen Sie immer die größte saubere Quelle bereit, die Sie haben – mit dem Generator können Sie ganz einfach aus jedem Logo ein 512×512 PNG erstellen.

Webflow hostet das Favicon auf seinem eigenen CDN mit einer automatisch generierten URL (normalerweise im Format uploads-ssl.webflow.com/...). Sie müssen einen CDN-Pfad nicht manuell angeben. Klicken Sie nach dem Hochladen auf „Speichern“ und dann auf „Veröffentlichen“ Ihres Projekts. Das Favicon wird beim Veröffentlichen eingefügt, nicht nur beim Speichern – unveröffentlichte Änderungen sind auf Ihrer Live-Domain nicht sichtbar.

Transparente Hintergründe funktionieren ordnungsgemäß mit Webflow-Favicon-Uploads. Das CDN behält PNG-Alphakanäle bei, sodass ein Symbol mit transparentem Hintergrund sauber in Browserdesigns im dunklen Modus dargestellt wird. Wenn Ihr Logo einen einfarbigen weißen oder farbigen Hintergrund hat, wird es in den Browser-Registerkarten als quadratisches Feld angezeigt. Exportieren Sie Ihr Logo vor dem Hochladen ohne Hintergrundfüllung.

Der integrierte Favicon-Uploader von Webflow unterstützt keine SVG-Dateien. Wenn Sie ein Vektor-SVG-Favicon für gestochen scharfe Darstellung in jedem Maßstab und Unterstützung des Dunkelmodus wünschen, fügen Sie es über benutzerdefinierte Code-Injektion hinzu. Gehen Sie zu Projekteinstellungen > Benutzerdefinierter Code > Kopfcode und fügen Sie hinzu: „<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>“. Hosten Sie die SVG-Datei auf Ihrem eigenen Server oder einem CDN-Dienst.

Das Hinzufügen eines apple-touch-icon für iOS-Startbildschirminstallationen erfordert auch benutzerdefinierten Code in Webflow, da der integrierte Uploader nur das Standard-Favicon verarbeitet. Laden Sie Ihre 180×180 apple-touch-icon.png auf einen Dateihost (oder Webflow Assets, wenn Ihr Plan dies unterstützt) hoch und fügen Sie dann „<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>“ in das Feld „Projekteinstellungen“ > „Benutzerdefinierter Code“ > „Kopfcode“ ein.

Die PWA-Symbolunterstützung von Webflow ist im Vergleich zu Frameworks wie Next.js begrenzt. In Webflow gibt es keinen nativen Web-Manifest-Generator. Um die vollständige PWA-Installationsunterstützung zu erhalten, erstellen Sie manuell eine site.webmanifest-JSON-Datei, hosten Sie sie extern und fügen Sie das Manifest-Link-Tag über benutzerdefinierten Code ein. Fügen Sie 192×192- und 512×512 PNG-Einträge in das Manifestsymbol-Array ein.

Wenn Sie eine Webflow-Site für einen Kunden erstellen, wird das Favicon oft erst spät im Projekt gesetzt und dann vergessen. Ein nützlicher Arbeitsablauf besteht darin, zu Beginn des Projekts ein Platzhalter-Favicon festzulegen und es vor der Übergabe zu ersetzen. Webflow führt keinen Versionsverlauf des Favicons durch – sobald Sie ein neues Favicon speichern, wird das alte aus den Projekteinstellungen entfernt, obwohl es möglicherweise noch einige Zeit über seine CDN-URL zugänglich bleibt.

Webflow-Sites mit mehreren Domänen – bei denen dasselbe Projekt auf mehreren benutzerdefinierten Domänen veröffentlicht wird – teilen sich ein einziges Projekteinstellungs-Favicon. Im nativen Webflow gibt es keine domänenspezifische Favicon-Überschreibung. Auf allen veröffentlichten Domains erscheint das gleiche Symbol. Wenn Sie Symbole pro Domäne benötigen, verwenden Sie benutzerdefinierte Code-Injektion, um das Symbol-Link-Tag bedingt zu überschreiben (dies erfordert ein Webflow-CMS oder eine benutzerdefinierte Logik).

Aufgrund des CDN-Caching kann die Verbreitung von Favicon-Updates in Webflow einige Zeit in Anspruch nehmen. Nach der Veröffentlichung eines neuen Favicons kann das alte 24–48 Stunden lang in Browsern angezeigt werden. Öffnen Sie Ihre Live-Site in einem privaten/Inkognito-Fenster, um das aktualisierte Symbol ohne Beeinträchtigung des lokalen Browser-Cache anzuzeigen. Wenn Ihre Zielgruppe im CDN zwischengespeicherte Seiten verwendet, hängt die Ausbreitungsverzögerung von den CDN-TTL-Einstellungen von Webflow ab.

Für Benutzer des Webflow-Editors (Kunden, die Inhalte ohne Designer-Zugriff bearbeiten) kann das Favicon nicht über den Editor geändert werden – es ist in den Projekteinstellungen gesperrt. Nur Mitarbeiter mit Designer-Zugriff oder Kontoinhaber können das Favicon aktualisieren. Teilen Sie dies den Kunden deutlich mit, damit sie wissen, wo sie zukünftige Favicon-Updates anfordern können.

Nachdem Sie Ihr Webflow-Favicon veröffentlicht haben, verwenden Sie favicon tester, um zu bestätigen, dass es in Ihrer Produktionsdomäne aufgelöst wird. Vergleichen Sie das Ergebnis mit der erwarteten Größe: 32×32 für Tabs, 180×180 für iOS, wenn Sie apple-touch-icon hinzugefügt haben. Sehen Sie sich auch den best favicon size-Leitfaden an, um zu verstehen, welche Größen den Symbolvollständigkeitswert Ihrer Website verbessern.