Favicon-Generator
Favicons aus einem Bild erzeugen: ICO, PNG in allen Größen, Apple Touch Icon und fertiger HTML-Code als ZIP – lokal.
Der Favicon-Generator erzeugt aus einem Bild oder SVG alle Icons für eine Website: favicon.ico mit 16, 32 und 48 Pixeln, PNGs, das Apple Touch Icon mit 180 Pixeln und die Android-Icons mit 192 und 512 Pixeln. Dazu kommen ein site.webmanifest und der fertige HTML-Code. Alles wird lokal im Browser berechnet und als ZIP oder einzeln geladen.
50 % ergibt einen Kreis.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und in Suchergebnissen. Heute gehören dazu mehrere Dateien für unterschiedliche Geräte. Der Generator erstellt sie aus einem einzigen Bild.
Die erzeugten Dateien
| Datei | Größe | Zweck |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Ältere Browser, Suchmaschinen |
| favicon-16x16.png, favicon-32x32.png | 16, 32 px | Browser-Tabs |
| apple-touch-icon.png | 180 px | iPhone und iPad, Startbildschirm |
| android-chrome-192x192.png, -512x512.png | 192, 512 px | Android, Web-App-Manifest |
| favicon.svg | skalierbar | Moderne Browser (nur bei SVG-Quelle) |
So gehst du vor
- Bild laden, bei Bedarf Abstand und Rundung anpassen.
- ZIP laden und die Dateien ins Hauptverzeichnis legen.
- HTML in den
headeinfügen. Die Vorschau beim Teilen prüfst du im Metadaten-Checker. Vorher lässt sich ein SVG mit dem SVG-Optimierer verkleinern.
Beispiel
Ein Logo als SVG mit 128 × 128 px wird als runde Variante (Radius 50 %) gespeichert. In 16 px bleibt das Motiv erkennbar, wenn es einfach ist. Für Tabs und Homescreen sind kräftige Kontraste wichtig, den Kontrast von Motiv und Hintergrund prüfst du im Farbkontrast-Prüfer.
Häufige Fragen
Welche Favicon-Dateien braucht eine Website heute?
Ein favicon.ico für ältere Browser und Suchmaschinen, ein SVG- oder PNG-Icon für moderne Browser, ein Apple Touch Icon mit 180 × 180 px für iOS und zwei größere PNGs (192 und 512 px) für Android und das Web-Manifest. Genau diese Dateien erzeugt der Generator.
Welche Bildgröße sollte das Ausgangsbild haben?
Am besten quadratisch und mindestens 512 × 512 px, oder ein SVG. Kleinere Bilder werden hochskaliert und wirken unscharf. Motive mit wenigen Formen und kräftigen Farben bleiben auch bei 16 px erkennbar.
Warum hat das Apple Touch Icon einen Hintergrund?
iOS füllt transparente Bereiche schwarz. Deshalb bekommt das Apple Touch Icon immer einen deckenden Hintergrund, entweder deine gewählte Farbe oder Weiß. Die Ecken rundet iOS selbst ab.
Wo binde ich die Icons ein?
Lege die Dateien in das Hauptverzeichnis deiner Website und füge den HTML-Code in den head jeder Seite ein. Die Datei site.webmanifest verlinkt Android-Icons und Theme-Farbe.
Werden meine Bilder hochgeladen?
Nein. Die Icons entstehen lokal im Browser über Canvas. Das Bild verlässt dein Gerät nicht.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.