Favicon-, App-Icon- & PWA-Manifest-Generator
Binäre favicon.ico (16x16, 32x32, 48x48), iOS Apple-Touch-Icons, maskierbare Android-PWA-Icons mit 80%-Sicherheitszone und site.webmanifest erstellen.
Online-WerkzeugeSicherheitszone für maskierbare Icons & Abzeichen-Geometrie
Ab 20 % bleibt Ihr Logo sicher im 80-%-Kreis der Android-Sicherheitszone
Live-Multi-Plattform-Vorschau
Echtzeit-Simulation für Google-Suchergebnisse (SERP), Browser-Tabs, Apple iOS & adaptive Android-Masken
Prüfen Sie in Echtzeit, wie Google Ihr rundes 48×48-px-Favicon neben der Domain-Pfadnavigation in den Suchergebnissen darstellt.
Prüfen Sie in Echtzeit, wie Google Ihr rundes 48×48-px-Favicon neben der Domain-Pfadnavigation in den Suchergebnissen darstellt.
Transparenzen werden automatisch mit Ihrer Hintergrundfarbe hinterlegt, damit iOS den Alphakanal niemals schwarz färbt.
Web-App-Manifest (site.webmanifest) Metadaten
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Offizielle Referenztabelle für Favicon-, Apple-Touch-Icon- & PWA-Manifest-Größen
Vollständige Spezifikation nach Google Search Central, Apple iOS Human Interface Guidelines und W3C Web App Manifest
| Dateiname | Auflösung (px) | Kodierungsstandard | Zielplattform & Einsatzbereich | Technische Richtlinie |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Binärer Microsoft ICONDIR-Container | Klassische Browser & Google-Suchcrawler | Muss zwingend eine echte 48×48-px-Ebene enthalten; niemals eine bloße PNG-Datei in .ico umbenennen. |
| favicon-16x16.png | 16×16 px | 32-Bit RGBA PNG | Standard-Desktop-Browser-Tabs (1x) & Lesezeichen | Klare Silhouette für optimale Erkennbarkeit auf 16×16 Pixeln. |
| favicon-32x32.png | 32×32 px | 32-Bit RGBA PNG | Retina-Desktop-Browser-Tabs (2x HiDPI) | Primäres Tab-Symbol auf hochauflösenden Monitoren. |
| favicon-48x48.png | 48×48 px | 32-Bit RGBA PNG | Google-Suchergebnisse (SERP) auf Mobilgeräten & Desktop | Mindestgröße laut Google Search Central (Vielfaches von 48 px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | 32-Bit RGBA PNG | Hochauflösende Google-SERP-Darstellung & Desktop-Verknüpfungen | Empfohlenes 2x-Vielfaches von 48 px für gestochen scharfe Darstellung im runden SERP-Badge. |
| apple-touch-icon.png | 180×180 px | 24-Bit Opakes PNG | Apple iPhone & iPad Home-Bildschirm (Web-Clips) | Erfordert einen deckenden Hintergrund; transparente Pixel werden unter iOS schwarz (#000000) dargestellt. |
| android-chrome-192x192.png | 192×192 px | 32-Bit PNG (purpose: any) | Android-Startbildschirm & App-Übersicht | Pflichtbestandteil für die PWA-Installierbarkeit in Google Lighthouse. |
| android-chrome-512x512.png | 512×512 px | 32-Bit PNG (purpose: any) | Android-PWA-Startbildschirm (Splash Screen) & WebAPK | Hochauflösende Master-Grafik für die Generierung des App-Startbildschirms. |
| maskable-icon-512x512.png | 512×512 px | Opakes PNG (purpose: maskable) | Adaptive Android-Launcher-Formen (Kreis, Squircle, Tropfen) | Wichtige Bildelemente müssen innerhalb des zentralen 80-%-Sicherheitskreises liegen (mind. 20 % Innenabstand). |
Muss zwingend eine echte 48×48-px-Ebene enthalten; niemals eine bloße PNG-Datei in .ico umbenennen.
Klare Silhouette für optimale Erkennbarkeit auf 16×16 Pixeln.
Primäres Tab-Symbol auf hochauflösenden Monitoren.
Mindestgröße laut Google Search Central (Vielfaches von 48 px: 48×48, 96×96, 144×144).
Empfohlenes 2x-Vielfaches von 48 px für gestochen scharfe Darstellung im runden SERP-Badge.
Erfordert einen deckenden Hintergrund; transparente Pixel werden unter iOS schwarz (#000000) dargestellt.
Pflichtbestandteil für die PWA-Installierbarkeit in Google Lighthouse.
Hochauflösende Master-Grafik für die Generierung des App-Startbildschirms.
Wichtige Bildelemente müssen innerhalb des zentralen 80-%-Sicherheitskreises liegen (mind. 20 % Innenabstand).
Anleitung: Normgerechte Favicons, Apple-Touch-Icons & PWA-Manifeste erstellen
Fünf Schritte für optimale Sichtbarkeit in Google-Suchergebnissen und auf mobilen Endgeräten
Grafikquelle im 3-in-1-Studio wählen
Laden Sie ein vorhandenes SVG- oder PNG-Logo hoch, gestalten Sie ein 1–3-stelliges Buchstaben-Monogramm oder wählen Sie ein Vektor-Emoji.
Dunkelmodus-Kontrast & Sicherheitszone prüfen
Beachten Sie die automatische Dunkelmodus-Kontrastprüfung. Stellen Sie den Innenabstand (ab 20 % für Android Maskable) so ein, dass Ihr Motiv im 80-%-Sicherheitskreis liegt.
Live-Vorschau auf allen vier Plattformen kontrollieren
Begutachten Sie Ihr Icon in den Google-Suchergebnissen (SERP), auf hellen und dunklen Browser-Tabs, als iOS-180×180-Squircle und unter den vier Android-Maskenformen.
Web-App-Manifest konfigurieren & ZIP-Archiv laden
Tragen Sie Anwendungsname, Kurztitel und Themenfarbe ein und klicken Sie auf Komplettes Icon-Paket herunterladen (.ZIP), um alle 10 Produktionsdateien zu erhalten.
Dateien ins Stammverzeichnis kopieren & Code einbinden
Entpacken Sie das ZIP-Archiv in Ihr public/-Verzeichnis und fügen Sie den generierten HTML5-<head>-Code oder die Next.js-Metadata-Konfiguration in Ihr Projekt ein.
100 % Lokale Binär-Kodierung im Browser & DSGVO-Konformität
Sämtliche Skalierungen, die Byte-Synthese des Microsoft-ICONDIR-Headers, die Luminanzanalyse sowie die ZIP-Paketierung erfolgen vollständig lokal im Arbeitsspeicher Ihres Endgeräts. Keine einzige Grafikdatei verlässt Ihren Browser.
Häufig gestellte Fragen zu Favicons, iOS-Web-Clips & PWA-Icons
Technische Antworten zu Google-SERP-Anforderungen, Binär-Containern und adaptiven Android-Icons
Q:Warum schneiden Samsung- und Xiaomi-Geräte die Ecken meines PWA-Logos ab, obwohl das Bild 512×512 Pixel groß ist?
Android-Hersteller legen über jedes installierte PWA-Icon eine eigene geometrische Maske (Kreis, Squircle oder Tropfen), die bis zu 20 % des äußeren Randbereichs wegschneidet. Nur der innere Kreis mit 80 % Durchmesser (Radius = 204,8 px bei einer 512×512-Grafik) bleibt auf allen Geräten garantiert sichtbar. Mit einem Innenabstand ab 20 % im obigen Regler liegt Ihr Motiv immer im sicheren Zentrum.
Q:Weshalb verlangt Google für die Suchergebnisse Vielfache von 48×48 Pixeln statt der klassischen 32×32 Pixel?
In der mobilen und Desktop-Suche stellt Google das Website-Icon in einem runden 28×28-CSS-Badge dar, das auf modernen Retina- und OLED-Smartphones mit 2-facher oder 3-facher Pixeldichte gerendert wird. Ein 16×16- oder 32×32-Bild wirkt dort unscharf. Deshalb akzeptiert der Googlebot ausschließlich Vielfache von 48 Pixeln (48×48, 96×96 oder 144×144 px).
Q:Wird der alte Dateiname apple-touch-icon-precomposed.png unter aktuellem iOS noch gebraucht?
Nein. Bis iOS 6 legte Apple automatisch einen künstlichen Lichtreflex über jedes Home-Bildschirm-Icon, sofern die Datei nicht den Zusatz -precomposed trug. Seit iOS 7 rendert Safari die Datei apple-touch-icon.png (180×180 px) unverfälscht und wendet lediglich die abgerundete Squircle-Maske an.
Q:Wie erkennt der Dunkelmodus-Prüfer automatisch, ob mein transparentes Logo in dunklen Browser-Tabs verschwindet?
Unsere Engine tastet alle sichtbaren Pixel (Alphawert > 32) Ihrer Grafik ab und berechnet die wahrgenommene relative Helligkeit nach dem ITU-R-BT.709-Standard (0,2126 R + 0,7152 G + 0,0722 B). Liegt die durchschnittliche Luminanz unter 25 %, hebt sich das Motiv kaum noch vom dunklen Tab-Hintergrund (#202124) ab, und der Generator schlägt sofort ein kontrastreiches Abzeichen vor.
Q:Darf die Datei site.webmanifest auch auf einem separaten CDN oder einer Subdomain gehostet werden?
Ja, allerdings verlangt der Browser beim Abruf eines Web-App-Manifests von einer anderen Domain zwingend einen gültigen CORS-Header (Access-Control-Allow-Origin). Am zuverlässigsten und schnellsten ist es, die site.webmanifest gemeinsam mit den generierten Icons direkt im Stammverzeichnis (/public) der Hauptdomain bereitzustellen.
Was ist Favicon-, App-Icon- & PWA-Manifest-Generator?
Wer schon einmal nach dem Launch einer Webanwendung rätseln musste, warum das eigene Markenlogo auf dunklen Browser-Tabs spurlos verschwindet oder auf einem Smartphone unschön angeschnitten wird, kennt die Tücken moderner Icon-Standards. Ein einzelnes Bildchen im Stammverzeichnis reicht heute längst nicht mehr aus: Während Desktop-Browser auf 4K- und Retina-Monitoren gestochen scharfe 32×32-Pixel-Ebenen anfordern, verlangt die Google-Suche ein striktes Vielfaches von 48×48 Pixeln, Apple iOS benötigt ein vollständig deckendes 180×180-Quadrat ohne Transparenz, und Android-Launcher schneiden aus jedem PWA-Icon dynamisch eigene Formen wie Kreise, Squircles oder Tropfen aus. Unser Favicon-, App-Icon- & PWA-Manifest-Generator bündelt all diese Anforderungen in einem einzigen lokalen Arbeitsgang über native HTML5-<canvas>-, ArrayBuffer- und DataView-Operationen direkt im Arbeitsspeicher Ihres Browsers.
Praxisbeispiel: Sanierung eines industriellen B2B-Kundenportals für Android-Tablets und dunkle Browser-Themes
Bei der Einführung eines webbasierten Wartungs- und Telemetrieportals fiel im Praxistest auf, dass das dunkelblaue Zahnrad-Signet (relative Vordergrund-Luminanz von 14,2 % auf transparentem Grund) in der dunklen Oberfläche von Microsoft Edge und Chrome schlicht unsichtbar war. Zudem wurden auf Android-Tablets im Außendienst die äußeren Zahnradspitzen abgeschnitten, weil das ursprüngliche Icon nur 6 % Randabstand besaß. Im obigen Studio hinterlegte das Entwicklerteam die Vektorgrafik mit einem Obsidian-Smaragd-Verlauf (#0F172A → #10B981) und erhöhte den Innenabstand auf 24 %. Dadurch rückte das gesamte Motiv sicher in den 80-%-Sicherheitskreis (r = 204,8 px bei 512×512 px), und das fertige 10-teilige Produktionspaket war mit 21,6 KB sofort einsatzbereit.
Technische Prüftabelle: Renderverhalten & Speicherbedarf im B2B-Portal-Benchmark (21,6 KB)
| Zieldatei im Archiv | Maße & Dateigröße | Binär- & Farbkanal-Aufbau | Technische Schutzwirkung im Betrieb |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,8 KB) | Byte 0–5 Header + 3×16 Byte Directory | Erfüllt die 48-px-Mindestregel des Google-Suchcrawlers |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3,6 KB) | 32-Bit RGBA für 1x- und 2x-SERP-Darstellung | Scharfe Kanten im runden 28×28-CSS-Badge der Google-Suche |
| apple-touch-icon.png | 180×180 px (5,4 KB) | 24-Bit deckend ohne Vorab-Abrundung | Verhindert schwarze Flächen durch fehlenden iOS-Alphakanal |
| maskable-icon-512x512.png | 512×512 px (7,8 KB) | Vollflächig + 24 % Sicherheitsrand | Kein Anschnitt bei Kreis-, Tropfen- oder Squircle-Masken |
Warum die lokale Byte-Synthese im Browser herkömmlichen Konvertern überlegen ist
- Spezifikationskonformer
ICONDIR-Binärcontainer: Unser Encoder verpackt drei echte Auflösungen (16×16, 32×32 und 48×48 Pixel) auf Byte-Ebene in eine einzigefavicon.ico, statt lediglich die Dateiendung einer PNG-Grafik zu ändern. - Optische Sicherheitszonen-Kontrolle in Echtzeit: Das zuschaltbare 80-%-Kreis-Overlay zeigt sofort, welche Bildbereiche auf Android-Geräten garantiert erhalten bleiben.
- DSGVO-konforme Verarbeitung ohne Server-Upload: Unveröffentlichte Markenlogos und interne Projektgrafiken verlassen zu keinem Zeitpunkt Ihr Endgerät.
Geschichte und Ursprung
Als Microsoft im März 1999 den Internet Explorer 5 veröffentlichte, ahnte kaum jemand, dass eine unscheinbare Datei namens favicon.ico zum weltweiten Webstandard werden würde. Ursprünglich lud der Browser die 16×16 Pixel kleine 16-Farben-Grafik nur dann herunter, wenn ein Nutzer eine Seite ausdrücklich zu seinen „Favoriten“ hinzufügte – weshalb findige Webmaster die Server-Logdateien nutzten, um anhand der favicon.ico-Abrufe zu zählen, wie oft ihre Seite als Lesezeichen gespeichert wurde. Mit der Einführung von Apple iPhone OS im Jahr 2007 änderte sich der Anspruch radikal: Über apple-touch-icon.png (später ergänzt durch -precomposed, um den künstlichen iOS-Glanzeffekt zu umgehen) rückten Websites direkt neben native Apps auf den Home-Bildschirm. Mit dem W3C Web App Manifest (site.webmanifest) und den adaptiven Masken unter Android entstand schließlich die heutige Multi-Plattform-Architektur.