# Favicon-Anleitung: das Symbol Ihrer Website erstellen

Das Favicon ist das kleine Bild, das Ihre Website im Browser-Tab, in den Lesezeichen, bei Google und auf dem Startbildschirm von Handys vertritt. Dieser Kurzkurs erklärt, warum es mehrere Dateien braucht und wie Sie diese mit wenigen Klicks erhalten.

- Minikurs : Einsteiger
- URL : https://ressources.online/outils/favicon/tutoriel/de/
- Werkzeug öffnen : https://ressources.online/outils/favicon/
- Aktualisiert am 2026-09-27

## Das lernen Sie

- Wissen, wo das Favicon erscheint und warum es Besuchern hilft, Sie wiederzuerkennen.
- Die verschiedenen Dateien verstehen: ICO, PNG, SVG, Symbole für iPhone und Android.
- Ein Symbol gestalten, das auch mit 16 Pixeln lesbar bleibt.
- Die Symbole in WordPress oder auf einer selbst gebauten Website einrichten und das Ergebnis prüfen.

## Das Favicon in 5 Minuten verstehen

### Ein kleines Bild, das überall auftaucht

Das Wort kommt vom englischen *favorites icon*, also „Symbol der Favoriten“. Es erschien 1999 im Internet Explorer, um die Favoritenliste zu schmücken. Heute zeigt es sich an vielen Stellen:

- im **Tab** des Browsers, neben dem Seitentitel;
- in den **Lesezeichen** und im Verlauf;
- in den **Google-Ergebnissen**, links vom Namen der Website;
- auf dem **Startbildschirm** eines Handys, wenn jemand Ihre Website dort wie eine App ablegt.
Hat ein Besucher fünfzehn Tabs offen, ist es oft der einzige Anhaltspunkt, um Ihren wiederzufinden. Ohne Favicon zeigt der Browser ein graues Standardsymbol, und die Website wirkt unfertig.

### Warum mehrere Größen und mehrere Dateien

Jeder Ort hat eigene Anforderungen. Der Tab zeigt das Symbol mit 16 oder 32 Pixeln, Google möchte ein Quadrat von mindestens 48 Pixeln, das iPhone erwartet 180 Pixel, Android verlangt 192 und 512 Pixel. Wird ein großes Bild auf 16 Pixel verkleinert, wirkt es oft verschwommen; ein kleines Bild zu vergrößern macht es pixelig.

Daher gibt es ein kleines Paket von Dateien, jede mit ihrer Aufgabe:

- `favicon.ico` für Tabs und Lesezeichen;
- `apple-touch-icon.png` für iPhone und iPad;
- `icon-192.png`, `icon-512.png` und eine „maskable“ Version für Android;
- `site.webmanifest`, eine kleine Datei, die Android den Namen der Website und ihre Symbole nennt.
Ein paar Zeilen Code in der Seite sagen dem Browser, wo er jede Datei findet.

### ICO, PNG oder SVG?

Das **ICO**-Format ist ein Behälter: Eine einzige Datei enthält mehrere Größen (hier 16, 32 und 48 Pixel), und der Browser wählt die passende. Es ist das älteste und am weitesten verbreitete Format.

**PNG** ist ein gewöhnliches Bild in einer einzigen Größe, das Transparenz beherrscht. Es ist das Format für Handy-Symbole. JPEG dagegen kennt keine Transparenz und verwischt feine Kanten: besser meiden.

**SVG** ist ein Vektorbild: Es besteht aus Formen statt aus Bildpunkten und bleibt deshalb in jeder Größe scharf. Die meisten aktuellen Browser akzeptieren es als Favicon. Unser Generator erstellt eine `icon.svg` nur, wenn Ihr Logo bereits ein SVG ist: Ein Foto würde durch die Umwandlung in SVG nicht schärfer.

### Transparenz: was iPhone und Android daraus machen

