Favicon-Generator

Ein Favicon ist das kleine Icon, das der Browser im Tab, in den Lesezeichen und im Verlauf anzeigt. Es gibt keine einheitliche Größe — moderne Websites liefern mehrere: ein favicon.ico mit 16, 32 und 48 px, PNG-Icons bis 512 px, ein 180 px apple-touch-icon für iOS sowie 192/512 px Icons für Android und PWAs. Dieser Generator erstellt alle auf einmal.

Ziehe dein PNG (oder JPG, WebP oder SVG) auf das Tool. Es skaliert dein Bild auf 16, 32 und 48 px herunter und packt sie in ein einziges favicon.ico, zusammen mit eigenständigen PNG-Icons. Lade das ZIP herunter und kopiere favicon.ico in das Stammverzeichnis deiner Website.

Alles passiert in deinem Browser, sodass die Icons auf deinem eigenen Gerät erstellt werden. Wie Daten im Zusammenhang mit dem Tool behandelt werden, ist in unserer Datenschutzrichtlinie beschrieben.

Das ZIP enthält favicon.ico, PNG-Favicons (16–512 px), apple-touch-icon.png, android-chrome-192/512-PNGs, ein site.webmanifest und einen fertigen HTML-Snippet. Kopiere die Dateien in dein Website-Stammverzeichnis und füge den Snippet in den <head> deiner Seite ein.

Quadratisch funktioniert am besten, da Icons quadratisch sind. Wenn dein Bild nicht quadratisch ist, wird es zentriert und mit Balken in einen quadratischen Rahmen gefasst; du kannst auch eine Hintergrundfarbe und Innenabstand hinzufügen, damit nicht-quadratische Grafiken sauber im Icon sitzen.

Transparent (PNG) sieht in den meisten Browsern am besten aus und passt sich hellen und dunklen Tabs an. Verwende einen farbigen Hintergrund, wenn dein Logo dünne Striche hat, die bei bestimmten Themes verschwinden, oder wenn du ein einheitliches App-Icon-Aussehen mit abgerundeten Ecken möchtest.

Ja. Wechsle in den Modus App-Icons, um das vollständige iOS-Set (40–1024 px für Xcode und den App Store) und die Android-mipmap-Dichten plus das 512 px Play Store Icon zu exportieren, organisiert in Ordnern im ZIP.

Lade die Dateien in dein Website-Stammverzeichnis hoch und füge dann die bereitgestellten <link>-Tags in den <head> jeder Seite (oder dein gemeinsames Layout) ein. Die favicon.ico-Zeile deckt ältere Browser ab; die PNG- und apple-touch-icon-Zeilen decken moderne Browser und iOS ab; die Manifest-Zeile deckt Android und installierbare PWAs ab.

Browser cachen Favicons aggressiv. Mache eine Force-Aktualisierung, öffne die Datei direkt (deineseite.com/favicon.ico) oder versuche es in einem privaten Fenster. Es kann eine Weile dauern, bis Tabs und Lesezeichen aktualisiert werden, auch nachdem die Datei live ist.

Ja — völlig kostenlos, ohne Wasserzeichen und ohne Registrierung. Erstelle beliebig viele Favicon- und App-Icon-Sets.