Favicon erstellen: Favicon-Generator online

Ein Favicon für Ihre Website

Das Favicon ist das kleine Symbol im Browser-Tab, in den Lesezeichen und manchmal neben Ihrer Website in den Suchergebnissen. Mit diesem Favicon-Generator erstellen Sie alle nötigen Dateien aus einem Bild, ein paar Buchstaben oder einem Emoji: eine favicon.ico mit drei Größen, PNG-Dateien, das Symbol für den Startbildschirm von Handys, eine SVG-Datei, wenn möglich, und das Manifest der Website. Dazu kommt der fertige HTML-Code. Alles läuft auf Ihrem Gerät: Es wird kein Bild hochgeladen.

Praktisch für die Website eines Sportvereins, eines Handwerksbetriebs oder einer Arztpraxis.

So funktioniert es

1. Wählen Sie unter „Ausgangspunkt:“ die Option „Bild“, „Text oder Initialen“ oder „Emoji“.
2. Bei „Bild“ klicken Sie auf „Bild auswählen“ (PNG, JPG, SVG oder WebP). Bei Text geben Sie 1 bis 4 Zeichen ein und stellen „Schriftart“, „Schriftstärke“ und „Textfarbe“ ein.
3. Legen Sie die „Form“ fest (quadratisch, abgerundet oder rund), aktivieren Sie bei Bedarf „Farbiger Hintergrund“ und wählen Sie „Hintergrundfarbe“, „Rand“ und „Größe von Text oder Emoji“.
4. Prüfen Sie die „Vorschau in Originalgröße“ auf hellem und dunklem Hintergrund.
5. Tragen Sie „Name der Website“, „Designfarbe“, „Hintergrund des Startbildschirms“ und „Ordner der Dateien auf der Website“ ein.
6. Klicken Sie auf „Alle herunterladen (ZIP)“ und danach auf „Code kopieren“, um die HTML-Tags zu übernehmen.

Welche Größen heute nötig sind

Die favicon.ico bleibt für die Kompatibilität: Manche Browser und Programme fragen sie direkt im Hauptverzeichnis der Website ab, auch ohne Tag. Diese hier enthält drei Bilder: 16, 32 und 48 px. Die PNG-Dateien mit 16, 32 und 48 px nutzen aktuelle Browser. Das Symbol mit 180 × 180 px erscheint, wenn jemand Ihre Website auf den Startbildschirm seines Handys legt; die Ecken rundet das Handy selbst ab. Die Symbole mit 192 und 512 px stehen zusammen mit Name und Farben in der Datei site.webmanifest und dienen der Installation als App. Die SVG-Datei (bei Text oder SVG als Quelle) bleibt in jeder Größe scharf.

Beispiel: Ein Foto mit 1.200 × 800 px wird auf ein Quadrat von 800 × 800 px zugeschnitten, links und rechts fallen je 200 px weg. Mit 10 % „Rand“ belegt das Motiv 409,6 px des 512-px-Symbols und 12,8 px des 16-px-Symbols.

Wohin mit den Dateien und dem HTML-Code?

Entpacken Sie das ZIP-Archiv und laden Sie die Dateien in das Hauptverzeichnis Ihrer Website, neben die Startseite: Das Favicon liegt dann unter /favicon.ico. Legen Sie die Dateien woanders ab, etwa in /icons/, tragen Sie diesen Ordner unter „Ordner der Dateien auf der Website“ ein; Code und Manifest werden angepasst. Fügen Sie die Tags dann in den <head> jeder Seite ein.

Tipps für die Gestaltung

• Bleiben Sie schlicht: ein Buchstabe, zwei Initialen oder ein Zeichen. Ein komplettes Logo wird bei 16 px zum Fleck.
• Prüfen Sie die Lesbarkeit bei 16 px in der Vorschau: So groß ist das Symbol im Tab.
• Achten Sie auf Kontrast: Ein farbiger Hintergrund mit weißem oder sehr dunklem Text ist auf hellen wie dunklen Tabs gut zu sehen.

Warum das neue Favicon erst spät erscheint

Browser speichern Favicons in einem eigenen Zwischenspeicher, oft mehrere Tage lang. Öffnen Sie nach dem Austausch direkt die Adresse /favicon.ico und laden Sie sie neu, oder leeren Sie den Browser-Cache. Damit alle Besucher die neue Version sehen, hängen Sie ?v=2 an jede Dateiadresse im HTML-Code an. In den Suchergebnissen erscheint das neue Favicon erst, wenn die Suchmaschine Ihre Website erneut besucht hat.

Häufige Fragen

Braucht man die favicon.ico noch?

Ja. Sie kostet fast nichts und dient älteren Browsern, Feedreadern und Programmen, die /favicon.ico abfragen, ohne den Seitencode zu lesen.

Warum sieht das Emoji auf meinem Handy anders aus?

Das Emoji wird mit der Schrift des Geräts gezeichnet, auf dem Sie das Symbol erstellen. Auf einem anderen System erstellt, sieht dasselbe Emoji anders aus.

Mein Bild ist rechteckig: Was passiert?

Die Mitte bleibt erhalten und wird quadratisch zugeschnitten, beide langen Seiten werden gleich gekürzt. Setzen Sie das Motiv in die Mitte.

Werden meine Einstellungen und mein Bild gespeichert?

Die Einstellungen bleiben für den nächsten Besuch auf diesem Gerät. Das Bild wird weder hochgeladen noch gespeichert.