Im Tab ist ein transparenter Hintergrund ideal: Das Symbol liegt auf der Farbe des Browsers, hell oder dunkel. Vorsicht jedoch bei einem schwarzen Logo, das in einem dunklen Tab verschwindet.

Das **iPhone** akzeptiert auf dem Startbildschirm keine Transparenz: Es füllt transparente Stellen schwarz und rundet die Ecken selbst ab. Deshalb setzt das Werkzeug Ihr Logo für `apple-touch-icon.png` auf die gewählte **Hintergrundfarbe**.

**Android** schneidet Symbole je nach Handy zu: rund, als abgerundetes Quadrat, als Tropfen. Ein sogenanntes **maskable** Symbol berücksichtigt das: Das Motiv muss in einen mittigen Kreis passen, der 80 % der Breite einnimmt, die **Sicherheitszone**. Der Rest ist nur Hintergrund und darf abgeschnitten werden. Das Werkzeug fügt diesen Rand automatisch hinzu.

### Lesbar mit 16 Pixeln, und Geduld mit dem Cache

Ein Symbol mit 16 mal 16 Pixeln hat insgesamt nur 256 Bildpunkte. Ein geschriebener Name, ein Slogan oder feine Linien werden zum Fleck. Behalten Sie nur das Zeichen Ihres Logos oder ein bis zwei kontrastreiche Initialen, die das Quadrat füllen. Kleiner Test: Betrachten Sie die Vorschau mit zusammengekniffenen Augen.

Nach der Einrichtung kann es dauern, bis Ihr neues Symbol erscheint. Browser behalten das alte in ihrem Speicher, dem **Cache**, manchmal tagelang. Zur Kontrolle öffnen Sie Ihre Website in einem privaten Fenster. Google aktualisiert die Symbole in den Ergebnissen, wenn es Websites erneut besucht: Rechnen Sie mit einigen Tagen bis Wochen.

> Das Wichtigste : Ein gutes Favicon ist schlicht, kontrastreich und besteht aus mehreren Dateien: ICO für Tabs, PNG mit vollem Hintergrund für das iPhone, PNG mit Sicherheitsrand für Android.

## Wichtige Begriffe

- **Favicon** : Kleines Symbol, das eine Website in Tabs, Lesezeichen, Google-Ergebnissen und auf dem Startbildschirm vertritt.
- **ICO** : Dateiformat, das mehrere Größen desselben Symbols in einer einzigen Datei bündelt.
- **SVG** : Vektorbildformat, das aus Formen besteht: Es bleibt in jeder Größe scharf.
- **Transparenz** : Farblose Bereiche eines Bildes, durch die der Hintergrund des Bildschirms sichtbar ist. PNG und SVG beherrschen sie, JPEG nicht.
- **apple-touch-icon** : Symbol mit 180 Pixeln, das iPhone und iPad verwenden, wenn man eine Website zum Startbildschirm hinzufügt.
- **Maskable Symbol** : Android-Symbol mit Sicherheitsrand, gedacht zum Zuschneiden als Kreis oder abgerundetes Quadrat.
- **Manifest** : Die Datei site.webmanifest: eine kleine Textdatei, die Android Namen, Symbole und Farbe der Website mitteilt.
- **Cache** : Speicher des Browsers, der bereits gesehene Dateien aufbewahrt, um schneller zu sein, manchmal zu lange.

## Ihr Favicon Schritt für Schritt erstellen

### Schritt 1 : Quelle wählen: Logo oder Initialen

