PNG → ICO
Favicon-Generator
Erstelle aus einem einzigen Bild alle Icons, die eine Website braucht: favicon.ico, das Apple Touch Icon, die App-Icons und das HTML zum Einfügen. Alles passiert in deinem Browser.
Logo oder Icon hier ablegen PNG, JPG oder SVG. Ein quadratisches Bild eignet sich am besten. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
In den <head> deiner Website einfügen
Läuft im Browser · Dateien bleiben auf deinem Gerät
So erstellst du ein Favicon
- Logo oder Icon hinzufügen. PNG, JPG oder SVG. Ein quadratisches Bild mit einer einfachen Form eignet sich am besten.
- Innenabstand, Ecken und Hintergrund anpassen. Gib dem Icon Luft, runde die Ecken ab und füll den Hintergrund, wenn dein Logo dunkel auf transparentem Grund ist.
- Browser-Tabs prüfen. Die Vorschau zeigt das Icon in seiner echten Größe von 16 px auf einem hellen und einem dunklen Tab.
- ZIP herunterladen und HTML einfügen. Lade die Dateien ins Stammverzeichnis deiner Website hoch und füge die Tags in den
<head>ein.
Was der Favicon-ICO-Generator erstellt
| Datei | Größe | Verwendet von |
|---|---|---|
| favicon.ico | 16, 32 und 48 px | Browser-Tabs, Lesezeichen, Windows-Verknüpfungen und jedes Tool, das /favicon.ico abruft |
| icon.svg | Skalierbar | Moderne Browser, wenn dein Ausgangsbild eine SVG-Datei ist |
| apple-touch-icon.png | 180 px | Verknüpfungen auf dem Home-Bildschirm von iPhone und iPad |
| icon-192.png und icon-512.png | 192 und 512 px | Android und installierte Web-Apps, im Manifest eingetragen |
| manifest.webmanifest | – | Sagt Browsern, wo die App-Icons liegen |
Die Icons in 192 und 512 px folgen dem Beispiel für Web-App-Manifeste auf web.dev. Das Apple Touch Icon bekommt immer einen vollen Hintergrund, weil iOS transparente Bereiche schwarz darstellt.
Favicon erstellen aus einem Bild oder PNG
Nimm die sauberste Version deines Logos, die du hast. Ein Favicon wird im Tab mit 16 × 16 Pixeln angezeigt, feine Schrift und dünne Linien verschwinden dabei. Viele Marken verwenden nur ihr Symbol oder ihren Anfangsbuchstaben. Ist dein Ausgangsbild nicht quadratisch, zentriert der Generator es auf einer quadratischen Fläche mit transparenten Rändern.
Nutze den Regler für den Innenabstand, wenn das Logo an die Ränder stößt, und füll den Hintergrund, wenn das Logo dunkel und transparent ist, damit es auch auf dunklen Browser-Tabs sichtbar bleibt.
Favicon aus SVG erstellen
Wenn du eine SVG-Datei ablegst, enthält das Set sie als icon.svg, und das HTML bindet sie als zusätzliches Icon ein. Browser, die SVG-Favicons unterstützen, nutzen sie in jeder Größe, die anderen greifen auf favicon.ico zurück. Die PNG-Icons werden aus dem Vektor gezeichnet und sind deshalb scharf.
Favicon für Google: was die Suche verlangt
Google kann dein Favicon neben deinen Suchergebnissen anzeigen. Die Richtlinien verlangen ein quadratisches Bild von mindestens 8 × 8 Pixeln und empfehlen eines, das größer als 48 × 48 Pixel ist (Google Search Central). Die 48-px-Größe in favicon.ico und das Icon in 192 px decken das ab. Mehr dazu im Ratgeber zu den Favicon-Größen.