Favicon-Generator
Aus einem Bild ein komplettes Favicon-Paket erzeugen: 16 × 16, 32 × 32, Apple-Touch-Icon, Android-Icons, favicon.ico, site.webmanifest und HTML-Code, als ZIP.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDer Favicon-Generator baut aus einem einzigen Bild ein vollständiges Icon-Paket für eine Website: PNG-Dateien in den Standardgrößen für Browser-Tabs, ein Apple-Touch-Icon für den Startbildschirm von iPhone und iPad, Android-Chrome-Icons, eine kombinierte favicon.ico für ältere Browser, eine site.webmanifest-Datei und den fertigen HTML-Code für den head-Bereich. Alles wird mit der Canvas-Schnittstelle im Browser erzeugt und als eine ZIP-Datei heruntergeladen. Das Ausgangsbild wird nirgendwohin hochgeladen.
So funktioniert das Tool
- 01Name und Farbe festlegenOptional den Namen der Website und eine Designfarbe eintragen; beides landet in der Manifest-Datei.
- 02Bild hochladenEin PNG oder JPG bis 10 MB wählen, am besten quadratisch und mindestens 512 × 512 Pixel groß.
- 03ZIP laden und Code einfügenDie Dateien ins Hauptverzeichnis der Website kopieren und den HTML-Schnipsel in den head-Bereich einfügen.
Wann ist das nützlich?
- Neue Website einrichtenEin vollständiges Set sorgt dafür, dass das Logo in Tabs, Lesezeichen und auf Startbildschirmen erscheint.
- Website auf dem Handy-StartbildschirmWer die Seite auf iPhone oder Android ablegt, sieht dank Touch-Icon und Manifest ein sauberes Symbol.
- Veraltete favicon.ico ersetzenÄltere Seiten haben oft nur eine favicon.ico in 16 Pixeln, die auf hochauflösenden Bildschirmen verschwommen wirkt.
Beispiele
- Was im Paket stecktfavicon-16x16.png, favicon-32x32.png, apple-touch-icon.png mit 180 × 180 Pixeln, android-chrome-Icons mit 192 und 512 Pixeln, favicon.ico und site.webmanifest.
- Der HTML-SchnipselLink-Elemente für die PNG-Favicons, das Apple-Touch-Icon und das Manifest, die in den head-Bereich jeder Seite gehören.
- Nicht quadratisches LogoEin breites Logo wird mittig in jede quadratische Größe eingepasst, ohne verzerrt zu werden; die freien Bereiche bleiben transparent.
Tipps für ein besseres Ergebnis
- Einfaches Motiv wählenIn 16 Pixeln ist kaum Platz für Details. Ein Bildzeichen oder Monogramm wirkt besser als ein ganzer Schriftzug.
Warum diese Größen
16 × 16 und 32 × 32 Pixel sind die klassischen Favicon-Größen für Tabs und Lesezeichen. 180 × 180 Pixel ist die Größe, die Apple für das Touch-Icon auf dem Startbildschirm dokumentiert. 192 × 192 und 512 × 512 Pixel nutzt Android für das Symbol auf dem Startbildschirm und für den Ladebildschirm beim Öffnen, gesteuert über das Web-App-Manifest. Die favicon.ico enthält zusätzlich 16, 32 und 48 Pixel für ältere Browser.
Wofür die site.webmanifest gut ist
Das Web-App-Manifest ist eine kleine JSON-Datei. Sie sagt dem Browser, wie die Website heißen und welche Symbole und Designfarbe sie verwenden soll, wenn jemand sie zum Startbildschirm hinzufügt. Name und Farbe stammen aus den Eingaben im Tool.
Alles passiert im Browser
Das Bild wird mit der Canvas-Schnittstelle auf jede Größe skaliert, und auch die ZIP-Datei wird lokal zusammengestellt. Das Logo verlässt das Gerät nicht, was bei noch nicht veröffentlichten Marken wichtig ist.
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Jede Skalierung läuft im Browser, und die ZIP-Datei wird ebenfalls lokal erzeugt.
Was passiert mit einem nicht quadratischen Bild?
Es wird mittig in jede quadratische Größe eingepasst und behält sein Seitenverhältnis, statt gestreckt zu werden.
Brauche ich wirklich alle Dateien?
Für volle Kompatibilität mit älteren Browsern, iOS und Android ja. Für einfache Seiten decken favicon.ico und favicon-32x32.png die meisten aktuellen Browser ab.
Wohin kommen die Dateien auf dem Server?
In der Regel in das Hauptverzeichnis der Website, also neben die Startseite, damit die Pfade im HTML-Schnipsel stimmen.
Kann ich nur eine favicon.ico erstellen?
Dafür eignet sich der Konverter von PNG in ICO, der wählbare Größen in eine einzelne ICO-Datei packt.