Deutsch
Erzeuge Favicons aus Bild, Text oder Emoji — alle Größen und das HTML zum Einfügen.
Zuletzt aktualisiert
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
Ein *Favicon* ist das kleine Icon, das in Browser-Tabs, Lesezeichen, Verlaufslisten und auf dem iOS- bzw. Android-Homescreen erscheint, wenn jemand deine Seite speichert. Etwas Kleines mit überraschend großer Wirkung darauf, wie professionell ein Projekt wirkt: Ein echtes Favicon ist der Unterschied zwischen einem Platzhalter-Quadrat und einem fertigen Produkt.
Moderne Browser fragen das Favicon in einer Handvoll unterschiedlicher Größen und Formate ab. Tab- und Lesezeichen-Icons wollen ein 16×16 oder 32×32 PNG. iOS Safari will ein 180×180 apple-touch-icon.png. Androids *Zum Startbildschirm hinzufügen* will 192×192 und 512×512 in einem Web-Manifest. Alte Browser und manche Integrationen erwarten weiterhin ein Multi-Resolution-favicon.ico. All das einzeln per Hand zuzuschneiden ist viel Fleißarbeit — ein Favicon-Generator erledigt es mit einem Klick.
Dieser Generator läuft komplett in deinem Browser. Dein hochgeladenes Bild wird lokal in einem <canvas> dekodiert, jede Ausgabegröße daneben gerendert und das gesamte Bundle (PNGs, ICO, Web-Manifest, README und HTML-Snippet) in ein .zip gepackt — ganz ohne Upload.
favicon.ico ist ein Container-Format, das mehrere Größen bündeln kann (16, 32, 48), damit Legacy-Aufrufer immer das passende finden.apple-touch-icon.png und Einträge in einem manifest.webmanifest) — beide sollten vorhanden sein.Nimm **Text** für ein 1-3-Zeichen-Monogramm, **Emoji** für ein Ein-Glyphen-Icon oder **Bild** für PNG, JPEG oder SVG. Der Bildmodus ist der beste Startpunkt, wenn du schon ein Logo hast.
Wähle eine Hintergrundfarbe (und für Monogramme eine Textfarbe). Wähle **Quadrat**, **Abgerundet** oder **Kreis** — abgerundete Quadrate passen dazu, wie iOS Homescreen-Icons beschneidet, daher wirken sie nativ.
Der Seitenname wird zum application-name-Meta-Tag und zum short_name im PWA-manifest.webmanifest. Verwende den Markennamen, den Nutzer in einem Browser-Lesezeichen sehen würden.
Scroll durch die Vorschau und stell sicher, dass das Icon auch bei 16px und 32px (wo Tabs leben) noch lesbar ist. Verliert das Design dort die Lesbarkeit, vereinfache die Quelle — weniger Zeichen oder ein engerer Ausschnitt.
Klicke **Favicon-Bundle herunterladen (.zip)**, um alle Ausgabedateien auf einmal zu bekommen. Lege die Dateien ins Root-Verzeichnis deiner Seite und füge das HTML-Snippet in deinen <head> ein — fertig.
Jeder Download enthält die folgenden Dateien. Das HTML-Snippet verdrahtet sie — wenn du nur eine Teilmenge brauchst, behalte die, die zu deinen unterstützten Plattformen passen.
| Datei | Größe | Verwendet von | Hinweise |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Browser-Tabs (Legacy-Fallback) | Multi-Resolution-ICO-Container — jeder Browser fragt diese URL weiterhin an. |
favicon-16x16.png | 16×16 | Browser-Tab-Icon | Wird auf High-DPI-Displays via <link rel="icon" sizes="16x16"> genutzt. |
favicon-32x32.png | 32×32 | Browser-Tab + Lesezeichen | Das Haupt-Tab-Icon auf Retina-Bildschirmen. |
favicon-48x48.png | 48×48 | Windows-Site-Tile, Taskleiste | Wird auch im favicon.ico für Legacy-Aufrufer mitgebündelt. |
apple-touch-icon.png | 180×180 | iOS Safari *Zum Startbildschirm hinzufügen* | iOS nutzt einen Screenshot-Fallback, wenn diese Datei fehlt — immer ausliefern. |
android-chrome-192x192.png | 192×192 | Android-Homescreen | Wird im manifest.webmanifest referenziert. |
android-chrome-512x512.png | 512×512 | PWA-Installations-Prompt + Splash | Pflicht für installierbare PWAs. |
site.webmanifest | — | PWA-Installations-Metadaten | Listet Icons, Name, Theme-Farbe. Verlinkt via <link rel="manifest">. |
Tippe 1-3 Buchstaben (z. B. **Co**, **C** oder **JS**), wähle eine Markenfarbe und nimm **Abgerundet** für eine iOS-freundliche Silhouette.
Monogramme sind bei 16px am besten lesbar, weil keine Details verloren gehen können. Verwende einen fetten Großbuchstaben oder eine eng gesetzte Zwei-Buchstaben-Kombi und halte Text- und Hintergrundfarbe kontrastreich.
Wähle ein Emoji, das zum Vibe des Projekts passt — 🚀 für einen Launch, 🧪 für ein Experiment, 📚 für Docs. Setze einen neutralen Hintergrund.
Emoji-Favicons wirken sympathisch für persönliche Seiten, Hackathons und Side-Projects. Denk daran, dass dasselbe Emoji auf macOS (Apple) und Windows (Segoe) unterschiedlich aussieht — einmal exportiert, friert das Bundle das macOS-/Linux-/Chrome-Aussehen aus der Vorschau ein.
Lege ein PNG oder SVG deines Logos ab, erhöhe den **Padding**-Regler, damit das Motiv nicht an die Kante stößt, und aktiviere **Hintergrundfarbe füllen**, wenn dein Logo transparente Ränder hat.
SVG-Eingaben rendern bei jeder Größe gestochen scharf. PNG-Eingaben funktionieren ebenfalls, werden aber jenseits ihrer nativen Auflösung unscharf — starte mit einer Quelle von mindestens 512×512.
apple-touch-icon.png vergessen. iOS fällt dann auf einen Seiten-Screenshot zurück — der meistens hässlich aussieht — wenn kein Apple Touch Icon deklariert ist.<link rel="icon" href="/images/favicon.ico"> verlinken. Das funktioniert, aber Browser fragen trotzdem /favicon.ico im Site-Root ab. Lege also entweder eine Kopie ins Root oder nimm die 404er in deinem Access-Log in Kauf.favicon.ico (16/32/48), ein 32×32-PNG, ein 180×180-apple-touch-icon.png für iOS sowie 192×192- und 512×512-PNGs, die in einem site.webmanifest für Android und installierbare PWAs deklariert sind. Das Bundle dieses Tools enthält alle.<link rel="icon" type="image/png">. Alle unterstützen außerdem die Legacy-URL /favicon.ico. SVG-Favicons werden in modernen Browsern unterstützt und erlauben es einer einzigen Datei, in jeder Größe gestochen scharf zu skalieren — super, wenn dein Logo bereits vektorbasiert ist, aber iOS Safari braucht trotzdem den PNG-Fallback.Cmd/Strg + Umschalt + R), die Site-Daten in den DevTools löschen oder einen Query-String an der Favicon-URL hochzählen (/favicon.ico?v=2). Ein vorgelagertes CDN braucht meistens ebenfalls einen Purge./apple-touch-icon.png. Das Bundle enthält es.<canvas> dekodiert, und jede Ausgabe (PNGs, ICO, ZIP, Manifest) wird lokal erzeugt. Nichts verlässt deine Maschine.