Favicon-Generator | ICO und PNG in mehreren Größen
Laden Sie ein Bild hoch, schneiden Sie es quadratisch zu und erzeugen Sie eine favicon.ico mit mehreren Größen (16, 32, 48px und mehr) sowie einen vollständigen PNG-Satz. Hochwertige Lanczos-Verkleinerung und fertiger HTML-Code, alles direkt im Browser verarbeitet.
Favicon einbinden (nach Muster)
Wie ein Favicon eingebunden wird, hängt davon ab, wie weit die Unterstützung reichen soll. Hier finden Sie die nötigen Muster – vom absoluten Minimum bis zu vollständiger PWA- und Dunkelmodus-Unterstützung. Alle Beispiele gehen davon aus, dass die erzeugten Dateien im Stammverzeichnis liegen.
Muster 1: Minimum (nur favicon.ico ablegen)
Ganz ohne HTML: Legen Sie einfach /favicon.ico im Dokumentstamm ab. Browser suchen diesen Pfad implizit, das Symbol erscheint also ohne jede Auszeichnung.
your-site/
└── favicon.ico ← einfach hier ablegen (kein HTML nötig)
<!-- Wer es ausdrücklich schreiben möchte, kommt mit dieser einen Zeile aus -->
<link rel="icon" href="/favicon.ico" sizes="any">| Geeignet für | Private Seiten, interne Werkzeuge und alles, wo es nur sichtbar sein muss |
|---|---|
| Hinweise | Mit sizes="any" behandeln Browser die ICO korrekt als letzte Rückfalloption, sobald Sie später SVG- oder PNG-Symbole ergänzen. Empfohlen wird, 16, 32 und 48px in der ICO zu bündeln. |
Muster 2: Standardaufbau (empfohlen)
Zusätzlich zur ICO noch PNG-Dateien und ein Apple Touch Icon – mit Abstand der heute gebräuchlichste Aufbau. Er deckt alles ab, vom Desktop-Browser bis zum Hinzufügen zum iOS-Startbildschirm.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| Geeignet für | Unternehmensseiten, Blogs, Magazine – ganz normale Websites |
|---|---|
| Hinweise | Transparente Bereiche eines apple-touch-icon werden schwarz gefüllt, exportieren Sie also immer ein deckendes PNG mit Hintergrundfarbe. iOS rundet zudem die Ecken ab; rund 10% Innenabstand verhindern, dass die Ränder abgeschnitten werden. |
Muster 3: Vollständiger PWA-Aufbau
Bei einer PWA, die vom Startbildschirm aus wie eine App startet, werden die Symbole in site.webmanifest eingetragen. Ohne 192px und 512px stuft Chrome die App nicht als installierbar ein.
<!-- HTML (innerhalb von head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Geeignet für | PWAs, Web-Apps und Dienste, die überwiegend auf dem Smartphone genutzt werden |
|---|---|
| Hinweise | iOS wertet die im Manifest deklarierten Symbole nicht aus, ein apple-touch-icon bleibt daher zusätzlich nötig. display: "standalone" blendet die Browser-Oberfläche aus, sodass die Seite wie eine native App startet. |
Muster 4: SVG-Favicon mit Dunkelmodus-Unterstützung
Ein SVG-Favicon ist auflösungsunabhängig, und CSS innerhalb der SVG kann die Farben im Dunkelmodus wechseln. Geben Sie daneben ICO- und PNG-Dateien für Browser an, die es nicht unterstützen.
<!-- HTML (innerhalb von head). Es gewinnt das erste Format, das der Browser lesen kann -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (Farbe im Dunkelmodus umkehren) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Geeignet für | Websites mit vektorbasiertem Logo oder wenn das Symbol im Dunkelmodus anders aussehen soll |
|---|---|
| Hinweise | Chrome, Firefox und Edge unterstützen SVG-Favicons. Safari ignoriert SVG in rel="icon" derzeit, die Rückfalloptionen in PNG und ICO sind daher zwingend. |
Muster 5: Unterverzeichnisse und Cache-Erneuerung
Was zu schreiben ist, wenn die Symbole nicht im Stammverzeichnis liegen oder wenn nach dem Austausch weiterhin das alte Symbol erscheint. Favicons werden hartnäckig zwischengespeichert, das Ändern der URL ist die zuverlässigste Lösung.
<!-- Bei einem eigenen Verzeichnis den Pfad ausdrücklich angeben -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Bei Auslieferung aus einem Unterverzeichnis (z. B. /docs/) auf den absoluten Pfad achten -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Geeignet für | CDN-Auslieferung, Websites mit zentraler Asset-Verwaltung und ausgetauschte Symbole |
|---|---|
| Hinweise | Allein die implizite Suche nach /favicon.ico im Stammverzeichnis lässt sich nicht umlenken. Auch wer die Symbole aus einem Unterverzeichnis ausliefert, sollte deshalb eine Kopie im Stammverzeichnis behalten. |
Welche Datei wird wo verwendet
Eine kurze Übersicht, wo jede Datei tatsächlich zum Einsatz kommt. Sie brauchen nicht alle – wählen Sie nach den Umgebungen aus, die Sie abdecken möchten.
| Datei | Größe | Einsatzort |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | Browser-Tabs, Lesezeichen und Windows-Taskleiste. Wird auch ohne Auszeichnung im Stammverzeichnis gesucht |
| favicon-16x16.png | 16×16 | Browser-Tab auf Bildschirmen mit Standardauflösung |
| favicon-32x32.png | 32×32 | Browser-Tab auf Retina- und anderen hochauflösenden Bildschirmen sowie in der Lesezeichenleiste |
| apple-touch-icon.png | 180×180 | Das Symbol beim Hinzufügen zum Startbildschirm von iOS oder iPadOS. Transparenz wird schwarz gefüllt |
| android-chrome-192x192.png | 192×192 | Startbildschirm-Symbol unter Android (über das Manifest) |
| android-chrome-512x512.png | 512×512 | PWA-Splashscreen und App-Übersichten (über das Manifest) |
| site.webmanifest | — | Die PWA-Konfigurationsdatei mit Symbolen, Themenfarbe und Startverhalten |
| favicon.svg | Skalierbar | Chrome, Firefox und Edge. Ermöglicht einen Farbwechsel im Dunkelmodus |
Tipps
- Beginnen Sie mit einem quadratischen Bild von mindestens 512×512px, dann bleibt die Kontur bis hinunter zu 16px erhalten. Ist Ihr Bild nicht quadratisch, wählen Sie mit dem eingebauten Zuschnitt genau den quadratischen Ausschnitt aus, den Sie brauchen.
- Lanczos3 bildet einen gewichteten Mittelwert benachbarter Pixel, während die negativen Nebenkeulen des Kerns die Kanten wieder anheben. Dadurch bleibt mehr von der Kontur erhalten als bei der browsereigenen Skalierung, was sich bei Logos und Schrift deutlich zeigt.
- Das prägende Merkmal von ICO ist, dass eine einzige Datei mehrere Größen enthalten kann. Bündeln Sie 16, 32 und 48px, dann greifen Tab, Lesezeichenleiste und Windows-Taskleiste jeweils zu der für sie gemachten Grafik.
- Bei Apple Touch Icons werden transparente Bereiche schwarz gefüllt, ein deckendes PNG mit Hintergrundfarbe ist daher die sichere Wahl. Rund 10% Innenabstand verhindern außerdem, dass die abgerundete Maske von iOS die Ränder abschneidet.
- Browser halten Favicons hartnäckig im Cache. Erscheint ein Austausch nicht, hängen Sie einen Parameter wie
?v=2an die URL an oder laden Sie die Seite mit einem harten Reload neu.
Häufige Fragen
/favicon.ico ist nach wie vor ein Pfad, den Browser auch ohne jede Auszeichnung implizit suchen. Feedreader, Lesezeichendienste und manche Crawler holen sich diese ICO im Stammverzeichnis, ohne Ihr HTML je auszuwerten. Wer sie zusätzlich bereitstellt, lässt keine Lücke.<link rel="icon" type="image/svg+xml"> darauf. Die hier erzeugten ICO- und PNG-Dateien daneben anzugeben, ergibt einen zuverlässigen Rückfall für Browser, die SVG-Icons ignorieren.
Übrigens – Die Herausforderung, auf sechzehn Pixeln zu zeichnen
1999 zeigte Internet Explorer 5 erstmals ein kleines Symbol neben den Einträgen der Favoritenliste. Der Mechanismus war reizvoll schlicht: Eine Datei namens favicon.ico im Stammverzeichnis ablegen, und sie wurde gefunden. Der Name selbst ist eine Verkürzung von „favorite icon". Das Element <link rel="icon"> wurde erst später in der HTML-Spezifikation festgeschrieben, und die implizite Suche nach einer ICO im Stammverzeichnis überlebt bis heute allein aus Gründen der Abwärtskompatibilität.
Dass ICO das Windows-Symbolformat übernahm, erwies sich als überaus folgenreich. Eine einzige ICO-Datei kann mehrere Auflösungen aufnehmen, sodass der 16px-Tab und die 48px-Taskleiste tatsächlich unterschiedliche Grafiken zeigen können. Das ist mehr als Bequemlichkeit: Auf einer Fläche von 16×16 Pixeln lässt ein mechanisch verkleinerter 48px-Entwurf feine Striche verschwinden und Schrift unleserlich werden. Icon-Gestalter zeichneten jede Größe von Hand, weil das der einzige Weg war, dieses Problem zu lösen.
Die moderne Favicon-Erzeugung ersetzt das Zeichnen von Hand durch eine andere Frage: Wie klug lässt sich verkleinern? Ein einfacher Mittelwert (bilinear) verliert Kantenkontrast, reines Abtasten (nächster Nachbar) wirft feine Striche ganz weg. Die Lanczos-Neuabtastung verwendet eine auf endlich viele Keulen gestutzte sinc-Funktion: Die Hauptkeule bewahrt die ursprüngliche Information, die negativen Nebenkeulen heben die Kanten wieder an. Genau diese sanfte Betonung der Kontur brauchen winzige Icons.
Die Anforderungen sind seither nur gewachsen. 2007 kam mit dem iPhone das Apple Touch Icon (anfangs 57px, heute 180px), PWAs machten 192px und 512px nötig, und SVG-Favicons mit Unterstützung für den Dunkelmodus stehen inzwischen ebenfalls zur Debatte. Verglichen mit einer einzigen abgelegten Datei wirkt das nach viel Aufwand – umgekehrt heißt es aber auch, dass jene paar Dutzend Pixel im Browser-Tab von außerordentlich vielen Menschen gesehen werden.