Favicon-Generator.

Erstelle alle Icons, die eine Website oder Web-App braucht, aus ein oder zwei Buchstaben oder deinem eigenen Logo: favicon.ico, das Apple-Touch-Icon, Android- und Maskable-Icons, ein Web-Manifest und die Tags für dein HTML oder Next.js, dazu ein SVG-Favicon, wenn dein Logo ein SVG ist. Sieh dir die Vorschau im Browser-Tab und auf den Homebildschirmen von iPhone und Android an und lade dann alles in einer ZIP-Datei herunter. Alles läuft in deinem Browser, deine Bilder werden nie hochgeladen.

Erstellen aus

BuchstabenBild

BuchstabenSchrift

Form

QuadratAbgerundetKreis

HintergrundBuchstabenfarbe

Farben aus unseren Designsystemen

App-Name

favicon.ico, apple-touch-icon.png, Android 192 und 512, ein Maskable-Icon, site.webmanifest und head.html.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So erstellst du ein Favicon

Wähle, woraus du es erstellst.
- Buchstaben: Gib ein oder zwei Buchstaben ein, wähle Schrift und Form (Quadrat, abgerundet oder Kreis) und lege Hintergrund- und Buchstabenfarbe fest. Für eine Palette, die funktioniert, klick auf eine der Farben aus unseren Designsystemen.
- Bild: Füge dein Logo als PNG, JPG, WebP oder SVG hinzu und stell den Innenabstand ein. Das Favicon kann einen transparenten Hintergrund bekommen.
Prüfe die Vorschau: ein Browser-Tab im hellen und dunklen Modus, ein iPhone-Homebildschirm und ein Android-Homebildschirm mit runder Maske.
Lade alle Icons in einer ZIP-Datei herunter.
Leg die Dateien in den Stammordner deiner Website (in den meisten Projekten public/) und kopiere die HTML-Tags oder die Next.js-Metadaten von der Seite in dein Projekt.

Was in der ZIP-Datei steckt

Datei	Wofür sie gebraucht wird
`favicon.ico` (16, 32 und 48 Pixel)	Browser-Tabs, Lesezeichen und ältere Browser
`favicon.svg`	Scharfe Tabs in modernen Browsern; nur wenn du ein SVG-Logo hochlädst
`apple-touch-icon.png` (180 Pixel)	Das Icon, wenn jemand deine Website zum Homebildschirm von iPhone oder iPad hinzufügt
`android-chrome-192x192.png` und `512x512.png`	Android-Homebildschirme und die Installationsaufforderung für Web-Apps
`maskable-icon-512x512.png`	Android-Icons, die zu einem Kreis oder einer anderen Form zugeschnitten werden
`site.webmanifest` und `head.html`	Name, Farben und Icons deiner App und die Tags, die alles verknüpfen

Das Maskable-Icon hält deine Buchstaben oder dein Logo in den mittleren 80 % des Bildes, der sicheren Zone, die Android nie beschneidet. Apple- und Android-Icons bekommen immer einen vollflächigen Hintergrund, weil Homebildschirme Transparenz schlecht darstellen.

Die Icons mit Codex einbauen

Leg die heruntergeladenen Dateien in dein Projekt und bitte Codex, sie einzubinden:

Die Favicon-Dateien einbauen

Ich habe neue Favicon-Dateien in [public/] abgelegt: favicon.ico, favicon.svg (falls vorhanden), apple-touch-icon.png, die Android- und Maskable-Icons und site.webmanifest. Entferne alte Favicon- und Icon-Dateien, füge die Tags aus head.html in [das Root-Layout] ein, setze den App-Namen in site.webmanifest auf [deinen App-Namen] und prüfe, dass keine anderen Icon-Verweise übrig sind.

Wenn du den App Router von Next.js nutzt, kopiere statt der HTML-Tags den metadata- und viewport-Code aus dem Tool.

Häufige Fragen

Ist der Favicon-Generator kostenlos?

Ja. Ohne Anmeldung, ohne Wasserzeichen und ohne Limit.

Werden meine Bilder hochgeladen?

Nein. Dein Browser zeichnet jedes Icon und erstellt die ZIP-Datei auf deinem Gerät. Die Website zählt nur, dass das Tool genutzt wurde, nie, was du hineingibst.

Welche Favicon-Größen brauche ich?

Für fast jede Website: favicon.ico mit 16, 32 und 48 Pixeln, ein Apple-Touch-Icon mit 180 Pixeln sowie Icons mit 192 und 512 Pixeln in einem Web-Manifest. Genau das steckt in der ZIP-Datei. Ist dein Logo ein SVG, enthält sie außerdem ein SVG-Favicon, das in modernen Browsern scharf bleibt.

Warum wird noch mein altes Favicon angezeigt?

Browser speichern Favicons sehr lange im Cache. Prüfe, dass die alten Dateien aus deinem Projekt entfernt sind, und öffne die Website dann in einem privaten Fenster oder leere den Browser-Cache, um das neue zu sehen.