Ein vollständiges Favicon-Set für Ihre Website erstellen
Was dieses Werkzeug erzeugt
Ein Favicon ist selten eine einzelne Datei. Browser, Smartphones und installierte Web-Apps greifen jeweils auf eine andere Auflösung zurück, deshalb braucht eine Website eine kleine Familie von Icons statt eines einzigen Bildes. Dieses Werkzeug geht von einer einzigen Quelle aus — einem hochgeladenen Bild, ein oder zwei Textzeichen oder einem Emoji — und erzeugt sie in jeder Größe, die eine moderne Website erwartet.
Die fertigen Icons kommen als PNG-Dateien zurück, zusammen mit einem site.webmanifest und einem HTML-Schnipsel, das sie in Ihre Seite einbindet, sodass keine Frage offen bleibt, welches Tag auf welche Datei zeigt.
Drei Ausgangspunkte
Sie können ein Bild in PNG, JPG, SVG oder WebP hochladen und es vom Werkzeug auf jede Icon-Größe herunterrechnen lassen. Für eine Text-Marke tippen Sie ein oder zwei Zeichen und wählen eine Schriftart und Textfarbe — praktisch, wenn das Logo noch nicht fertig ist. Der Emoji-Weg lässt Sie aus einer Auswahl greifen oder ein beliebiges Emoji einfügen, das Ihr System darstellt.
Egal welche Quelle Sie wählen, es gelten dieselben Stil-Einstellungen: Hintergrundfarbe, Eckenrundung über einen border-radius-Regler und ein Schalter für transparenten Hintergrund, damit Icons nicht auf einer vollflächigen Kachel sitzen müssen. Steht die Markenfarbe noch nicht fest, lassen sich im CSS-Gradient-Generator schnell Kombinationen ausprobieren und eine davon als Hintergrund übernehmen; und sind die Icons erst exportiert, gehört das Head-Markup, das sie deklariert, direkt neben die Tags, die der Meta-Tag-Generator schreibt.
Ein konkretes Beispiel
Angenommen, Sie tippen den Buchstaben A, setzen einen blauen Hintergrund und erhöhen den border-radius, um die Ecken abzurunden. Die Vorschau aktualisiert sich in allen Größen gleichzeitig, und der Download liefert favicon-16x16.png, favicon-32x32.png und favicon-48x48.png für Browser-Tabs und Windows-Kacheln, apple-touch-icon.png in 180×180 für iOS-Startbildschirme sowie android-chrome-192x192.png und android-chrome-512x512.png für Android- und PWA-Installationen — alles in einem einzigen ZIP.
Größen, Formate und die link-Tags
Jede Größe hat eine Aufgabe: 16×16 und 32×32 erscheinen in Browser-Tabs, 48×48 deckt Windows ab, 180×180 ist Apples Touch-Icon, und 192×192 und 512×512 versorgen Android und das Web-App-Manifest. Der erzeugte Schnipsel deklariert sie mit den Tags <link rel="icon">, <link rel="apple-touch-icon"> und <link rel="manifest"> sowie einem theme-color-Meta, fertig zum direkten Einfügen in Ihren <head>.
Die Ausgabe erfolgt als PNG statt als veraltete .ico-Datei mit mehreren Auflösungen, und jeder aktuelle Browser akzeptiert PNG-Favicons über diese link-Tags. Sollen abgerundete Icons in die Tab-Leiste übergehen, aktivieren Sie den transparenten Hintergrund, damit die Ecken frei bleiben statt ein farbiges Quadrat zu zeigen.