Um ein Favicon zu erstellen, ziehen Sie ein quadratisches PNG, JPG, WebP oder SVG in das Feld oben, wählen als Hintergrund „Transparent“ oder „Volltonfarbe“ und etwas Innenabstand und klicken auf „Favicons erstellen“. Sie erhalten favicon.ico (16, 32 und 48 px), PNGs in 16 und 32 px, ein Apple Touch Icon mit 180×180, Android-Icons in 192 und 512 px, ein site.webmanifest und das HTML – in einem ZIP.
So nutzen Sie das Tool Favicon erstellen
- 1
Ausgangsbild wählen
Ziehen Sie eine PNG-, JPG-, WebP- oder SVG-Datei hinein. Am besten eignet sich ein quadratisches Bild; ein nicht quadratisches wird auf der Fläche zentriert, nicht verzerrt.
- 2
Hintergrund und Innenabstand festlegen
Lassen Sie den Hintergrund auf „Transparent“ oder wählen Sie „Volltonfarbe“, und geben Sie Ihrem Icon mit dem Regler für den Innenabstand (0–20 %) etwas Luft.
- 3
Auf „Favicons erstellen“ klicken
Das Tool rendert jede Größe in Ihrem Browser und baut daraus die ICO-Datei, die PNG-Icons und das Web-Manifest.
- 4
Herunterladen und einbinden
Laden Sie das ZIP herunter, legen Sie die Dateien ins Stammverzeichnis Ihrer Website und kopieren Sie die angezeigten Zeilen unter „HTML für den <head>“ in den Head-Bereich Ihrer Seiten.
Welche Dateien erzeugt der Favicon-Generator?
Browser, Smartphones und Betriebssysteme suchen jeweils nach einem etwas anderen Icon – deshalb reicht ein einzelnes Bild nicht. Dieser Favicon Generator erzeugt den Satz, den die meisten Websites brauchen: favicon.ico mit Versionen in 16, 32 und 48 Pixeln in einer Datei; favicon-16x16.png und favicon-32x32.png für Browser, die PNG bevorzugen; apple-touch-icon.png in 180×180 für die Home-Bildschirme von iPhone und iPad; sowie android-chrome-192x192.png und android-chrome-512x512.png für Android und installierte Web-Apps.
Außerdem schreibt er ein site.webmanifest für Android und installierte Web-Apps sowie eine Datei favicon-html.txt mit dem HTML-Schnipsel für Ihre Seiten. Alles landet in einem ZIP, sodass Sie nichts von Hand umbenennen oder skalieren müssen.
Dieselben Link-Tags werden nach dem Erstellen auch auf der Seite angezeigt. Kopieren Sie sie in den Head-Bereich Ihrer HTML-Vorlage oder in die Head-Einstellungen Ihres CMS oder Frameworks und laden Sie die Dateien ins Stammverzeichnis Ihrer Website hoch.
Favicon-Größen, Transparenz und das Apple Touch Icon
Favicons werden sehr klein angezeigt, deshalb überleben einfache Formen am besten. Ein Icon mit 16 px bietet Platz für einen Buchstaben oder ein kräftiges Symbol, nicht für ein ganzes Logo mit Slogan. Ist Ihr Logo detailreich, nehmen Sie nur die Bildmarke oder den Anfangsbuchstaben als Ausgangsbild und prüfen Sie die Ergebnisse in 16 und 32 px, bevor Sie sie veröffentlichen.
Ein transparenter Hintergrund lässt das Icon auf hellen und dunklen Browser-Tabs sauber wirken. Die Ausnahme ist das Apple Touch Icon: iOS zeigt transparente Icons auf Schwarz, deshalb bekommt diese Datei immer einen festen Hintergrund. Der Innenabstand fügt Raum um die Grafik hinzu, damit Icons, die bis an den Rand reichen, auf Home-Bildschirmen weniger gedrängt wirken.
Ist Ihre Vorlage ein SVG, wird es vor dem Verkleinern in vierfacher Größe gerastert, sodass selbst das 512-px-Icon scharf bleibt. Bei PNG- oder JPG-Vorlagen starten Sie mit mindestens 512×512 Pixeln, damit das größte Icon nicht hochskaliert werden muss.
PNG in ICO umwandeln, ohne etwas zu installieren
Das ICO-Format ist alt, aber weiterhin nützlich: Viele Browser und Tools fragen standardmäßig favicon.ico im Stammverzeichnis einer Website ab, auch wenn kein HTML-Tag darauf verweist. Eine ICO-Datei mit mehreren Größen zu bauen, erfordert normalerweise ein Grafik-Plug-in oder ein Kommandozeilen-Tool. Hier ist die Umwandlung von PNG in ICO Teil desselben Klicks, der auch alle anderen Icons erzeugt.
Wenn Sie hier eine favicon.ico erstellen, geschieht das vollständig in Ihrem Browser. Ihr Logo wird nie auf die Server von Krawly hochgeladen und nichts wird gespeichert – wichtig, wenn Marke oder Produkt noch nicht veröffentlicht sind. Kostenlos, ohne Anmeldung und ohne Wasserzeichen auf Ihren Icons.
Tipps für beste Ergebnisse
- Nutzen Sie ein quadratisches Ausgangsbild von mindestens 512×512 px oder ein SVG, damit auch die größten Icons scharf bleiben.
- Vereinfachen Sie für kleine Größen: Ein einzelner Buchstabe oder ein Symbol ist bei 16 px viel besser lesbar als ein ganzes Logo.
- Reicht Ihre Grafik bis an den Rand, geben Sie 5–10 % Innenabstand, damit runde Masken auf dem Home-Bildschirm nichts abschneiden.
- Wählen Sie eine Volltonfarbe passend zu Ihrer Marke, denn das Apple Touch Icon bekommt ohnehin immer einen Hintergrund.
- Browser speichern Favicons hartnäckig zwischen; testen Sie nach dem Austausch in einem privaten Fenster, um das neue Icon zu sehen.
Häufige Fragen
Welche Favicon-Größen brauche ich?
Praktisch ist eine favicon.ico mit 16, 32 und 48 px, PNG-Favicons in 16 und 32 px, ein Apple Touch Icon mit 180×180 sowie Icons in 192 und 512 px für Android, auf die ein Web-Manifest verweist. Genau diesen Satz erzeugt der Generator aus einem einzigen Bild.
Wie binde ich das Favicon in meine Website ein?
Entpacken Sie die Dateien ins Stammverzeichnis Ihrer Website und kopieren Sie die nach dem Erstellen angezeigten HTML-Zeilen – auch als favicon-html.txt gespeichert – in den Head-Bereich Ihrer Seiten. Diese Link-Tags sagen Browsern und Geräten, wo Ihre Icons und das Manifest liegen.
Kann ich ein SVG-Logo als Vorlage verwenden?
Ja. SVG-Vorlagen werden in vierfacher Größe gerastert und dann auf jede Größe verkleinert, die Icons werden also scharf. PNG, JPG und WebP funktionieren ebenfalls; verwenden Sie dann ein Bild, das mindestens so groß ist wie das 512-px-Icon, das Sie haben möchten.
Was passiert, wenn mein Bild nicht quadratisch ist?
Es wird auf einer quadratischen Fläche zentriert und nicht verzerrt, die Proportionen bleiben also korrekt. Der übrige Platz ist transparent oder mit der gewählten Hintergrundfarbe gefüllt. Für das beste Ergebnis schneiden Sie das Bild vorher quadratisch zu.
Warum hat das Apple Touch Icon einen Hintergrund?
iOS zeigt transparente Icons auf dem Home-Bildschirm vor schwarzem Hintergrund, wodurch dunkle Logos verschwinden können. Damit das nicht passiert, bekommt apple-touch-icon.png immer einen festen Hintergrund, auch wenn die anderen Icons transparent sind. Wählen Sie eine Farbe, die zu Ihrem Logo passt.
Wird mein Logo hochgeladen, um die Favicons zu erstellen?
Nein. Das Skalieren, das Packen der ICO-Datei und das Erstellen des ZIPs laufen in Ihrem Browser. Das Bild wird nie an die Server von Krawly gesendet und nichts wird gespeichert. Das Tool ist kostenlos, ohne Konto und ohne Wasserzeichen.
Privat durch Bauweise. Jeder Krawly-Konverter läuft in Ihrem Browser mit JavaScript und WebAssembly. Ihre Dateien werden weder hochgeladen noch gespeichert noch von jemandem gesehen – wenn Sie den Tab schließen, sind sie weg.