Die kurze Antwort
Du brauchst keine Dutzenden Icon-Dateien mehr. Ältere Anleitungen listen Größen für Windows-Kacheln, jedes iPad-Modell und längst verschwundene Browser auf; heute liest fast alles eine von wenigen Dateien. Leg diese Dateien in den Hauptordner deiner Website, neben die Startseite, und füge die passenden Zeilen in den head-Bereich jeder Seite ein.
Der Browser fragt /favicon.ico von sich aus ab, auch ganz ohne HTML. Deshalb sollte diese Datei immer vorhanden sein. Alles andere wird über die link-Tags und das Manifest gefunden.
| Datei | Größe in Pixeln | Wird genutzt von |
|---|---|---|
| favicon.ico | 16, 32 und 48 in einer Datei | Alle Browser, Windows-Verknüpfungen, Programme, die nur im Hauptordner suchen |
| favicon-32x32.png und favicon-16x16.png | 32 und 16 | Browser-Tabs und Lesezeichen auf normalen und hochauflösenden Bildschirmen |
| apple-touch-icon.png | 180 | Home-Bildschirm von iPhone und iPad, Safari-Lesezeichen |
| android-chrome-192x192.png | 192 | Android-Startbildschirm, installierte Web-App |
| android-chrome-512x512.png | 512 | Startbildschirm beim Öffnen installierter Web-Apps, App-Stores für Web-Apps |
| icon.svg (optional) | Beliebig, da Vektorgrafik | Moderne Desktop-Browser mit SVG-Favicon-Unterstützung |
Hier ausprobieren: Favicon Generator
Vollständige Tool-Seite öffnenWarum so viele Größen
Ein Favicon erscheint an sehr unterschiedlichen Stellen. Ein Browser-Tab zeigt es mit 16 mal 16 CSS-Pixeln, das sind auf einem hochauflösenden Laptop-Bildschirm 32 echte Pixel und manchmal mehr. Windows nutzt 48 Pixel für Verknüpfungen auf dem Desktop. Google zeigt das Website-Icon neben den Suchergebnissen und verlangt ein quadratisches Bild; empfohlen wird eine Größe über 48 Pixeln, und das 48-Pixel-Bild in der favicon.ico deckt das zusammen mit den größeren PNGs ab.
Handys funktionieren anders. Wenn jemand deine Website zum Home-Bildschirm hinzufügt, sucht iOS nach dem apple-touch-icon, und Android liest die Icons im Web-Manifest. Diese Icons stehen neben echten Apps, sie müssen also groß und scharf sein. Fehlen sie, macht das Handy einen Screenshot der Seite oder zeigt stattdessen einen Buchstaben.
Ein großes Bild einfach zu verkleinern ist für die kleinsten Größen nicht ideal: Ein 512-Pixel-Logo, auf 16 Pixel geschrumpft, macht aus dünnen Linien grauen Matsch. Deshalb zeichnet der Generator die kleinen PNG-Größen getrennt aus deiner Vorlage und lässt dich das Ergebnis bei 16, 32, 48 und 180 Pixeln prüfen, bevor du es herunterlädst.
Diese HTML-Tags fügst du ein
Nach dem Herunterladen fügst du diese Zeilen in den head-Bereich deiner Seiten ein (das Tool zeigt sie unter HTML-Code mit einem Knopf Code kopieren, und im ZIP stehen sie in der Datei favicon-html.txt):
- <link rel="icon" href="/favicon.ico" sizes="48x48">
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <link rel="manifest" href="/site.webmanifest">
- <meta name="theme-color" content="#ffffff"> mit deiner Hintergrundfarbe, die auf manchen Handys die Browserleiste einfärbt
Details zu Apple, Android und SVG
Das Apple-Touch-Icon sollte quadratisch und ohne Transparenz sein. iOS rundet die Ecken selbst ab und füllt transparente Bereiche schwarz, ein transparentes Logo kann also auf einer schwarzen Kachel landen. Der Generator gibt dieser Datei immer einen festen Hintergrund (deine Hintergrundfarbe oder Weiß, wenn du sie ausgeschaltet hast) und hält sie quadratisch.
Die Datei site.webmanifest listet die Icons mit 192 und 512 Pixeln zusammen mit dem Namen der Website und den Farben auf. Android nutzt sie für das Icon auf dem Startbildschirm und für installierte Web-Apps. Android schneidet Icons außerdem manchmal kreisförmig oder in eine andere Form zu; berührt dein Logo die Ränder, gib ihm etwas Innenabstand, damit nichts Wichtiges abgeschnitten wird. Manche Websites legen dafür ein eigenes maskierbares Icon (maskable) mit zusätzlichem Rand um das Logo an.
Ein SVG-Favicon bleibt in jeder Größe scharf und kann im dunklen Modus sogar mit einer CSS-Media-Query in der Datei die Farbe wechseln. Aktuelle Desktop-Browser unterstützen das gut, aber nicht alle, nimm es also als Zusatz: Behalte favicon.ico und die PNGs, und wenn du ein sauberes SVG-Logo hast, füge selbst eine Zeile wie <link rel="icon" type="image/svg+xml" href="/icon.svg"> hinzu. Der Generator akzeptiert auch ein SVG als Vorlage und zeichnet es in jeder Größe scharf.
Ein Icon gestalten, das bei 16 Pixeln funktioniert
Bei 16 mal 16 gibt es nur 256 Pixel, ein komplettes Logo mit Schriftzug wird da unlesbar. Gute Favicons nutzen eine starke Form oder ein bis zwei Buchstaben.
- Nimm das Symbol aus deinem Logo ohne den Firmennamen, oder deine Initialen. Mit der Option Text im Generator entsteht aus ein bis drei Buchstaben ein sauberes Icon.
- Halte Linien dick. Alles, was dünner als etwa ein Zwölftel des Icons ist, verschwindet bei 16 Pixeln.
- Sorg für starken Kontrast zwischen Symbol und Hintergrund. Prüf die Tab-Vorschau in der hellen und in der dunklen Variante, denn viele Leute nutzen ein dunkles Browser-Design.
- Nutz den Platz. Großer Innenabstand lässt das Icon neben anderen Tabs winzig wirken; 0 bis 10 Prozent sehen meist gut aus, bei runden Formen etwas mehr.
- Ein farbiger Hintergrund mit der Form Abgerundet oder Rund ergibt eine gut erkennbare Kachel; ein transparenter Hintergrund funktioniert, wenn das Symbol auf hellen und dunklen Tabs genug Kontrast hat.
Typische Probleme und Lösungen
- Das alte Icon wird noch angezeigt: Browser speichern Favicons lange zwischen. Öffne die Datei direkt, lade mit Strg+F5 neu oder häng eine Version an die Adresse an, zum Beispiel favicon.ico?v=2.
- Google zeigt eine allgemeine Weltkugel: Stell sicher, dass das Favicon ohne Anmeldung erreichbar ist, nicht in der robots.txt gesperrt ist und quadratisch ist. Bis die Suchergebnisse aktualisiert sind, können Tage oder Wochen vergehen.
- Das Icon auf dem iPhone-Home-Bildschirm hat schwarze Ränder: Das Apple-Icon war transparent. Nimm die Datei aus dem Generator, sie hat einen festen Hintergrund.
- Das Icon sieht unscharf aus: Die Vorlage war zu klein. Nimm ein Bild mit mindestens 512 Pixeln oder ein SVG.
- Auf manchen Seiten fehlt das Icon: Die Tags stehen nur in der Vorlage mancher Seiten, oder die Pfade sind relativ. Nimm Pfade, die mit einem Schrägstrich beginnen, wie im erzeugten Code.