Favicon Format und Favicon-Generator
Ein modernes Favicon Format umfasst weit mehr als nur eine einfache Datei. Dieser kostenlose Favicon-Generator wandelt deine Grafik direkt im Browser in ein vollständiges Icon-Paket um. Du erhältst ein Multi-Resolution-ICO, alle benötigten PNG-Größen, das Apple Touch Icon, ein site.webmanifest und das passende HTML-Snippet. Die Verarbeitung erfolgt zu 100 % lokal auf deinem Gerät – ohne Upload und ohne Registrierung.
Erstelle das passende Favicon Format mit allen benötigten Icons und HTML-Code direkt im Browser. Deine Daten bleiben vollständig lokal auf deinem Gerät.
Erstelle jetzt dein vollständiges Favicon-Paket.
Favicon kostenlos erstellen →Favicon erstellen – Schritt für Schritt
So erstellst du ein vollständiges Favicon-Set für deine Website:
- Ziehe dein Logo oder ein Bild in den Favicon-Generator oder wähle eine Datei aus.
- Passe bei Bedarf die Ränder an oder wähle eine Hintergrundfarbe für das Apple Touch Icon.
- Überprüfe das Ergebnis in der Live-Vorschau für Browser-Tabs und den Startbildschirm.
- Klicke auf Herunterladen, um das fertige ZIP-Paket herunterzuladen.
- Entpacke die Dateien und lade sie in das Stammverzeichnis (z. B.
/public_htmloder/htdocs) deines Webservers hoch.
Favicon-Größe und Dateiformate im Überblick
Verschiedene Geräte und Browser verlangen unterschiedliche Dateiformate und Auflösungen:
favicon.ico: Enthält die Auflösungen 16×16, 32×32 und 48×48 Pixel in einer Multi-Resolution-Datei. Sie dient im Stammverzeichnis als verlässlicher Fallback für ältere Browser.- PNG-Favicons: 16×16 px und 32×32 px für Browser-Tabs sowie 48×48 px für Google-Suchergebnisse.
apple-touch-icon.png: 180×180 px für iOS-Geräte. Da iOS keine Transparenz auf dem Home-Bildschirm erlaubt, wird der Hintergrund bei Bedarf mit der gewählten Farbe gefüllt.site.webmanifest: JSON-Datei, die auf PNG-Grafiken in 192×192 px und 512×512 px für Android-Geräte verweist.
Favicon PNG in ICO umwandeln
Häufig liegt das eigene Logo im PNG-Format vor. Eine reine Konvertierung von PNG zu ICO reicht heute nicht mehr aus, da mobile Browser und Suchmaschinen dedizierte PNG-Dateien erwarten. Mit diesem Favicon-Ersteller kannst du ein PNG hochladen, ein klassisches ICO erstellen lassen und gleichzeitig alle aktuellen PNG-Größen generieren.
Das Tool verarbeitet neben PNG auch Vektorgrafiken im SVG-Format sowie JPG, WebP und GIF (erster Frame). SVG-Dateien werden bei der Verarbeitung verlustfrei auf die benötigten Pixelgrößen skaliert.
Favicon ico erstellen und im HTML-Kopfbereich einbinden
Nach dem Entpacken des ZIP-Pakets öffnest du die Datei favicon-tags.html. Kopiere das enthaltene HTML-Snippet und füge es in den <head>-Bereich deiner Website ein.
Sollte dein neues Icon nach dem Erstellen nicht sofort angezeigt werden, liegt dies am Caching von Browsern und CMS-Systemen wie WordPress, IONOS oder Strato. Leere den Browser-Cache oder führe einen Hard Refresh mit Strg + F5 durch. Alternativ hilft eine Versionierung im Dateipfad wie ?v=2.
Häufig gestellte Fragen
Wie kann ich ein Favicon online erstellen?
Wähle dein Logo aus und füge es in den Favicon-Generator ein. Das Werkzeug verarbeitet das Bild direkt im Browser über die Canvas API und stellt dir ein vollständiges ZIP-Paket mit allen Formaten bereit.
Welche Favicon-Größe brauche ich für meine Website?
Moderne Websites benötigen 16x16 und 32x32 Pixel für Browser-Tabs, 48x48 Pixel für die Google-Suche, 180x180 Pixel für Apple-Geräte sowie 192x192 und 512x512 Pixel für Android. Das Tool deckt alle diese Größen ab.
Was ist der Unterschied zwischen favicon.ico und PNG-Favicons?
Die ICO-Datei ist ein Container für mehrere Pixelgrößen und dient als Fallback für ältere Browser. PNG-Favicons werden einzeln im HTML eingebunden, bieten eine schärfere Darstellung und werden von modernen Browsern bevorzugt.
Kann ich ein Favicon aus einer PNG-Datei erstellen?
Ja, PNG eignet sich ideal als Ausgangsdatei, da es Transparenz unterstützt. Der Generator wandelt die PNG-Datei automatisch in das ICO-Format sowie alle weiteren PNG-Größen um.
Warum wird mein Favicon auf dem iPhone schwarz angezeigt?
iOS unterstützt keine transparenten Bereiche bei Icons auf dem Startbildschirm und stellt diese als Schwarz dar. Das im Paket enthaltene Apple Touch Icon wird deshalb automatisch mit Weiß oder deiner gewählten Hintergrundfarbe aufgefüllt.
Kann ich eine SVG-Grafik als Favicon verwenden?
Du kannst eine SVG-Datei als Quelle in den Favicon-Generator einfügen. Die Vektorgrafik wird dabei gestochen scharf in alle benötigten ICO- und PNG-Größen gerastert.
Warum wird mein neues Favicon im Browser nicht angezeigt?
Browser speichern Favicons sehr hartnäckig im Zwischenspeicher. Leere deinen Browser-Cache oder drücke Strg + F5 für einen Hard Refresh, um die aktuelle Version zu laden.
Ähnliche Werkzeuge
App-Screenshot-Rahmen
App-Screenshots für App Store & Play rahnen, ohne Upload.
So funktioniert App-Screenshot-Rahmen
