Favicon Generator
Veröffentlichen Sie keine Website mit dem Standard-Tab-Icon. Laden Sie ein Bild hoch und exportieren Sie das Icon-Set, das Browser, iOS, Android und PWAs erwarten.
Bild hochladen
PNG, JPG und SVG werden unterstützt. Eine Quelle mit 512x512 Pixeln oder mehr funktioniert am besten.
Live-Vorschau
HTML-Snippet
<!-- Add inside <head> --> <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">
Favicon Best Practices
Warum mehrere Größen wichtig sind
Browser, Lesezeichen, angeheftete Tabs, Installationsdialoge und mobile Shortcuts fordern unterschiedliche Größen an. Ein vollständiges Set hält das Icon scharf, statt Plattformen eine winzige Datei hochskalieren zu lassen.
PNG statt nur ICO
Moderne Browser kommen mit PNG-Icons sehr gut zurecht. ICO bleibt für ältere Kompatibilität nützlich, während PNG meist sauberere Transparenz und einfacheres Asset-Handling bietet.
Für kleine Größen entwerfen
Ein Favicon wird oft mit 16x16 Pixeln gesehen. Einfache Formen, starker Kontrast und weniger Details funktionieren meist besser als ein vollständiges Logo im Tab.
Icon-Leitfaden nach Plattform
Desktop-Browser
Wird für Tabs, Lesezeichen und Verlaufslisten im Browser verwendet.
iOS / iPhone
Wird genutzt, wenn die Website zum Home-Bildschirm hinzugefügt wird. Undurchsichtige Grafiken funktionieren hier meist besser.
Android Chrome
Wird zusammen mit dem Webmanifest für Installationsdialoge, Splash Screens und App-Wechselansichten verwendet.
Kurzanleitung zur Einbindung
Herunterladen und entpacken
Exportieren Sie über den Download-Button eine ZIP-Datei mit PNG-Assets, Manifestdateien und dem Head-Snippet.
In den öffentlichen Website-Root hochladen
Legen Sie die entpackten Dateien dort ab, wo sie öffentlich erreichbar sind, zum Beispiel im public-Verzeichnis der Website.
Head-Markup hinzufügen
Kopieren Sie das generierte Head-Snippet in den Dokumentkopf und leeren Sie anschließend den Browser-Cache, um die neuen Icons zu prüfen.
Häufige Fragen
Was ist in der ZIP-Datei enthalten?
Die ZIP-Datei enthält gängige Browser-Favicon-PNGs, Apple-Touch-Icons, Android-Icon-Größen und eine site.webmanifest-Datei.
Was ist site.webmanifest?
Das ist ein JSON-Manifest, das Browsern beschreibt, wie sich die Website verhält, wenn sie auf dem Home-Bildschirm installiert oder wie eine App gestartet wird.
Wie nutze ich diese Icons?
Laden Sie die generierten Dateien in den öffentlichen Root Ihrer Website hoch und fügen Sie das generierte Head-Markup auf den Seiten ein, die das Favicon ausgeben sollen.
Warum sehe ich noch mein altes Favicon?
Browser cachen Favicons sehr aggressiv. Versuchen Sie einen Hard Refresh, löschen Sie Website-Daten, ändern Sie die Icon-URL oder testen Sie in einem frischen Browserprofil.
Muss das Favicon exakt dem App-Icon entsprechen?
Es sollte zur Marke passen, muss aber nicht identisch sein. Viele Marken nutzen für Favicon-Größen ein vereinfachtes Zeichen und für installierte App-Icons eine detailreichere Version.