Favicon erstellen

Logo ablegen, Innenabstand, Hintergrund und Ecken wählen und alle Icons herunterladen, die eine Website braucht – samt HTML zum Einfügen.

Über dieses Tool

Alle Icons für Ihre Website aus einem Bild

Browser, iPhones und Android-Geräte wollen jeweils eigene Icons. Dieses Werkzeug erstellt sie alle auf einmal, auf Ihrem Gerät.

Echtes ICO mit mehreren Größen

favicon.ico enthält 16, 32 und 48 px, damit Browser-Tab, Lesezeichen und Windows-Taskleiste jeweils ein scharfes Icon bekommen. Kleine Größen werden stufenweise verkleinert, feine Linien bleiben erhalten.

Bereit fürs Smartphone

apple-touch-icon.png (180 px) für den iPhone-Homescreen, Icons mit 192 und 512 px für Android und eine site.webmanifest mit Name und Designfarbe Ihrer Website.

Vor dem Download sehen

Eine Browser-Tab-Vorschau in Hell und Dunkel und alle Größen nebeneinander. PNG-, JPG-, WebP- und SVG-Logos funktionieren; Transparenz bleibt erhalten, wo sie erlaubt ist.

So geht's

  1. Ein Logo oder Bild ablegen (PNG, JPG, WebP oder SVG) oder mit Strg + V einfügen.
  2. Einpassen mit Rand oder Füllen und zuschneiden wählen, dann Innenabstand, Hintergrund und abgerundete Ecken einstellen.
  3. Name und Designfarbe der Website für das Web-Manifest eingeben.
  4. Auf Favicon erstellen klicken, das ZIP herunterladen und den HTML-Code in den <head> Ihrer Seite kopieren.

Häufig gestellte Fragen

Werden meine Bilder auf einen Server hochgeladen?

Nein. Jedes Bild wird direkt in Ihrem Browser-Tab mit Canvas, Web Workers und WebAssembly gelesen, verarbeitet und gespeichert. Es wird nichts hochgeladen, gespeichert oder protokolliert.

Welche Dateien sind im ZIP?

favicon.ico (16, 32 und 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest und eine HTML-Datei mit den Tags zum Einfügen. Mit einer SVG als Vorlage kommt favicon.svg dazu.

Wohin kommen die Favicon-Dateien?

In das Stammverzeichnis Ihrer Website, neben die Startseite. Den HTML-Code fügen Sie in den <head> jeder Seite ein. Browser suchen /favicon.ico außerdem von selbst.

Warum hat das Apple-Icon einen Hintergrund?

iOS zeigt transparente Homescreen-Icons auf Schwarz. Bleibt der Hintergrund transparent, bekommt nur das Apple-Icon einen weißen; die Ecken rundet iOS selbst ab.

Kann ich ein Favicon aus einer SVG erstellen?

Ja. Das ZIP enthält dann auch favicon.svg mit Ihrem Innenabstand, Hintergrund und Ecken – moderne Browser bevorzugen es, weil es in jeder Größe scharf ist. ICO und PNGs werden aus der SVG mit 1024 px gezeichnet und verkleinert, so bleibt auch die 16-px-Version scharf.

Ist es kostenlos, und gibt es ein Wasserzeichen?

Ja, es ist ohne Konto kostenlos nutzbar, und Toolula fügt nie ein Wasserzeichen hinzu. Der kostenlose Plan hat Fair-Use-Limits; Toolula Pro, ein optionaler Plan, hebt sie an.