Favicons und Web-App-Icons sofort erstellen
Eine Quelle, alle Dateien, die eine moderne Website braucht: ein favicon.ico mit mehreren Auflösungen, ein vektorielles favicon.svg, Apple-Touch-Icons, Android-Launcher- und maskierbare Icons, ein Web-Manifest und das Head-Snippet, das alles verdrahtet.
Zu erzeugende Dateien
Das gehört in deinen <head>
Aktualisiert sich mit den angehakten Dateien. Leg das Paket ins Wurzelverzeichnis und füge diesen Block ein.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#3b82f6">
So funktioniert es
Quelle wählen
Ein Emoji, ein bis drei Buchstaben oder dein eigenes Logo. Eine Datei hochzuladen legt sie nur bereit: erzeugt wird erst, wenn du es verlangst.
Die Fläche gestalten
Form, Volltonfarbe oder Verlauf, Rand und Innenabstand. Die Vorschau zeichnet sich bei jeder Änderung neu.
Von Hand platzieren
Ziehen zum Verschieben, Mausrad zoomt zum Zeiger, dazu Drehung. Strg+Z macht jeden Schritt rückgängig.
Das Paket ausliefern
ZIP herunterladen, ins Wurzelverzeichnis legen und das Head-Snippet einfügen.
Ein echtes ICO mit mehreren Kacheln
Die Kacheln mit 16, 32 und 48 Pixeln werden als 32-Bit-BMP mit ordentlicher AND-Maske geschrieben, damit alte Windows-Shells und strenge Icon-Parser die Datei annehmen.
Echter Squircle
Die abgerundete Fläche ist eine Superellipse, dieselbe Kurvenfamilie, die iOS für App-Icons nutzt, und kein abgerundetes Rechteck, das so tut als ob.
Vektorielles favicon.svg
Emoji- und Buchstaben-Icons werden als echtes Vektormarkup exportiert und bleiben auf jedem Display und im Dunkelmodus scharf.
Ein korrektes iOS-Touch-Icon
Das Apple-Icon wird auf eine Farbe deiner Wahl reduziert, weil iOS Transparenz auf dem Homescreen als volles Schwarz darstellt.
Verkettet mit der übrigen Suite
Schick das fertige Icon direkt zum Komprimieren, Zuschneiden, Umwandeln oder zur Hintergrundentfernung, ohne es herunter- und wieder hochzuladen.
Nichts verlässt den Tab
Canvas und ein ZIP-Writer in deinem Browser. Kein Upload, kein API-Aufruf, kein Konto, und es funktioniert auch offline weiter.
Einmal in 1024 Pixeln gerendert, dann sauber verkleinert
Ein Emoji direkt in eine 16-Pixel-Kachel zu zeichnen ist der Grund, warum die meisten erzeugten Favicons matschig aussehen: Farb-Emoji-Schriften fallen auf ihre kleinste Bitmap-Fassung zurück. FaviconBolt rendert ein einziges 1024-Pixel-Master und leitet daraus jede Größe ab, was bei 16 Pixeln messbar 87% näher an einer idealen Verkleinerung liegt als direktes Zeichnen in dieser Größe. Ein optionaler Schärfungsdurchgang auf vormultipliziertem Alpha holt den Kantenkontrast zurück, den die Mittelung wegnimmt.
100% lokale Erzeugung
Dein Logo verlässt niemals deinen Rechner. Rendering, ICO-Binärdatei und ZIP entstehen alle auf der Seite, und die Illustrationen hier sind eingebettetes SVG, also wird auch nichts von einem CDN geladen.
Jede Datei, die ein Browser tatsächlich anfragt
Entpacke das ZIP im Wurzelverzeichnis deiner Website und füge den erzeugten Head-Block ein. Das Manifest trägt deinen echten Website-Namen, Start-URL und Scope statt eines Platzhalters, damit der Installationsdialog das Richtige anzeigt.
Die ICO-Kacheln sind BMP mit AND-Maske statt eingebetteter PNG-Ströme, das Apple-Touch-Icon wird deckend ausgeliefert, und das maskierbare Android-Icon ist randlos angelegt, damit die Systemmaske dein Motiv nicht zweimal beschneidet.
Häufige Fragen
QWas steckt in der Datei favicon.ico?+
Drei Icon-Kacheln, 16x16, 32x32 und 48x48, in einer Binärdatei gebündelt. Sie liegen als 32-Bit-BMP mit 1-Bit-AND-Maske vor, dem Format, das jeder Icon-Leser versteht. PNG-komprimierte Kacheln werden erst ab Windows Vista unterstützt, und manche Parser lehnen sie weiterhin ab.
QWarum hat das Apple-Touch-Icon einen deckenden Hintergrund?+
iOS ignoriert den Alphakanal bei Homescreen-Icons und legt alles Transparente auf Schwarz. Das Touch-Icon auf eine selbst gewählte Farbe zu reduzieren ist die einzige Möglichkeit, sein Aussehen nach der Installation zu steuern.
QWofür ist das maskierbare Icon?+
Android legt seine eigene Maske an, bei manchen Launchern ein Kreis, bei anderen ein Squircle. Ein maskierbares Icon wird randlos gezeichnet, mit dem Motiv in einer Schutzzone, damit das System zuschneiden kann, ohne dein Logo anzuschneiden.
QBekomme ich ein vektorielles favicon.svg?+
Ja, im Emoji- und im Buchstabenmodus ist es echtes Vektormarkup. Lädst du ein SVG-Logo hoch, bleibt auch das vektoriell. Bei einem Pixelbild betten wir das 512-Pixel-Rendering ins SVG ein und sagen das auch, statt so zu tun, als hätten wir ein JPEG nachgezeichnet.
QKann ich das Icon von Hand positionieren?+
Zieh die Arbeitsfläche zum Verschieben, scrolle zum Zoomen Richtung Zeiger und nutze den Drehregler. Pfeiltasten verschieben, Plus und Minus zoomen, 0 setzt zurück und Strg+Z geht den Verlauf zurück. Alt gedrückt halten zeigt das unberührte Original.
QWird irgendetwas hochgeladen?+
Nein. Dateien werden von deinem eigenen Browser dekodiert, gerendert und gepackt. Es gibt zu keinem Zeitpunkt einen Serveraufruf, und genau deshalb funktioniert das Werkzeug auch ohne Netz.