Favicon Generator
Quelldatei hochladen und alle gängigen Favicon-Größen erzeugen. Verarbeitung läuft komplett im Browser.
PNG/JPEG/WebP/SVG. Empfohlen: quadratisches Bild ≥ 512×512.
So funktioniert das Tool
Moderne Browser, Lesezeichen, PWA-Manifeste und mobile Home-Screens verlangen verschiedene Favicon-Größen und -Formate - 16×16 ICO für den Browser-Tab, 180×180 für Apple-Touch-Icons, 192×192 und 512×512 für Android-Home-Screens, plus SVG für Retina-Schärfe. Unser Generator nimmt eine Quelldatei (PNG oder SVG, mindestens 512×512), erzeugt alle Größen in einem Rutsch und gibt dir die fertigen Dateien plus das passende HTML-Snippet zum Einfügen in den <head>.
Typische Anwendungsfälle
Initiales Favicon für ein neues Projekt
Logo als SVG hochladen, ZIP mit allen Größen runterladen, in public/ ablegen - fertig. Spart den Roundtrip durch externe Tools wie realfavicongenerator.net.
PWA-Icon-Set
Eine installierbare PWA braucht 192×192 und 512×512 als „maskable” und „any” - der Generator erzeugt beide Varianten samt manifest.json-Snippet.
Rebrand: alle Favicons im neuen Look
Beim Rebrand wechselt das Logo. Statt 8 Größen manuell zu exportieren, einmal generieren - keine vergessene 96×96-Größe mehr in irgendeinem alten App-Manifest.
macOS-Safari Pinned-Tab
Safari-Pinned-Tabs brauchen ein einfarbiges SVG. Wenn dein Logo geeignet ist, generierst du auch das automatisch.
FAQ
Häufige Fragen
Welche Größen werden generiert?
16×16, 32×32, 48×48 (favicon.ico), 180×180 (apple-touch-icon), 192×192 + 512×512 (android-chrome), plus die Original-SVG-Variante wenn die Quelle vektorisiert war. Damit deckst du alle Plattformen ab, die in den letzten 10 Jahren relevant waren.
Wird mein Logo irgendwo hochgeladen?
Nein. Resize und Konvertierung passieren via Canvas-API im Browser. Das Original-Bild verlässt deinen Rechner nicht. Bei sehr großen Quelldateien (>10 MB) dauert es ein paar Sekunden, weil der Browser dann alle Größen lokal rastert.
PNG oder SVG als Quelle?
SVG ist optimal - bleibt scharf in jeder Größe, perfekte Skalierung. Wenn nur PNG verfügbar: mindestens 512×512 als Quelle, sonst werden die hochauflösenden Größen verwaschen. Den Hintergrund vorher transparent machen (Apple-Touch-Icons werden auf dem Home-Screen umrahmt).
Was ist ein „maskable” Icon?
Android-Versionen seit ~2019 schneiden PWA-Home-Screen-Icons in eine plattform-spezifische Form (Kreis bei Pixel, Quadrat bei Samsung). Maskable-Icons haben einen 80 %-Safe-Zone in der Mitte - wichtige Inhalte dürfen nicht in den äußeren 10 %, sonst werden sie abgeschnitten.
Welches HTML-Snippet brauche ich im <head>?
<link rel="icon" href="/favicon.ico" sizes="any"> + <link rel="icon" href="/icon.svg" type="image/svg+xml"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> + manifest-Verweis. Der Generator gibt dir das Snippet fertig zum Kopieren.
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.