Favicon-Generator — Favicons aus jedem Bild erstellen
Generieren Sie Favicons in allen Größen (16×16 bis 512×512) aus jedem Bild. Inklusive apple-touch-icon, Web-Manifest und einfügefertigem HTML. 100% in Ihrem Browser
Favicon-Generator — Jede Größe, die Sie brauchen
Laden Sie ein beliebiges Bild hoch und generieren Sie sofort Favicons in allen Größen, die moderne Websites und Apps benötigen — vom klassischen 16×16 Browser-Tab-Icon bis zum 512×512 PWA-Icon. Laden Sie jede Größe als PNG herunter und kopieren Sie das fertige HTML und Web-Manifest.
Was Sie erhalten
- Alle Standardgrößen: 16, 32, 48, 64, 96, 128, 180, 192, 256 und 512 Pixel
- apple-touch-icon (180×180) für iOS-Startbildschirm-Lesezeichen
- PWA-Icons (192×192 und 512×512) für installierbare Web-Apps
- Fertiges HTML-Snippet zum Einfügen in den
<head>Ihrer Seite - site.webmanifest JSON-Datei für Progressive Web Apps
Optionen
- Hintergrund: behalten Sie die Transparenz oder legen Sie eine einfarbige Hintergrundfarbe fest
- Abstand: fügen Sie Platz um Ihr Icon hinzu (nützlich, wenn Ihr Logo die Ränder berührt)
So installieren Sie Ihr Favicon
- Laden Sie die benötigten PNG-Größen herunter und laden Sie sie in das Stammverzeichnis Ihrer Website hoch
- Fügen Sie das generierte HTML-Snippet in den
<head>Ihrer Seiten ein - Speichern Sie die site.webmanifest-Datei in Ihrem Stammverzeichnis (optional, für PWA-Unterstützung)
Tipps für beste Ergebnisse
- Verwenden Sie ein quadratisches Bild, idealerweise 512×512 Pixel oder größer
- Halten Sie Ihr Design einfach — Favicons sind winzig, feine Details verschwinden bei 16×16
- Verwenden Sie eine transparente PNG-Quelle für das sauberste Ergebnis auf jedem Hintergrund
Datenschutz
Die gesamte Favicon-Generierung erfolgt in Ihrem Browser über die Canvas-API. Ihr Bild wird niemals auf einen Server hochgeladen.
Schritt für Schritt
- Ziehen Sie ein quadratisches Bild in das Feld, am besten mit 512 × 512 Pixeln oder mehr.
- Wählen Sie bei Bedarf einen Hintergrund (oder Transparent) und den Abstand um das Motiv.
- Laden Sie die erzeugten Favicons herunter und übernehmen Sie den einfügefertigen HTML-Code in den <head> Ihrer Seite.
Häufige Fragen
Warum sollte das Bild quadratisch sein?
Favicons werden quadratisch dargestellt. Ein nicht quadratisches Bild wird beschnitten oder verzerrt.
Welche Größen braucht eine Website?
Üblich sind 16 × 16 und 32 × 32 für Browser-Tabs, 180 × 180 für das Apple-Touch-Icon und größere Größen für das Web-Manifest. Das Tool erzeugt diese Größen für Sie.
Wo trage ich das Favicon ein?
Der erzeugte HTML-Code gehört in den <head>. Die Dateien selbst legen Sie auf dem Server ab.