Design

Favicon-Generator

Lade ein PNG-, JPG-, SVG- oder WebP-Bild hoch und erstelle Favicons in allen Standardgrößen (16×16 bis 512×512). Vollständig clientseitig – dein Bild wird nie an einen Server gesendet.

[[ labels.upload_title ]]

[[ labels.upload_hint ]]

[[ labels.upload_formats ]]

[[ labels.drop_active ]]
preview
[[ imageFile?.name ]]

[[ labels.result_title ]]

[[ g.def.size ]]×[[ g.def.size ]]
[[ sizeLabel(g.def) ]]
[[ g.def.filename ]]

[[ labels.html_title ]]

[[ labels.html_desc ]]

[[ htmlSnippet ]]

Tipps

  • Das hochgeladene Bild wird nicht an einen Server gesendet. Die gesamte Verarbeitung erfolgt im Browser.
  • Empfohlenes Bild: Verwende ein quadratisches PNG (mindestens 512×512 px) für eine scharfe Skalierung in allen Größen. Transparenz (Alphakanal) wird vollständig unterstützt.
  • SVG-Favicons können in einigen modernen Browsern direkt als <link rel="icon" type="image/svg+xml"> verwendet werden. iOS Safari benötigt jedoch ein Apple Touch Icon im PNG-Format.
  • Wenn du eine PWA (Progressive Web App) entwickelst, registriere die PNG-Icons in den Größen 192×192 und 512×512 in deiner manifest.json.

Häufige Fragen

Dieses Tool erzeugt Dateien im PNG-Format. Alle modernen Browser (Chrome, Firefox, Edge, Safari) unterstützen PNG-Favicons, daher ist das ICO-Format in der Praxis nicht notwendig. ICO wird nur für die Unterstützung von IE11 und älteren Versionen benötigt, was heutzutage äußerst selten vorkommt.

Wir empfehlen mindestens 32×32 (Browser-Tab) und 180×180 (Apple Touch Icon / iOS-Startbildschirm). Für eine PWA werden zusätzlich 192×192 und 512×512 benötigt.

Die aktuelle Version skaliert das Bild unter Beibehaltung des Seitenverhältnisses auf eine quadratische Leinwand. Wenn das Bild ein Logo oder Text enthält, empfehlen wir, es vorab auf ein Quadrat zuzuschneiden.

Übrigens – Die Geschichte des Favicons – Eine kleine Revolution in 16px

1999 war Internet Explorer 5 der erste Browser, der kleine Icons neben Lesezeichen in der Favoritenliste anzeigte. Daraus entstand die Konvention, eine Datei namens favicon.ico im Stammverzeichnis einer Website abzulegen. Das Wort „favicon" ist eine Kurzform von „favorite icon".

Das ICO-Format wurde von Windows-Symboldateien übernommen und konnte mehrere Größen (16×16, 32×32, 48×48) in einer einzigen Datei bündeln. Heute sind PNG und SVG praktikable Alternativen. SVG-Favicons (image/svg+xml) sind besonders bemerkenswert, da sie auflösungsunabhängig sind und sich für den Dunkelmodus eignen. Das <link rel="icon">-Tag wurde Mitte der 2000er Jahre formell standardisiert, doch das Ablegen von favicon.ico im Stammverzeichnis ist als Abwärtskompatibilitätskonvention bis heute üblich.

Als Apple 2007 das iPhone vorstellte, führte es die eigene Apple Touch Icon-Spezifikation (apple-touch-icon.png) ein – das Icon, das angezeigt wird, wenn ein Nutzer eine Verknüpfung zum iOS-Startbildschirm hinzufügt. Ursprünglich 57×57 px groß, wuchs es mit der Verbreitung von Retina-Displays auf den heutigen Standard von 180×180 px. Der Aufstieg der PWAs fügte 192×192 und 512×512 hinzu, was die Favicon-Verwaltung im Laufe der Jahre immer aufwendiger macht.

Weitere Tools in dieser Kategorie