So nutzt du: Favicon-Generator
- Wähle „Text/Emoji“ aus und gib einen Buchstaben ein oder wähle ein Emoji aus, oder wechsle zu „Bild“ und lade dein Logo hoch (SVG oder ein quadratisches PNG mit mindestens 512 px eignet sich am besten).
- Passe Farben, Textgröße, Abstände und Eckenrundungen an, während du dir die Vorschau auf dem Browser-Tab in der tatsächlichen Größe von 16 px ansiehst.
- Gib den Namen deiner Website und die Farbgebung des Themes für das Web-Manifest ein.
- Klicke auf „Alle herunterladen (ZIP)“, lade die Dateien in den Stammordner deiner Website hoch und füge den HTML-Code hier ein
<head>. Bei Webflow lade stattdessen das 32×32-Favicon und den 256×256-Webclip in den Website-Einstellungen hoch.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol, das Browser in Registerkarten, Lesezeichen und im Verlauf anzeigen und das Google neben dem Namen deiner Website in den Suchergebnissen auf Mobilgeräten und am Desktop anzeigt. Smartphones verwenden außerdem größere Versionen, wenn jemand deine Website auf seinem Startbildschirm hinzufügt. Ein vollständiger Satz ist heutzutage klein: eine ICO-Datei für ältere und Standard- /favicon.ico Anfragen, eine PNG-Datei für moderne Browser, ein Apple-Touch-Icon, zwei Android-/PWA-Icons, auf die aus einem Web-App-Manifest verwiesen wird – und optional eine SVG-Datei.
Was dieser Generator erstellt
| Datei | Größe | Verwendet von |
|---|---|---|
favicon.ico | 16, 32, 48 px in einer Datei | Alle Browser, Windows-Verknüpfungen, Tools, die /favicon.ico direkt |
favicon-32x32.png | 32 × 32 | Moderne Browser-Tabs; die von Webflow angeforderte Größe |
apple-touch-icon.png | 180 × 180 | iPhone/iPad-Startbildschirm und Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Android-Startbildschirm, PWA-Installation und Startbildschirm |
webclip-256x256.png | 256 × 256 | Webflow-Einstellung „Webclip“ |
site.webmanifest | JSON | Name, Farben und Icon-Liste für installierbare Websites |
Die ICO-Datei wird direkt in deinem Browser zusammengestellt: ein kleiner ICO-Header und ein Verzeichnis, gefolgt von drei PNG-komprimierten Bildern – ein Format, das jeder aktuelle Browser und jede Windows-Version lesen kann. Es wird nichts hochgeladen.
Bewährte Vorgehensweisen für Favicons
- Gestalte für 16 px. Feine Details und lange Wörter verschwinden bei der Tab-Größe. Ein einzelner fetter Buchstabe, ein einfaches Symbol oder ein Emoji sind viel besser lesbar als ein vollständiges Logo mit Slogan.
- Apple-Touch-Icons müssen undurchsichtig sein. iOS rundet die Ecken selbst ab und füllt transparente Pixel mit Schwarz, daher exportiert dieses Tool das 180-px-Icon (und den Webflow-Webclip) immer als vollflächiges Quadrat mit durchgehendem Hintergrund.
- Überprüfe den Dunkelmodus. Ein dunkles Logo auf transparentem Hintergrund verschwindet in einem dunklen Browser-Tab – die Vorschau zeigt beide Designs. Füge bei Bedarf eine Hintergrundfarbe oder einen Abstand hinzu.
- Die Google-Suche erfordert ein quadratisches Favicon, das gecrawlt werden kann, und empfiehlt eine Größe von mehr als 48×48 px; deshalb verlinkt das Snippet auch das 192-px-PNG. Es kann Tage dauern, bis Änderungen in den Suchergebnissen erscheinen.
- Caching: Browser speichern Favicons intensiv im Cache. Wenn du eines ersetzt, teste es in einem privaten Fenster oder füge eine Versionsabfrage hinzu, wie zum Beispiel
/favicon.ico?v=2.
Ein Favicon in Webflow hinzufügen
Öffne „Site-Einstellungen“ → „Allgemein“ und scrolle zu „Favicon & Webclip“. Lade ein 32×32-px-Bild als Favicon und ein 256×256-px-Bild als Webclip (wird als Apple-Touch-Icon verwendet) hoch, speichere die Änderungen und veröffentliche die Seite. Webflow generiert die <link> Tags automatisch, sodass du weder das HTML-Snippet noch das Manifest benötigst, es sei denn, du fügst sie über benutzerdefinierten Code hinzu. Um anschließend zu überprüfen, was live ist, zeigt der Meta-Tag-Checker die Tags für das Favicon und das Apple-Touch-Icon an.
Auch gesucht als: favicon, favicon.ico, ico-konverter, png in ico, apple-touch-symbol, site.webmanifest, emoji-favicon, webclip.
Passende Tools zu: Favicon-Generator
- PWA Manifest Generator — Make any website an installable PWA.
- Bildgrößenänderer — Passe die Größe eines Fotos auf exakte Pixelabmessungen oder einen Prozentsatz an, schneide es so zu, dass es die Größe eines Social-Media-Beitrags ausfüllt, oder passe es in einen Rahmen mit einer Hintergrundfarbe ein – alles direkt in deinem Browser.
- OG-Bildgenerator — Erstelle in Sekundenschnelle ein professionelles Vorschaubild für Links auf Facebook, LinkedIn, X, Slack und WhatsApp – wähle eine Vorlage aus, gib deinen Titel ein, füge ein Logo hinzu und lade dann die PNG-Datei sowie die passenden Meta-Tags herunter.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
Häufige Fragen
Wie groß sollte ein Favicon sein?
favicon.ico, ein 32×32-PNG, ein 180×180-Apple-Touch-Icon sowie 192×192- und 512×512-PNGs für Android bereit. Dieser Generator erstellt alle diese Dateien aus einer einzigen Quelle.Brauche ich noch eine „favicon.ico“-Datei?
/favicon.ico aus dem Stammverzeichnis der Website ab, auch wenn kein <link> Tag ab. Wenn du also dort eine hinterlegst, vermeidest du 404-Fehler und fehlende Symbole.Welche Favicon-Größen benötigt Webflow?
favicon-32x32.png und webclip-256x256.png aus der ZIP-Datei.Kann ich ein Emoji als Favicon verwenden?
Warum wird mein neues Favicon nicht angezeigt?
?v=2) an die Icon-URLs an. Es kann Tage oder Wochen dauern, bis die Google-Suche die Seite erneut crawlt.