So erstellst du ein Favicon
Um ein Favicon zu erstellen, füge oben dein Logo hinzu – oder gib einen Buchstaben oder ein Emoji ein –, passe das Aussehen an und lade die ZIP-Datei herunter. Die Vorschau zeigt das Icon in jeder echten Größe und in einem Browser-Tab, im hellen und im dunklen Modus.
- Quelle wählen. Ein Logo als PNG oder SVG funktioniert am besten; jedes andere Bild wird in ein Quadrat eingepasst. Kein Logo? Nimm einen Buchstaben oder ein Emoji auf farbigem Hintergrund.
- Aussehen festlegen. Hintergrundfarbe oder transparent, die Form (Quadrat mit runden Ecken, Quadrat oder Kreis) und wie viel Abstand um das Bild bleibt.
- Herunterladen. Mit Alle Icons herunterladen bekommst du das komplette Paket; mit Nur favicon.ico nur die eine Datei.
Das ist im Favicon-Paket enthalten
| Datei | Größe | Verwendet von |
|---|---|---|
favicon.ico | 16, 32 und 48 px | Allen Browsern, Windows, Suchergebnissen |
favicon-16x16.png, favicon-32x32.png | 16 und 32 px | Browser-Tabs und Lesezeichen |
apple-touch-icon.png | 180 px | Home-Bildschirm von iPhone und iPad |
android-chrome-192x192.png, -512x512.png | 192 und 512 px | Android-Home-Bildschirm, installierte Web-Apps |
site.webmanifest | - | Beschreibt die Icons und legt Farben für Android und Web-Apps fest |
favicon-html.txt | - | Die Tags zum Einfügen in deine Seiten |
Das Apple-Icon bekommt immer einen einfarbigen Hintergrund und eckige Ecken: iPhones runden die Ecken selbst ab und zeigen transparente Bereiche schwarz an.
Das Favicon in deine Website einbinden
- Entpacke das Paket und lade die Dateien in das Stammverzeichnis deiner Website hoch, neben deine Startseite, sodass
deineseite.de/favicon.icodas Icon öffnet. - Füge die HTML-Tags (oben angezeigt und in
favicon-html.txt) in den<head>deiner Seiten ein. - Lade die Seite neu und leere dabei den Cache. Browser behalten alte Favicons, deshalb ist ein privates Fenster die schnellste Kontrolle.
In WordPress kannst du stattdessen das 512-px-Icon im Customizer als Website-Icon festlegen, die anderen Größen erstellt WordPress selbst.
Tipps für ein gut erkennbares Favicon
- Vereinfache. Bei 16 Pixeln wird ein detailreiches Logo zu einem Fleck. Nimm lieber das Symbol aus deinem Logo oder den Anfangsbuchstaben statt des ganzen Logos mit Text.
- Achte auf Kontrast. Tabs sind je nach Browser-Design hell oder dunkel – prüfe beide Vorschauen.
- Beachte den Abstand. Weniger Abstand macht das Icon im Tab größer; etwas mehr sieht auf dem Home-Bildschirm des Handys besser aus.
Brauchst du stattdessen eine einzelne .ico-Datei in einer anderen Größe? Der Bildkonverter speichert jedes Bild als ICO.
Häufige Fragen
Wie erstelle ich ein Favicon?
Füge auf dieser Seite dein Logo oder ein beliebiges quadratisches Bild hinzu oder gib einen Buchstaben oder ein Emoji ein. Passe Hintergrund, Abstand und Form an und lade dann die ZIP-Datei mit allen Icon-Größen und dem HTML-Code für deine Website herunter.
Welche Größen braucht ein Favicon?
Eine favicon.ico mit den Versionen 16, 32 und 48 Pixel deckt Browser und Windows ab; ein apple-touch-icon mit 180 Pixel deckt iPhones und iPads ab; Icons mit 192 und 512 Pixeln decken Android und installierte Web-Apps ab. Das Paket enthält alle davon.
Wie binde ich das Favicon in meine Website ein?
Lade die Dateien aus der ZIP-Datei in das Stammverzeichnis deiner Website hoch, sodass sich favicon.ico unter deineseite.de/favicon.ico öffnen lässt. Füge dann die HTML-Tags in den Head-Bereich deiner Seiten ein.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons lange im Cache. Öffne die Favicon-Adresse direkt, lade sie neu oder probiere es in einem privaten Fenster. In den Suchergebnissen kann es Wochen dauern, bis es aktualisiert wird.
Kann ich ein Favicon aus Text oder einem Emoji erstellen?
Ja. Wähle „Buchstabe oder Emoji“, gib ein oder zwei Zeichen ein und such die Farben aus. So bekommst du schnell ein sauberes Icon ohne Logo.
Wird mein Bild hochgeladen?
Nein. Alle Icons werden in deinem Browser erstellt, dein Bild verlässt dein Gerät nie.