Öffnen Sie den [Favicon-Generator](https://ressources.online/outils/favicon/). Es gibt zwei Reiter: **Mein Logo** und **Initialen**.

Unter **Mein Logo** klicken Sie auf **Logo auswählen** oder ziehen die Datei in den Rahmen. Das beste Ergebnis liefert ein SVG oder ein quadratisches PNG mit mindestens 512 Pixeln. Ist das Bild zu klein oder sehr breit, erscheint ein Hinweis.

> Tipp : Ein sehr breites Logo mit dem Namen neben dem Zeichen wird im Quadrat winzig: Behalten Sie nur das Zeichen.

### Schritt 2 : Oder ein Symbol aus Initialen gestalten

Im Reiter **Initialen** tippen Sie ein bis drei Buchstaben in **Buchstaben (1 bis 3)**, zum Beispiel „CG“ für Claras Gärten. Wählen Sie **Hintergrundfarbe**, **Buchstabenfarbe** und **Schrift**: Montserrat, Georgia oder Courier.

Übernehmen Sie die Farben Ihrer Website und achten Sie auf starken Kontrast: helle Buchstaben auf dunklem Grund oder umgekehrt.

### Schritt 3 : Form, Rand und Hintergrund einstellen

Unter **Form** wählen Sie **Quadrat**, **Abgerundet** oder **Rund**. Der Regler **Rand** lässt mehr oder weniger Platz um das Motiv: Verringern Sie ihn, damit das Symbol das Quadrat gut ausfüllt.

Bei einem Logo ist **Hintergrund transparent lassen** bereits angekreuzt. Die **Hintergrundfarbe** wird trotzdem für das iPhone-Symbol verwendet, das nicht transparent sein kann. Tragen Sie zuletzt den **Name der Website (für Handys)** ein: Er erscheint unter dem Symbol auf dem Startbildschirm.

> Tipp : Ein kurzer Name mit höchstens 12 Zeichen wird unter dem Symbol auf Handys vollständig angezeigt.

### Schritt 4 : Die Vorschauen prüfen

Die Spalte **Vorschau** zeigt Ihr Symbol in einem hellen und einem dunklen Tab, dann **In den Google-Ergebnissen** und **Auf dem Startbildschirm** eines iPhones und eines Android-Handys.

Prüfen Sie drei Dinge: Das Symbol ist im kleinen Tab erkennbar, es bleibt im dunklen Tab sichtbar, und im Android-Kreis wird nichts Wichtiges abgeschnitten.

### Schritt 5 : Die Dateien herunterladen

Es gibt zwei Schaltflächen:

- **Alles herunterladen (.zip)**: Das Archiv enthält `favicon.ico`, `apple-touch-icon.png`, die Android-Symbole, `site.webmanifest`, `icon.svg`, falls Ihr Logo ein SVG ist, und eine Datei mit dem einzufügenden Code.
- **Symbol für WordPress (512 px)**: ein einzelnes quadratisches Bild, das auch für Wix, Squarespace, Shopify oder Jimdo passt.
Der HTML-Code erscheint darunter, mit einer Schaltfläche **Kopieren**.

### Schritt 6 : Symbole einrichten und prüfen

**WordPress**: **Design** › **Customizer** › **Website-Informationen** › **Website-Icon** (oder bei neueren Themes **Einstellungen** › **Allgemein**). Wählen Sie das Bild mit 512 Pixeln und klicken Sie auf **Veröffentlichen**: WordPress erstellt die übrigen Größen selbst.

**Selbst gebaute Website**: die .zip entpacken, die Dateien ins Hauptverzeichnis der Website legen und den Code in den `<head>`-Bereich jeder Seite einfügen. Prüfen Sie danach in einem privaten Fenster.

> Tipp : Wird noch das alte Symbol angezeigt, ist das nicht unbedingt ein Fehler: Oft ist es nur der Browser-Cache.

## Beispiele aus der Praxis

### Ein Verein ohne Logo

Claras Gärten e. V. hat noch kein Logo. Der Kassenwart nutzt den Reiter **Initialen**: „CG“ in Weiß auf dem Grün der Website, abgerundete Form. Er lädt das **Symbol für WordPress (512 px)** herunter und richtet es in zwei Minuten ein. Endlich fällt der Tab der Website zwischen den anderen auf.

### Eine Bäckerei mit sehr detailreichem Logo

Das Logo der Bäckerei zeigt eine Ähre, eine Mühle und den Namen in alter Schrift. Mit 16 Pixeln verschwimmt alles. Die Inhaberin schneidet das Logo auf die Ähre zu, speichert es als quadratisches PNG mit 1000 Pixeln und stellt den Rand auf das Minimum. Die Ähre bleibt im Tab wie auf dem Startbildschirm gut erkennbar.

### Ein Symbol, das sich nicht ändert

Die Ferienwohnung Lindenhof hat ihr Favicon ersetzt, aber das alte erscheint weiterhin. In einem privaten Fenster ist das neue zu sehen: Es lag am Cache. Bei Google folgt es einige Tage später. Um den Rest der Website zu prüfen, startet die Vermieterin danach die [komplette Website-Diagnose](https://ressources.online/outils/diagnostic/).

## Häufige Fehler

- Das ganze Logo samt Text auf 16 Pixel verkleinern: Es wird zu einem unlesbaren Fleck.
- Ein schwarzes Logo auf transparentem Hintergrund behalten: Im dunklen Tab verschwindet es.
- Von einem Bild mit 32 Pixeln ausgehen: Das Symbol auf dem Startbildschirm wird unscharf.
- Das Motiv bis an den Rand des Android-Symbols zeichnen: Beim runden Zuschnitt wird ein Teil des Logos abgeschnitten.
- Glauben, die Einrichtung sei gescheitert, obwohl der Browser nur noch das gespeicherte alte Symbol zeigt.

## Zusammengefasst

- Das Favicon erscheint in Tabs, Lesezeichen, Google-Ergebnissen und auf dem Startbildschirm von Handys.
- Jede Verwendung hat ihre Größe: 16 bis 48 Pixel für den Computer, 180 für das iPhone, 192 und 512 für Android.
- ICO für die Kompatibilität, PNG für Handys, SVG für perfekte Schärfe, wenn Ihr Logo ein Vektorbild ist.
- Das iPhone lehnt Transparenz ab und Android schneidet zu: Planen Sie einen Hintergrund und einen Rand ein.
- Ein gutes Favicon ist schlicht, kontrastreich und wird in einem privaten Fenster geprüft.

## Testen Sie sich

1. Warum braucht das iPhone-Symbol eine Hintergrundfarbe?
   - [x] Weil das iPhone Transparenz schwarz füllt
   - [ ] Weil das iPhone nur Fotos anzeigt
   - [ ] Weil die Datei sonst zu groß wäre
   Auf dem Startbildschirm akzeptiert das iPhone keine Transparenz: Leere Stellen werden schwarz. Ein voller Hintergrund verhindert diese Überraschung.

2. Wozu dient der Rand des „maskable“ Symbols unter Android?
   - [ ] Um die Datei leichter zu machen
   - [ ] Um den Namen der Website anzuzeigen
   - [x] Damit das Motiv beim Zuschneiden durch Android vollständig bleibt
   Android schneidet das Symbol rund oder als abgerundetes Quadrat zu. Das Motiv muss in die mittige Sicherheitszone passen, damit nichts abgeschnitten wird.

3. Ihr neues Favicon erscheint nicht im Browser. Was tun Sie zuerst?
   - [ ] Alle Symbole neu erstellen
   - [x] Die Website in einem privaten Fenster öffnen
   - [ ] Die Website löschen
   Der Browser behält das alte Symbol oft im Cache. Ein privates Fenster zeigt den tatsächlichen Stand.

4. Was eignet sich am besten für ein Symbol, das mit 16 Pixeln lesbar sein soll?
   - [ ] Das ganze Logo mit ausgeschriebenem Namen
   - [ ] Ein Foto des Teams
   - [x] Nur das Zeichen oder ein bis zwei kontrastreiche Initialen
   Mit 16 Pixeln bleiben nur einfache, kontrastreiche Formen erkennbar. Text und feine Details verschwinden.

---
Source : https://ressources.online/outils/favicon/tutoriel/de/ (Ressources.online, Favicon und Symbole)