Site Icon Generator: Von einem Prompt zu jeder Favicon-Größe
Ein Site Icon besteht drei Prüfungen gleichzeitig: 16 Pixel im Browser-Tab, ein Vielfaches von 48 Pixeln in Googles mobilen Ergebnissen und 180 Pixel auf dem iPhone-Startbildschirm. Beschreibe das Zeichen einmal, und der Site Icon Generator macht daraus jede Favicon-Größe, exportiert aus einem 1024px-Master.
Site-Icon- & Favicon-Beispiele
Für echte Websites und Web-Apps erzeugte Marken, in flachen, Line-, Glas- und Minimal-Stilen, die von 512 px bis zum 16-px-Browsertab scharf bleiben.
Site-Icons auf dem unendlichen Canvas verfeinern
Ein Favicon lebt bei 16 px, Details entscheiden alles. Auf dem Canvas generieren, Varianten abzweigen, Hintergründe per Klick entfernen und jeden Kandidaten vor dem Export gegen echte Tab-Größen prüfen.
Visueller Stammbaum (Visual Lineage)
Verfolge Prompt-Iterationen und Remix-Varianten mit Bézier-Kurven, um Beleuchtung, Textur und Farben direkt zu vergleichen.
Integrierte Nachbearbeitung (Post-Processing)
1-Klick-Hintergrundentfernung und präzise Farbfüllung zur Erfüllung der Apple App Store Richtlinien ohne Transparenz.
Sicherheitsbereich-Schutz (Safe Zone)
Einstellbare Innenabstände schützen zentrale Grafiken vor aggressivem Beschneiden durch Systemecken.
Site-Icon-Prompt-Beispiele
Kopiere eines davon in den Site Icon Generator und tausche Motiv, Stil und Farb-Wörter gegen deine eigenen. Ein guter Site-Icon-Prompt nennt drei Dinge: das Motiv, Stil und Farbpalette und die Tatsache, dass das Zeichen bei 16 Pixeln lesbar bleiben muss.
Minimales Lettermark
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
Freundliches Ladenzeichen
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
Glassiges SaaS-Favicon
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
So erstellst du ein Site Icon in 3 Schritten
Von einem Satz zum kompletten Favicon-Set: Der Site Icon Generator übernimmt die Größen, ganz ohne Bildbearbeitung.
- 1
Beschreibe das Zeichen
Fasse Motiv, Stil und Farben in einem Satz zusammen, etwa "a flat compass mark, navy on white, site icon for a travel planner". Je einfacher die Formbeschreibung, desto näher kommt die KI der klaren Silhouette, die ein Favicon braucht.
- 2
Master in 1024 erzeugen, dann klein prüfen
Erzeuge mit 1024x1024 und prüfe das Ergebnis bei 16 und 32 px, bevor du entscheidest. Der Tab ist der Wohnort des Icons; ein Zeichen, das nur groß funktioniert, versagt dort.
- 3
Das komplette Favicon-Set exportieren
Exportiere Mehrgrößen-ICO, das 180px-Apple-Touch-Icon, die 192er- und 512er-Manifest-PNGs und modernes WEBP in einem Durchgang, dann hochladen oder ins Repository legen.
Site-Icon-Größen und Formate in einer Tabelle
Browser, Apple, Android und Google Search holen sich jeweils eine andere Datei, und der Site Icon Generator muss alle liefern. Das sind die aktuellen Zahlen.
| Oberfläche | Was du auslieferst | Formatregeln | Wo es erscheint |
|---|---|---|---|
| Browser-Tab | 16x16 und 32x32 px PNG | Quadratisch; ein einziges Zeichen mit starkem Kontrast, denn das ist die kleinste Fläche, die dein Icon je füllt | Tab-Leiste und Fenstertitel; Chrome nutzt 16 px auf Standard- und 32 px auf HiDPI-Displays |
| Klassisches favicon.ico | Ein Mehrgrößen-ICO mit 16, 32 und 48 px | Liegt unter /favicon.ico im Site-Root, sodass auch Tools es finden, die keine Link-Tags lesen | Alte Browser, Reader und Crawler, die die Root-Datei direkt anfordern |
| Google-Suchergebnisse | Quadratische Datei, Seitenlänge ein Vielfaches von 48 px: 48, 96, 144 oder 192 px | PNG, ICO, GIF, JPEG oder SVG; muss crawler-zugänglich sein, im Head der Startseite verlinkt werden und die Website verkörpern | Neben Site-Namen in mobilen Ergebnissen; Icons, die Größen- oder Markenregeln verletzen, fliegen raus |
| Apple-Touch-Icon | 180x180 px PNG | Vollflächiges Quadrat ohne Transparenz; iOS rundet die Ecken und setzt es unverändert auf den Startbildschirm | iOS-Startbildschirm-Shortcuts und Lesezeichen |
| Web-Manifest (PWA) | 192x192 und 512x512 px PNG | Im Web-Manifest deklariert; Inhalte in der maskable Safe Area halten, denn Android schneidet in eigene Formen | Android-Installationshinweise, Startbildschirm-Icons und Splash-Screens |
| SVG-Icon | Ein quadratisches SVG in beliebiger Größe | Skaliert auf jeder Oberfläche scharf und darf eine prefers-color-scheme-Variante für dunkle Themes mitbringen | Aktuelle Firefox-, Chrome- und Safari-Versionen tauschen Raster-Favicons dagegen aus |
Größen folgen Googles Favicon-Richtlinien und dem aktuellen Browser-Verhalten, geprüft im September 2026.
Beschreibe das Zeichen, prüfe es in Tab-Größe und exportiere dann ICO, Apple Touch, Manifest und WEBP aus der Tabelle oben in einem Durchgang.
Site Icon Generator öffnenEin Master, jede Oberfläche
Jede Oberfläche in der Tabelle liest eine andere Datei aus demselben Master. Handgeschriebene Sites verdrahten sie mit höchstens drei Head-Zeilen: <link rel="icon">, <link rel="apple-touch-icon"> und einem Manifest-Link. Logo schon vorhanden? Der kostenlose App-Icon-Resizer schneidet ihn in das komplette Set.
Die 16px-Tab-Leiste
Die härteste Fläche, die ein Site Icon füllt. Der 1024px-Master schrumpft um das 64-Fache, und detailreiche Logos werden zu Brei. Überlebende Zeichen haben ein Motiv, höchstens zwei Farben und Striche, die sichtbar bleiben, wenn die halben Pixel weg sind.
Der favicon.ico-Fallback
Ein Format von 1996, auf dem ein Teil des Webs weiterläuft. Browser, die jeden Link-Tag ignorieren, und Crawler, die deinen Head nie lesen, fordern trotzdem /favicon.ico im Site-Root an. Ein Mehrgrößen-ICO dort ist die billigste Kompatibilitätsversicherung.
Googles 48px-Regel
Mobile Ergebnisse zeigen Favicons neben Site-Namen, aber nur Icons, die die Richtlinien erfüllen: quadratisch, Seite ein Vielfaches von 48px, auf der Startseite deklariert, crawler-zugänglich und markengerecht. Sites mit nur 32px haben ihre Icons verschwinden sehen.
CMS-Uploads ohne Code
WordPress nennt das Favicon Site Icon: ein 512x512-Quadrat unter Website-Informationen hochladen, und alle kleineren Größen entstehen automatisch. Squarespace, Wix und Shopify haben ein Favicon-Feld in den Einstellungen und übernehmen den 512px-Export unverändert.
Wo ein Site Icon wirklich auftaucht
Der Browser-Tab ist der naheliegendste Ort, aber dieselbe Datei reist weiter: in Lesezeichenleisten und Später-lesen-Listen, in Verlaufsseiten, ins Meistbesucht-Raster des neuen Tabs, in Googles mobile Ergebnisse über der URL, auf iOS- und Android-Startbildschirme und in den Task-Switcher einer installierten PWA. Jede Oberfläche beschneidet und verkleinert das Icon anders, deshalb existiert die Tabelle oben. Ein Zeichen, das bei 16 px im Tab standhält, steht überall. Umgekehrt gilt das nicht.
Drei Wege zu einem Site Icon
Ein Site Icon Generator und ein Favicon-Converter lösen je die andere Hälfte des Problems: Converter verkleinern Artwork, das du schon hast; KI-Generatoren erzeugen das Artwork erst.
| KI-Site-Icon-Generator | Favicon-Converter | Designer | |
|---|---|---|---|
| Ausgangspunkt | Ein Text-Prompt oder Referenzbild | Ein fertiges quadratisches Logo zum Hochladen | Ein Briefing, dann Review-Runden |
| Was herauskommt | Originalzeichen, erzeugt für das Briefing | Dein vorhandenes Artwork, geschnitten in Favicon-Dateien | Original-Artwork, von Hand abgestimmt |
| Lesbarkeit bei 16 px | Neu generieren, bis das Zeichen die Tab-Leiste übersteht | Nur so stark wie das Logo, mit dem du startest | Stark, bei genug Iterationszeit |
| Komplettes Paket | Mehrgrößen-ICO, Apple Touch, Manifest-PNGs und WEBP aus einem Master | Genau das können die meisten Converter | Wie im Vertrag vereinbart |
| Zeit bis zum Start | Unter einer Minute pro Konzept | Minuten | Tage pro Runde |
| Kosten | Gratis-Credits zum Start, danach Credits pro Batch | Kostenlos | Hunderte pro Projekt |
Vergleich typischer Arbeitsabläufe, geprüft September 2026.
Was der Generator für dich übernimmt
Alles, was der Site Icon Generator zwischen dem ersten Prompt und Dateien für Repository oder CMS-Feld übernimmt.
Ein 1024px-Master
Hochauflösend nur einmal erzeugen; jede Favicon-Größe skaliert daraus sauber herunter, ohne bei 16 px zu verschmieren.
Favicon-fertige Exporte
Mehrgrößen-ICO, 180px-Apple-Touch-Icon und 192/512-Manifest-PNGs, ganz ohne Bildbearbeitung.
PNG, ICO und WEBP
Liefere das Format, das jede Plattform verlangt, inklusive schlankem modernem WEBP.
Transparenter oder Vollton-Hintergrund
Transparente PNGs für Seiten mit eigenen Headers, Volltonfüllungen, die gegen jede Tab-Farbe und jedes dunkle Theme halten.
Varianten und Verlauf
Richtungen im selben Konzept neu erzeugen und jede Version behalten, bis das Set ausgeliefert ist.
Marke als Referenz
Lade ein bestehendes Logo hoch, um Palette und Formensprache zu lenken, damit das Favicon zum Rest des Markensystems passt.
Site-Icon-Stile, die 16 Pixel überstehen
Der Stil entscheidet, wie viel vom Design die Verkleinerung auf Tab-Größe überlebt: probiere zwei, drei Richtungen im Site Icon Generator aus. Flache und minimalistische Zeichen halten am besten, weil nichts von Verläufen oder dünnen Linien abhängt. Glasige Presets funktionieren, solange die Silhouette ein einziges, kräftiges Ganze bleibt. 3D-Stile wirken bei Apple-Touch- und Manifest-Größen großartig und in Tabs akzeptabel, wenn die Kontur klar ist. Pixel-Art macht die winzige Leinwand selbst zur Ästhetik. Vergleiche sie in Icon-Größe in der Icon-Stilgalerie: Die Seiten für Minimalistisch, 3D und Glasig zeigen jeden Stil an echten Zeichen.
Ein Site Icon entwerfen, das die Tab-Leiste übersteht
Die meisten Favicon-Probleme entstehen durch Entwürfe im falschen Zoom, und vier Gewohnheiten verhindern fast alle. Komponiere um ein einziges Motiv: Zwei konkurrierende Formen werden bei 16 px zu Rauschen. Begrenze die Palette auf zwei, höchstens drei Farben: Anti-Aliasing frisst feine Kontraste schneller, als das Auge es merkt. Prüfe sowohl helle als auch dunkle Browser-Themes: Eine dunkle Tab-Leiste verschluckt dunkle Zeichen. Und verzichte auf Wörter: Ein Buchstabe geht bei 16 px gerade noch, ein Wort passt nie. Vorher in Tab-Größe prüfen, nicht nach dem Export.
Wo der Ablauf passt
Ein Master aus dem Site Icon Generator, exportiert für jede Oberfläche, die ein kleines Quadrat neben deinem Site-Namen zeigt.
WordPress-Site-Icons
Den 512x512-Export unter Website-Informationen hochladen; kleinere Größen und Link-Tags erzeugt WordPress automatisch.
Squarespace, Wix und Shopify
Jede Plattform hat ein Favicon- bzw. Browser-Icon-Feld in den Einstellungen und nimmt den 512px-Export unverändert an.
Handgeschriebene Websites
Exportierte Dateien ins Site-Root legen, die Link-Tags einmal einfügen: Browser, Suchergebnisse und Shortcuts sind damit abgedeckt.
PWAs und Web-Apps
Die 192er- und 512er-maskable-Exporte wandern ins Web-Manifest, während derselbe Master das Tab-Icon liefert.
Studios und Kundenprojekte
Verlauf pro Projekt behalten, bei Relaunch das ganze Set neu erzeugen und für jede Website konsistente Icon-Sätze liefern.
Nebenprojekte und Portfolios
Mit Gratis-Credits starten, mit einem Prompt zum kompletten Favicon-Set, und das Tab-Icon geht noch am selben Abend live.
Verwandte Tools
Blog
Weiterlesen
Längere Texte zu Icon-Design, Größen und Arbeitsabläufen.
Site-Icon-FAQ
Größen, Formate, CMS-Uploads und die Fragen, die Leute wirklich zu Favicons stellen.
Welche Größe sollte ein Site Icon haben?
Entwirf mit 1024x1024 und exportiere nach unten: 16 und 32 px für Browser-Tabs, ein quadratisches Vielfaches von 48 px für Google-Suchergebnisse, 180x180 für das Apple-Touch-Icon und 192 plus 512 px für das Web-Manifest. Der Site Icon Generator exportiert alle aus dem 1024-Master, denn jede Größe ist eine saubere Verkleinerung.
Wie füge ich ein Site Icon meiner Website hinzu?
Lade die Dateien ins Site-Root hoch und verlinke sie im Head der Startseite: ein <link rel="icon"> auf ICO, SVG oder PNG, ein <link rel="apple-touch-icon"> auf die 180px-Datei und ein Manifest-Link, wenn du PWA-Größen auslieferst. Bei WordPress, Squarespace, Wix oder Shopify genügt der Upload in den Website-Einstellungen; die Plattform schreibt alle Tags für dich.
Warum zeigt Google mein Favicon in den Suchergebnissen nicht an?
Google zeigt nur Favicons, die seine Richtlinien erfüllen: eine quadratische Datei, deren Seite ein Vielfaches von 48 px ist, verlinkt im Head der Startseite, unter einer stabilen, crawler-zugänglichen URL, nicht durch robots.txt blockiert und visuell repräsentativ für die Website. Ein nur 32 px großes Icon scheitert an der Größenregel. Nach der Korrektur dauert es ein paar Tage, bis Google neu crawlt.
Site Icon vs. Favicon vs. App-Icon: Was ist der Unterschied?
Favicon und Site Icon sind zwei Namen für dasselbe: das kleine Quadrat, das die Website in Tabs, Lesezeichen und Suchergebnissen vertritt. Site Icon ist schlicht der WordPress-Begriff. Ein App-Icon ist das größere Startbildschirm- und Store-Asset mit eigenen Vorgaben, dazu im Mobile-Application-Icon-Guide.
Darf ein Favicon einen transparenten Hintergrund haben?
Ja, und transparente PNG- oder ICO-Exporte sind die Standardwahl für handgeschriebene Websites. Prüfe das Zeichen vorher in einem dunklen Theme: Dunkle Zeichen verschwinden auf dunklen Tabs. Für das Apple-Touch-Icon gilt Vollflächigkeit; iOS füllt Transparenz schwarz.
ICO, PNG oder SVG: Welches Format soll ich verwenden?
Das aktuelle Minimal-Set sind drei Dateien: ein Mehrgrößen-ICO unter /favicon.ico als Rückfallebene, ein quadratisches SVG für moderne Browser und ein 180x180-PNG für Apple-Geräte. Installiert die Website als PWA, kommen 192er- und 512er-PNGs ins Web-Manifest. Alles darüber hinaus ist Redundanz.
Wie ändere ich das Site Icon in WordPress?
Gehe zu Design → Customizer → Website-Informationen und lade ein quadratisches Bild von mindestens 512x512 px hoch; WordPress beschneidet es und erzeugt alle kleineren Größen samt Link-Tags automatisch. Erzeuge die 512px-Datei im Generator oben, lade sie hoch, und nach dem Cache-Ablauf aktualisiert sich das Tab-Icon.
Wem gehören die erzeugten Site Icons?
Dir. Du behältst die vollen kommerziellen Rechte an jedem erzeugten Icon, vorbehaltlich der Nutzungsbedingungen, Favicons auf Kunden- und kommerziellen Websites eingeschlossen.
Baue ein Site Icon, das die Tab-Leiste übersteht
Das Zeichen einmal beschreiben, den Site Icon Generator alle Favicon-Größen in einem Durchgang exportieren lassen und die Website noch am selben Nachmittag aktualisieren.