Icon-Werkstatt
Ein Logo rein, ein komplettes Set raus: Browser-Tabs, Navigationslogo, iPhone-Home-Bildschirm, Android / PWA, Chrome-Erweiterung, runde Avatare. Jede Größe wird nach den veröffentlichten Regeln der Plattform gerendert und benannt und in einer echten Oberfläche in der Größe gezeigt, in der sie tatsächlich erscheint.
Bild hierher ziehen oder klicken zum Auswählen
JPG / PNG / WebP / AVIF / GIF (nur erstes Bild); 2560px oder mehr empfohlen.
Ein quadratisches Logo mit 1024×1024 ist die empfohlene Quelle; nicht-quadratische funktionieren ebenfalls und werden proportional mit Innenabstand eingebettet.
Was du tatsächlich bekommst
Drei Fallen, die man kennen sollte
iOS-Icons können kein Alpha tragen
Gibst du ein PNG mit Alpha an apple-touch-icon.png, füllt das System transparente Pixel mit Schwarz — ein dunkler Ring auf einem dunklen Telefon, der wie ein kaputtes Asset aussieht. Diese Größen werden hier zwingend deckend erzeugt.
maskable garantiert nur die mittleren 80%
Android-Adaptive-Icons werden auf die Form des Launchers maskiert (Kreis, Squircle, Tropfen), und nur die mittleren 80% sind garantiert sichtbar: der sichere Kreis bei 512 misst nur 410px. Schiebst du Schrift oder eine wichtige Form an den Rand, wird sie auf dem Home-Bildschirm abgeschnitten.
Bei 16px überlebt nur eine Silhouette
Ein Favicon im Tab ist 16×16 — insgesamt 20 Pixel. Haarlinien, Verläufe und kleine Schrift verschwinden, nur Farbflächen bleiben. Vergrößere nach dem Erzeugen die Vorschau auf 8× und schau dir den Umriss an; ist er nicht erkennbar, vereinfache die Marke.
Häufige Fragen
Wenn die Dateien stimmen, die Live-Seite sie aber ignoriertWird mein Bild irgendwo hochgeladen?
Nein. Dekodieren, Einbetten und Kodieren laufen in der Browser-Canvas, und die Seite hat keinen Datei-Endpunkt — öffne das Netzwerk-Panel: außer den eigenen statischen Assets der Seite trägt nichts dein Bild.
Müssen alle 20 Dateien ausgeliefert werden?
Nein. Das Minimum ist favicon.ico (ältere Clients fragen nichts anderes an) plus ein PWA-Icon (192 oder 512, das prüft die Installierbarkeit). Ergänze, was zu deinen Zielplattformen passt. Die iOS-Home-Bildschirm-Gruppe hat 4 Größen (180 / 167 / 152 / 120); nur für iPhone reicht 180.
Ich habe das Icon ersetzt, der Tab zeigt noch das alte?
Favicons gehören zu den hartnäckigsten Caches im Web und überleben oft das HTML, das sie referenziert. Lokal hart neu laden (⌘/Ctrl + Shift + R); in Produktion wartest du zusätzlich CDN- und Browser-Cache ab. Für sofortige Prüfung häng ?v=2 an das href — eine neue URL erzwingt einen Refetch. Nichts davon betrifft die erzeugten Dateien.
Brauche ich favicon.ico und die PNGs beides?
Ja, und du musst nichts aufteilen. favicon.ico deckt ältere Clients ab, die /favicon.ico direkt anfragen, und enthält bereits 16 / 32 / 48, der Browser wählt nach Anzeigedichte; die PNGs sind explizite Deklarationen für moderne Browser und Feed-Reader.
Warum sieht favicon.svg beim Zoomen unscharf aus?
Weil diese zwei Dateien Bitmaps in einem SVG-Mantel sind, keine echten Vektoren. Eine Bitmap lässt sich nicht in einen Vektor umwandeln — nachgezeichnete Pfade bei 16px sind reines Rauschen, ehrliches Einbetten ist besser. Sie existieren, damit Dateinamen und Referenzen zusammenpassen; für Produktion lass eine echte Vektor-SVG unter demselben Namen exportieren.
Wie groß sollte die Quelle sein? Darf sie nicht quadratisch sein?
Ein quadratisches Logo mit 1024 × 1024 deckt die größte Ausgabe exakt ab. Nicht-quadratisch geht auch: es wird proportional in der Mitte der Fläche eingebettet, mit Innenabstand auf der kurzen Achse, nie gestreckt, und der Innenabstand folgt dem Regler.
Was heißt „Quelle zu klein“ auf einer Karte?
Die Fläche dieser Größe übersteigt den nutzbaren Bereich deiner Quelle, diese Pixel können also nur hochinterpoliert werden und sehen weich aus — das Problem liegt am Input, nicht am Export. Liefere eine größere Quelle oder schalte „nicht hochskalieren“ ein, um native Pixel einzubetten und das Pixelraster statt Unschärfe zu sehen.
Ich habe Quadrat gewählt, warum ist der Avatar quadratisch?
War er immer. 512 exportiert eine quadratische Fläche, den Kreis legt die Plattform nach dem Hochladen an. Bei Form „Kreis“ hat das exportierte PNG transparente Ecken, die manche Avatar-Flächen weiß oder schwarz füllen — im Zweifel quadratisch lassen.
Wird beim Ziehen des Innenabstand-Reglers ständig neu gerechnet?
Es wird gerechnet, aber gebündelt: gerendert wird, wenn du anhältst, und eine weitere Änderung bricht den vorigen Lauf ab. Alte Ergebnisse bleiben während des Renderns sichtbar und werden am Ende atomar getauscht, das Ziehen lässt die Seite also nie zu Skeletten zusammenfallen.
Was ist sonst in der ZIP?
Eine README.txt: Quellname und Maße, der Zuschnittbereich falls vorhanden, die Renderparameter dieses Laufs (Form / Innenabstand / Hintergrund / Transparenz), die vollständige Dateiliste und beide Snippets. Eine Kollegin kann das Paket ohne Rückfragen übernehmen. Das Archiv heißt etwa icons-20261024-1208.zip, mit lokalem Zeitstempel.
Brauchst du stattdessen Social-Media-Größen?Nutze den GrößenkonverterNutze die Stapelkomprimierungden Leitfaden