Favicon-Format erstellen mit dem kostenlosen Generator
Der kostenlose Favicon-Generator wandelt Ihr Logo oder Bild direkt im Browser in ein vollständiges Paket für jedes moderne Favicon-Format um. Sie erhalten die klassische favicon.ico, PNG-Varianten in allen gängigen Auflösungen, das Apple Touch Icon sowie ein fertiges Webmanifest für Progressive Web Apps. Sämtliche Dateien werden lokal auf Ihrem Gerät verarbeitet – komplett ohne Server-Upload, Registrierung oder Wasserzeichen.
Favicon erstellen aus PNG, SVG oder JPG
Mit dem Favicon-Generator wandeln Sie Ihre Bilddatei in wenigen Sekunden in ein vollständiges Icon-Set um. Das Werkzeug akzeptiert Quellgrafiken in den Formaten PNG, SVG, JPG, WebP und GIF.
- Ziehen Sie Ihr Bild per Drag-and-Drop in das Werkzeug oder klicken Sie auf die Dateiauswahl. Eine quadratische Vorlage mit mindestens 256x256 Pixeln liefert das schärfste Ergebnis.
- Verwenden Sie den Bereich Anpassungen, um bei Bedarf Innenabstände (Padding) festzulegen oder eine Hintergrundfarbe zu wählen.
- Klicken Sie auf den Download-Button, um das fertige ZIP-Paket automatisch herunterzuladen.
PNG zu ICO und favicon.ico online erstellen
Bei der Umwandlung von PNG zu ICO entsteht eine klassische favicon.ico. Dabei handelt es sich um einen Multi-Resolution-Container, der die Bildgrößen 16x16, 32x32 und 48x48 Pixel in einer einzigen Datei vereint und als universeller Fallback dient.
Ergänzend werden optimierte PNG-Dateien wie favicon-16x16.png, favicon-32x32.png und favicon-48x48.png erzeugt. Die Version mit 48x48 Pixeln wird speziell von Google für die Anzeige des Icons in den Suchergebnissen verwendet.
Favicon Format und Größe für moderne Websites
Moderne Browser und mobile Betriebssysteme erfordern unterschiedliche Dateiformate und Auflösungen. Dieser Favicon-Generator erstellt alle Standardgrößen in einem Durchgang:
favicon.ico: Multi-Resolution-Datei mit 16x16, 32x32 und 48x48 Pixelnapple-touch-icon.png: 180x180 Pixel für Verknüpfungen auf dem iOS-Home-Bildschirmicon-192.pngundicon-512.png: Bilddateien für Android und PWA-Anwendungensite.webmanifest: JSON-Konfigurationsdatei zur Einbindung der PWA-Icons
HTML-Code im -Bereich einbinden
Entpacken Sie die ZIP-Datei nach dem Download und laden Sie alle enthaltenen Dateien in das Root-Verzeichnis (Stammverzeichnis) Ihrer Website hoch. Öffnen Sie danach die mitgelieferte Datei favicon-tags.html.
Kopieren Sie das vorgefertigte HTML-Snippet und fügen Sie es in den <head>-Bereich Ihrer Webseite ein. Sollte das neue Icon im Browser nicht sofort erscheinen, leeren Sie den Browser-Cache (z. B. mit der Tastenkombination STRG+F5 oder Cmd+Shift+R).
Favicon PNG vs ICO: Unterschiede im Überblick
Die Datei favicon.ico ist das traditionelle Format, das seit Jahrzehnten von allen Webbrowsern im Hauptverzeichnis gesucht wird. PNG-Favicons sind separate Dateien, die moderneren Browsern eine schärfere Darstellung und bessere Komprimierung bieten.
Da verschiedene Systeme unterschiedliche Standards voraussetzen, erstellt der Generator beide Varianten gleichzeitig und verknüpft sie sauber im HTML-Code.
Häufig gestellte Fragen
Wie kann ich aus einer PNG-Datei ein Favicon erstellen?
Ziehen Sie Ihre PNG-Datei einfach in das Eingabefeld des Generators. Das Tool wandelt das Bild automatisch in das Format favicon.ico, alle benötigten PNG-Größen, das Apple Touch Icon und den passenden HTML-Code um. Eine bestehende Transparenz in der PNG-Datei bleibt dabei erhalten.
Welche Favicon-Größe und welche Formate benötige ich?
Für eine moderne Website benötigen Sie mehrere Größen. Dazu gehören 16x16 und 32x32 Pixel für Browser-Tabs, 48x48 Pixel für Google-Suchergebnisse, 180x180 Pixel für das Apple Touch Icon sowie 192x192 und 512x512 Pixel für Android und Web-App-Installationen.
Ist dieser Favicon-Generator free und ohne Registrierung nutzbar?
Ja, das Werkzeug ist vollständig kostenlos und benötigt keine Registrierung oder Anmeldung. Die gesamte Verarbeitung erfolgt lokal im Browser über die Canvas-API, wodurch Ihre Daten privat bleiben.
Was ist der Unterschied zwischen favicon.ico und PNG-Favicons?
Eine favicon.ico-Datei ist ein Container für mehrere Auflösungen und dient als universeller Fallback für ältere Browser. PNG-Favicons sind separate Grafikdateien für definierte Displaygrößen, die von aktuellen Browsern für eine schärfere Darstellung bevorzugt werden.
Warum wird mein neues Favicon im Browser nicht angezeigt?
Browser speichern Favicons sehr lange im lokalen Zwischenspeicher. Leeren Sie den Browser-Cache über die Tastenkombination STRG+F5 unter Windows oder Cmd+Shift+R auf dem Mac, um das neue Bild zu laden.
Kann ich ein Bild in ein Favicon umwandeln, wenn es als SVG vorliegt?
Ja, Sie können eine SVG-Vektordatei als Quelle hochladen. Das Vektormaterial wird für jede benötigte Zielauflösung rastergetreu skaliert und als vollständiges Set aus ICO- und PNG-Dateien ausgegeben.
Wie erstelle ich ein Apple Touch Icon für iPhone und iPad?
Das Apple Touch Icon in der Größe 180x180 Pixel wird automatisch vom Generator erstellt. Da iOS keine transparenten Home-Bildschirm-Icons unterstützt, füllt das Tool den Hintergrund mit der unter Anpassungen festgelegten Farbe oder standardmäßig mit Weiß.
Was ist eine site.webmanifest-Datei und wofür wird sie gebraucht?
Die site.webmanifest ist eine JSON-Datei, die dem Browser mitteilt, wie sich die Website beim Speichern auf dem Home-Bildschirm verhält. Sie steuert unter anderem die Einbindung der Icons für Android und Progressive Web Apps.
Empfohlen
-
The $100 Startup (Chris Guillebeau, englisch)Die Website hat ihr Icon, jetzt soll sie verdienen
-
Wacom Intuos S ZeichentablettLogo und Icon selbst von Hand zeichnen
-
InnoView 15,6" tragbarer MonitorEin zweiter Bildschirm für den Website-Bau
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
