Favicon-Generator

Laden Sie ein quadratisches Bild hoch und erhalten Sie alle benötigten Favicon-Größen mit fertigem HTML-Code zum Einfügen. Unterstützt alle gängigen Größen für Browser und mobile Geräte.

Quadratisches Bild (PNG, JPG) ablegen oder zum Auswählen klicken

Oder aus Text erzeugen:

Funktionen

Alle Standardgrößen
Code für das link-Tag
manifest.json-Schnipsel
Download als ZIP-Archiv

Anleitung

1. Legen Sie ein quadratisches Bild (PNG/JPG) in den Upload-Bereich.

2. Sehen Sie eine Vorschau aller generierten Größen.

3. Klicken Sie auf Herunterladen, um sie als ZIP zu erhalten, und kopieren Sie den HTML-Code.

Über dieses Werkzeug

Ein Favicon erscheint in Browser-Tabs, Lesezeichen, im Verlauf, in Startbildschirm-Verknüpfungen und in Suchergebnissen – und jeder Ort verlangt eine andere Größe. Dieser Generator nimmt ein quadratisches Bild – oder ein bis zwei Zeichen auf farbigem Hintergrund – und zeichnet es in 16, 32, 48, 64, 128, 180, 192, 256 und 512 Pixeln, mit einem Download-Button für jedes PNG. An den kleinen Größen scheitern Favicons: Feine Details und dünne Schrift verschwinden bei 16 × 16, daher funktionieren kräftige Formen und hoher Kontrast am besten. Starten Sie mit einer quadratischen Vorlage von mindestens 512 × 512 Pixeln, damit die großen Größen scharf bleiben. Binden Sie die Dateien nach dem Herunterladen mit link-Tags im head Ihrer Seite ein und tragen Sie bei installierbaren Web-Apps die Größen 192 und 512 im Web-Manifest ein.

Häufig gestellte Fragen

Welche Favicon-Größen brauche ich wirklich?
Für die meisten Websites: 32 × 32 für Browser-Tabs (16 × 16 als Fallback für ältere Browser), 180 × 180 für Apple-Touch-Icons sowie 192 × 192 und 512 × 512 für Android und Web-App-Manifeste. 48 × 48 ist eine gute Ergänzung, weil die Google-Suche Favicons in Vielfachen von 48px anzeigen kann.
Welches HTML muss ich meiner Seite hinzufügen?
Ein typischer Satz ist <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, <link rel="apple-touch-icon" href="/favicon-180x180.png"> und ein Manifest, das die Icons mit 192 und 512 auflistet. Setzen Sie diese in den <head> jeder Seite.
Erstellt es eine .ico-Datei?
Nein. Es exportiert PNG-Dateien, die alle aktuellen Browser für rel="icon" akzeptieren. Brauchen Sie für sehr alte Browser oder bestimmte Windows-Funktionen eine favicon.ico mit mehreren Größen, fassen Sie die PNGs mit 16, 32 und 48 in einem speziellen ICO-Werkzeug zusammen.
Warum wirkt mein Favicon bei 16 Pixeln unscharf oder unleserlich?
Details, die bei 512px funktionieren, gehen bei 16px verloren. Verwenden Sie ein vereinfachtes Zeichen, dickere Linien und starken Kontrast – oder die Textoption mit einem einzelnen fetten Buchstaben, der auch klein lesbar bleibt.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons sehr hartnäckig im Cache. Leeren Sie den Cache oder öffnen Sie die Website in einem privaten Fenster, und benennen Sie die Datei beim Austausch um oder hängen Sie einen Versionsparameter wie ?v=2 an. Suchmaschinen können Tage oder Wochen brauchen, bis sie es aktualisieren.

Verwandte Werkzeuge

Platzhalterbild-Generator
Generieren Sie einfache Platzhalterbilder in beliebiger Größe mit individuellen ...
IP-Abfrage
Sehen Sie detaillierte Informationen zu jeder IP-Adresse — Standort, Land, Stadt...
Meta-Tag-Generator
Generieren Sie vollständige SEO-Meta-Tags einschließlich Open Graph und Twitter ...
JSON-Formatierer
Fügen Sie JSON im linken Feld ein und klicken Sie auf Formatieren, um es übersic...
HTML-Formatierer
Fügen Sie unformatierten oder unordentlichen HTML-Code links ein und erhalten Si...
CSS-Formatierer
Fügen Sie CSS oder minimierten CSS-Code ein und verschönern Sie ihn mit korrekte...
JavaScript-Formatierer
Fügen Sie JavaScript-Code (auch minimierte Dateien) ein und erhalten Sie eine sa...
SQL-Formatierer
Fügen Sie eine SQL-Abfrage ein und erhalten Sie sofort eine saubere, eingerückte...