MiServe DevTools

Ihre Sticker

Heften Sie hier Tools an. Sie werden in diesem Browser gespeichert.

Favicon- & App-Icon-Generator

Erzeugen Sie aus einem einzigen Bild ein komplettes Favicon-Set: favicon.ico, PNG-Icons, das Apple Touch Icon, Android- und Maskable-Icons, ein Web-Manifest und das HTML, um alles einzubinden.

Optionen
Skalierung
Hintergrund
0%
0%

Füllt das Apple Touch Icon und das Maskable-Icon, die nicht transparent sein können.

Wird ins Manifest und in das theme-color-Tag geschrieben. Manche Browser färben damit ihre eigene Oberfläche ein.

Steht auf dem Home-Bildschirm unter dem Icon. Dort ist Platz für etwa 12 Zeichen.

Läuft mit WebAssembly in Ihrem Browser. Nichts, was Sie einfügen, wird hochgeladen.

Über dieses Tool

Welche Datei welche Plattform verwendet

Ein Desktop-Browser nimmt das Icon für Tabs und Lesezeichen aus <link rel="icon">: in der Regel das PNG mit 16 Pixeln auf einem normalen Bildschirm und das mit 32 Pixeln auf einem hochauflösenden. Nennt eine Seite kein Icon, ruft der Browser stattdessen /favicon.ico ab.

iPhone und iPad verwenden apple-touch-icon.png mit 180 Pixeln, wenn jemand die Website zum Home-Bildschirm hinzufügt. Android und installierte Web-Apps lesen die Liste icons im Web-Manifest: 192 Pixel für den Home-Bildschirm, 512 Pixel für den Splash-Screen und das Maskable-Icon, wenn der Launcher Icons selbst in Form bringt. mstile-150x150.png ist für Kacheln in älteren Windows-Versionen gedacht und nur der Vollständigkeit halber dabei.

Warum favicon.ico immer noch wichtig ist

Browser rufen /favicon.ico von sich aus für alles ab, was keinen HTML-Head hat, in dem ein Icon stehen könnte: ein PDF, ein Bild oder eine JSON-Antwort, die in einem Tab geöffnet wird. Feedreader, Crawler und andere Tools suchen oft ebenfalls dort. Das ICO-Format kann mehrere Größen in einer Datei enthalten. Diese hier enthält 16, 32 und 48 Pixel, jeweils als PNG-Daten gespeichert, was Windows seit Vista und jeder aktuelle Browser lesen kann.

Maskable-Icons und die Safe Zone

Android-Launcher schneiden App-Icons als Kreis, abgerundetes Quadrat oder in eine andere Form zu. Ein normales Icon wird dafür meist verkleinert und auf eine weiße Fläche gesetzt. Ein Maskable-Icon dagegen bedeckt das ganze Quadrat mit einem deckenden Hintergrund und hält alles Wichtige innerhalb der Safe Zone, eines zentrierten Kreises, dessen Durchmesser 80 % der Icon-Breite beträgt. Alles außerhalb dieses Kreises kann abgeschnitten werden.

Dieses Tool füllt das Maskable-Icon mit der Farbe des App-Hintergrunds und lässt auf jeder Seite mindestens 14 % Rand um Ihre Grafik. Prüfen Sie die runde Vorschau und erhöhen Sie den Innenabstand, wenn eine Ecke der Grafik abgeschnitten wird.

Apple ignoriert Transparenz

iOS übernimmt in einem Icon auf dem Home-Bildschirm keine transparenten Pixel: Es färbt sie schwarz und rundet die Ecken selbst ab. Das hier erzeugte Apple Touch Icon ist deshalb immer deckend und quadratisch, mit der Farbe des App-Hintergrunds gefüllt, mit mindestens 8 % Rand und ohne Ihren Eckenradius.

So funktioniert es

Die Icons werden von den Bildpaketen von Go mit Catmull-Rom-Resampling gezeichnet, die zu WebAssembly kompiliert sind und in einem Hintergrund-Thread Ihres Browsers laufen. Eine sehr große Vorlage wird zuerst in der Seite verkleinert, damit jede Änderung schnell neu gezeichnet wird. Ihr Bild wird nicht hochgeladen.

Fragen

Wie groß sollte das Ausgangsbild sein?

Ein quadratisches Bild mit 512 × 512 Pixeln oder mehr, idealerweise ein PNG mit transparentem Hintergrund. Das größte Icon im Set hat 512 Pixel, eine kleinere Vorlage muss also hochskaliert werden und wirkt unscharf.

Brauche ich noch eine favicon.ico-Datei?

Ja. Browser greifen auf /favicon.ico zurück, wenn eine Seite oder eine Datei kein Icon nennt, und auch manche Crawler und Feedreader suchen nach dieser Datei. Lassen Sie sie im Stammverzeichnis der Website liegen, auch wenn Sie zusätzlich PNG-Icons einbinden.

Wohin kommen die Dateien?

Entpacken Sie sie ins Stammverzeichnis Ihrer Website und fügen Sie das HTML-Snippet in den Head jeder Seite ein. Snippet und Manifest verwenden Pfade, die im Stammverzeichnis beginnen, etwa /favicon.ico. Passen Sie sie an, wenn die Dateien woanders liegen.

Warum zeigt mein Browser noch das alte Favicon?

Browser cachen Favicons sehr lange. Öffnen Sie die Adresse des Icons direkt, zum Beispiel /favicon.ico, und laden Sie sie neu, oder leeren Sie den Cache für die Website. Ein privates Fenster zeigt, was ein neuer Besucher sieht.

Wird mein Bild hochgeladen?

Nein. Das Bild wird von Ihrem Browser gelesen, und jedes Icon wird mit WebAssembly auf Ihrem Gerät erzeugt. Das Tool stellt mit dem Bild keine Netzwerkanfrage.

Weitere Tools in Grafik