FailX
Alle Tools

FailX Specials

Geld für Kinder

Spiele

Werkzeuge

Dokumente

Bild

Rechner

Text

Favicon-Generator

Erstelle ein Favicon aus Buchstaben, einem Emoji oder einem Bild. favicon.ico, Apple- und Android-Icons, Manifest und HTML-Tags in einem Download.

Form

Vorschau

Meine Website

In Originalgröße: 16, 32, 48 und 180 px. Achte darauf, dass es auch bei 16 px lesbar bleibt.

Das ZIP enthält: favicon.ico (16, 32, 48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-tags.html

Tags für dein HTML-<head>

<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">

Lade die Dateien ins Stammverzeichnis deiner Website hoch (z. B. https://deine-domain/favicon.ico) und füge diese Tags in den <head> jeder Seite ein.

Alles wird in deinem Browser verarbeitet. Nichts wird an unsere Server gesendet.

Anleitung

Das Wichtigste

  • Erstellt ein komplettes Favicon-Paket für Browser, iPhone und Android aus Text, Emoji oder Bild.
  • Lade die Dateien ins Stammverzeichnis und füge die HTML-Tags in den <head> ein.
  • Ein, zwei Buchstaben oder ein einfaches Symbol bleiben bei 16 px lesbar.

Was ist ein Favicon?

Das kleine Symbol in Browser-Tabs, Lesezeichen, Suchergebnissen und auf dem Startbildschirm von Handys. Google zeigt es in den Suchergebnissen neben deinem Seitennamen – ohne Favicon erscheint nur ein Standard-Globus.

Die Dateien im Paket

  • favicon.ico (16, 32, 48 px) — Browser-Tabs, ältere Browser, Suchergebnisse
  • favicon-16x16.png, favicon-32x32.png — Tabs und Lesezeichen moderner Browser
  • apple-touch-icon.png (180 px) — „Zum Home-Bildschirm“ auf iPhone und iPad
  • android-chrome-192x192.png, 512x512.png — Android-Startbildschirm und installierbare Web-Apps
  • site.webmanifest — Symbol, Name und Designfarbe für Android

Auf der Website einbinden

  1. Entpacke alle Dateien und lade sie ins Stammverzeichnis deiner Website.
  2. Füge die Tags aus favicon-tags.html in den <head> jeder Seite ein.
  3. In WordPress lädst du das 512-px-PNG unter Design → Customizer → Website-Informationen → Website-Icon hoch.
  4. Browser speichern Favicons lange zwischen – prüfe mit hartem Neuladen (Strg+F5) oder einem privaten Fenster.

Tipps für ein klares Favicon

  • Bei 16 px sind ein, zwei Buchstaben oder ein einfaches Symbol am besten lesbar; ein ganzes Logo verschwimmt.
  • Setz auf starken Kontrast und prüfe die Vorschau auf hellen und dunklen Tabs.
  • Bei transparentem Hintergrund wird das Apple-Icon weiß gefüllt, weil iOS Transparenz schwarz darstellt.

Häufige Fragen

Reicht nicht einfach favicon.ico?

Für Browser-Tabs schon, aber Handys brauchen größere PNG-Icons, wenn jemand deine Seite zum Startbildschirm hinzufügt. Das komplette Paket ist empfehlenswert.

Ich habe das Favicon geändert, sehe aber noch das alte.

Browser speichern Favicons hartnäckig zwischen. Versuch hartes Neuladen (Strg+F5) oder ein privates Fenster. In Suchergebnissen kann es einige Tage dauern.

Wird mein Bild hochgeladen?

Nein. Alle Icons entstehen in deinem Browser und verlassen dein Gerät nie.