Welche Größen werden erzeugt?

Favicons in 16, 32 und 48px, ein Apple touch-Icon in 180px und Icons in 192 und 512px für Android und PWAs.

Was lade ich herunter?

Eine einzige Zip mit jeder Größe als PNG, einer fertigen site.webmanifest und den exakten HTML-Tags zum Einfügen in den head deiner Seite.

Wird mein Logo hochgeladen?

Nein — jede Größe wird lokal in deinem Browser erzeugt.

Favicon-Generator

Ein Bild → jede Favicon-Größe, ein Web-Manifest und das HTML-Snippet. In deinem Browser.

Tool wird geladen…

So erstellst du ein Favicon

Lade dein Logo hoch, und cutbg rendert es in jeder Größe, die Browser und Handys brauchen — 16 bis 512px, plus das Apple touch-Icon — gebündelt in einer Zip mit fertigem Web-Manifest und den exakten HTML-Tags zum Einfügen.

Standardmäßig privat

Alles wird lokal in deinem Browser gerendert; dein Bild wird nie hochgeladen.

Favicon-Größe: alle Größen und Dateien für Websites

Was in favicons.zip steckt

Laden Sie ein Bild hoch, und der Generator erzeugt direkt im Browser alle Dateien, die eine aktuelle Website braucht:

Datei	Größe	Verwendet von
`favicon.ico`	16, 32 und 48 px in einer Datei	Browser-Tabs, Lesezeichen, Windows, jedes Tool, das `/favicon.ico` abruft
`favicon-16x16.png`	16×16	Tabs auf normalen Bildschirmen
`favicon-32x32.png`	32×32	Tabs auf hochauflösenden Displays, Verknüpfungen
`favicon-48x48.png`	48×48	Google-Suchergebnisse, Desktop-Verknüpfungen
`apple-touch-icon.png`	180×180	„Zum Home-Bildschirm" auf iPhone und iPad
`android-chrome-192x192.png`	192×192	Android-Startbildschirm
`android-chrome-512x512.png`	512×512	Als App installierte Websites (PWA) und Startbildschirm
`site.webmanifest`	—	Sagt Android/Chrome, wo die beiden großen Icons liegen
`README-favicon.html`	—	Die HTML-Tags zum Einfügen

Welches Ausgangsbild am besten funktioniert

Quadratisch, schlicht, kräftig. Bei 16 px stehen insgesamt 256 Pixel zur Verfügung. Ein komplettes Logo mit Slogan wird zum Fleck; ein einzelner Buchstabe oder ein Symbol bleibt erkennbar. Viele Marken nutzen fürs Favicon eine vereinfachte Bildmarke.
Mindestens 512×512. Das größte Icon misst 512 px – ein kleineres Ausgangsbild wird hochskaliert und wirkt weich. Ideal ist ein SVG-Logo, das vor dem Verkleinern in hoher Auflösung gerendert wird.
Transparentes PNG oder SVG. Die Transparenz bleibt in der .ico und den kleinen PNGs erhalten, sodass das Icon auf hellen und dunklen Browser-Themes gut aussieht.
Nicht quadratisch? Das Bild wird ohne Beschnitt ins Quadrat eingepasst, mit transparentem Rand an den Seiten. Soll es das Quadrat füllen, schneiden Sie es vorher zu oder erstellen eine runde Version mit Kreis zuschneiden.

Der Hintergrund des Apple-Touch-Icons

iOS erlaubt auf Home-Bildschirm-Icons keine Transparenz – transparente Bereiche werden schwarz. Deshalb bekommt das apple-touch-icon.png (180×180) immer einen vollflächigen Hintergrund. Standard ist Weiß; über das Farbfeld neben dem Upload-Bereich stellen Sie Ihre Markenfarbe ein (die Farbpipette liest sie aus Ihrem Logo aus). Alle anderen Größen bleiben transparent.

Wohin mit den Dateien

Entpacken Sie das ZIP und laden Sie alle Dateien ins Stammverzeichnis Ihrer Website, sodass https://ihreseite.de/favicon.ico das Icon anzeigt.
Fügen Sie die Tags aus README-favicon.html in den <head> jeder Seite ein (bzw. in die Header-Vorlage Ihres Themes):

<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">

Liegt die Website in einem Unterordner, passen Sie die Pfade an.

In WordPress erledigt Design → Customizer → Website-Informationen → Website-Icon das mit einem einzigen 512×512-Bild – nehmen Sie android-chrome-512x512.png. Shopify, Wix und Squarespace haben ein ähnliches „Favicon"-Feld.

Das mitgelieferte site.webmanifest listet nur die Icons auf. Sollen Besucher Ihre Website als App installieren können, ergänzen Sie name, short_name, theme_color, background_color und "display": "standalone".

„Ich habe das Favicon geändert, sehe aber noch das alte"

Favicons werden hartnäckiger zwischengespeichert als fast alles andere auf einer Website.

Rufen Sie https://ihreseite.de/favicon.ico direkt auf und laden Sie hart neu (Strg + F5, am Mac Cmd + Umschalt + R).
Hängen Sie eine Version an die Links, z. B. href="/favicon.ico?v=2", damit Browser sie als neue Datei behandeln.
Leeren Sie den Cache Ihres CDN oder Caching-Plugins, falls vorhanden.
Lesezeichen und Home-Bildschirm-Verknüpfungen behalten das alte Icon, bis sie neu angelegt werden.
Google aktualisiert das Icon in den Suchergebnissen erst nach dem erneuten Crawlen Ihrer Startseite – das kann Tage bis Wochen dauern. Google verlangt ein quadratisches Icon, dessen Seitenlänge ein Vielfaches von 48 px ist; das 48×48-PNG und die .ico erfüllen das.

Passende Werkzeuge

Hintergrund eines Fotos entfernen, bevor es zum Icon wird: Hintergrund entfernen.
Logo nur als WebP? Wandeln Sie es in PNG um, falls Ihr Programm es nicht öffnet.
Einfaches 512×512-Bild für Shop oder Profil? Auf 512×512 skalieren.

Häufige Fragen

Welche Größen werden erzeugt?: Favicons in 16, 32 und 48px, ein Apple touch-Icon in 180px und Icons in 192 und 512px für Android und PWAs.
Was lade ich herunter?: Eine einzige Zip mit jeder Größe als PNG, einer fertigen site.webmanifest und den exakten HTML-Tags zum Einfügen in den head deiner Seite.
Wird mein Logo hochgeladen?: Nein — jede Größe wird lokal in deinem Browser erzeugt.