Was ist Multi-Size-Favicon-Generator?

Laden Sie ein Bild hoch — oder tippen Sie 1-3 Buchstaben oder ein Emoji — und erhalten Sie alle Standardgrößen, von einer 16x16 ICO bis zu einem 1024x1024 App-Store-Icon, plus ein skalierbares favicon.svg. Umfasst Apple Touch, Android Chrome, MS-Kachel und Safari Pinned Tab. Einzeln herunterladen oder alles als ZIP.

Beginnen Sie mit Ihrem eigenen Logo oder bauen Sie schnell ein Icon aus ein paar Buchstaben oder einem Emoji mit eigenen Farben und Schrift. Der Generator erzeugt 17 separate PNG-Dateien für die klassischen Favicon-Größen (16, 32, 48, 64, 96, 128, 256), Apple-Touch-Icons (152, 167, 180), das 1024er App-Store-Icon, Android Chrome (192, 384), MS Tile (144, 150, 310) und das 512er PWA-Icon. Filtern Sie das Raster nach Plattform, wählen Sie als Ausgabeform Quadrat, abgerundet oder Kreis und prüfen Sie das Favicon vor dem Download in hellen und dunklen Tabs. Jedes ZIP enthält außerdem eine Mehrfach-Auflösungs-favicon.ico, ein skalierbares favicon.svg, ein gebrauchsfertiges HTML-Snippet und eine manifest.json mit maskable purpose für die Android-Größen — vergeben Sie einen App-Namen und Kurznamen, um es als PWA installierbar zu machen.

Anleitung

1. Laden Sie ein hochauflösendes quadratisches Bild (mindestens 512×512px) als Quelle hoch — oder wechseln Sie in den Textmodus und tippen Sie 1-3 Buchstaben oder ein Emoji, um sofort eines zu erstellen.
2. Pruefen Sie alle generierten Groessen im Raster. Schalten Sie einzelne Groessen je nach Plattform ein oder aus.
3. Lade einzelne Größen, eine Mehrfach-Auflösungs-favicon.ico separat herunter oder klicke „Alle herunterladen“ für ein ZIP mit allen ausgewählten Größen, ICO-Paket, HTML-Snippet und Manifest.

Wann verwenden

• Neue Website live schalten und Favicons fuer alle Browser und Betriebssysteme benoetigen.
• Rebranding: saemtliche PWA- und Startbildschirm-Icons aus dem neuen Logo neu generieren.
• Zum Startbildschirm hinzufuegen einbauen, damit Android ein Maskable-Icon korrekt darstellt.

Ergebnis

Eine Webagentur laedt das neue Logo eines Kunden fuer einen Markenrelaunch hoch. Sie erhaelt 12 Groessen fuer Desktop, iOS Safari, Android Chrome, Windows-Kacheln und PWA-Manifest-Icons — sofort einsatzbereit.

Häufige Fragen

Wie gross sollte das Ausgangsbild sein?

Mindestens 512x512 Pixel, quadratisch, Logo zentriert und mit etwas Rand. Kleiner wird das PWA-512-Icon unscharf. Eine Vektor-Quelle (SVG, in PNG 1024 gerastert) liefert noch bessere Ergebnisse.

Warum gibt es PNG- und ICO-Favicons?

Moderne Browser binden PNGs in mehreren Größen per link rel='icon' ein und bevorzugen zunehmend ein einzelnes skalierbares SVG-Favicon. Die .ico-Datei wird weiterhin von älteren Windows-Browsern, einigen Hostern und Code-Pfaden für angepinnte Sites verlangt. Dieser Generator liefert alle drei: PNGs in allen modernen Größen, ein skalierbares favicon.svg und eine favicon.ico, die die 16-, 32- und 48px-Bilder bündelt.

Was ist ein Maskable-Icon und warum braucht Android das?

Android schneidet Startbildschirm-Icons je nach Launcher zu Kreis, Squircle oder Rundungsquadrat. Ein Maskable-Icon hat eine Sicherheitszone in der Mitte (etwa 80% der Flaeche), sodass wichtige Logo-Teile nie abgeschnitten werden. Lass etwa 10% Rand um die Quelle.

Wohin mit den generierten Dateien?

Jede PNG in den public-Root deiner Site (oder /static) legen, das HTML-Snippet ins head der Seite kopieren und manifest.json verlinken. Apple Touch und Favicon stehen im HTML-head; PWA-Icons referenziert das Manifest.

Wozu Hintergrund- und Padding-Optionen?

Transparente Logos sehen auf Browser-Tabs gut aus, wirken aber schraeg, wenn Android oder iOS ein abgerundetes Rechteck dahinterlegen. Mit festem Hintergrund plus 8-12% Padding rendert die Kachel in jedem Launcher vorhersagbar.

Ähnliche Tools