Favicon-Generator

Mit dem Favicon-Generator erstellst du das kleine Symbol für den Browser-Tab deiner Website – aus einem Buchstaben, einem Kürzel, einem Emoji oder deinem Logo. Du bekommst alle wichtigen Größen von 16 × 16 bis 512 × 512 Pixel, eine fertige favicon.ico, die Datei site.webmanifest und den HTML-Code für den <head>. Alles entsteht direkt in deinem Browser, nichts wird hochgeladen.

So benutzt du den Favicon-Generator

Oben wählst du zwischen zwei Modi: „Buchstabe / Emoji“ und „Bild / Logo“.

Den „Name der Website“ siehst du in einer kleinen Tab-Vorschau neben deinem Favicon – so erkennst du sofort, wie das Symbol in der Browserleiste wirkt. Derselbe Name landet in der site.webmanifest. Farben nimmt der Generator mit oder ohne Raute an, auch in Kurzform wie #fff; ungültige Eingaben ersetzt er durch die Standardfarben Blau (#2563eb) und Weiß.

Favicon erstellen: So rechnet der Generator die Schriftgröße

Ein Favicon muss auf 16 × 16 Pixeln genauso funktionieren wie auf 512 × 512. Der Generator zeichnet deshalb jede Größe einzeln neu, statt ein großes Bild herunterzurechnen. Die Schriftgröße passt er an die Zahl der Zeichen an:

Gezählt werden höchstens drei Zeichen; ein einfaches Emoji wie 🚀 zählt als ein Zeichen. Wird der Text trotzdem breiter als 90 % des Bildes, verkleinert der Generator ihn weiter. Anschließend wird er genau in die Mitte gesetzt. Beim Bildmodus schneidet der Generator dein Bild quadratisch aus der Mitte zu und zieht vom Rand den eingestellten Prozentwert ab.

Beispiele: Favicons für Blog, Firma und WordPress

Favicon-Größen: Welche Dateien du wirklich brauchst

Der Favicon-Generator liefert diese acht Dateien. Die Dateinamen entsprechen den gängigen Konventionen:

Die Schriftgröße schrumpft mit jedem zusätzlichen Zeichen deutlich. Diese Grafik zeigt die Werte bei 32 × 32 Pixeln und Größe 70 %:

HTML-Code: So bindest du das Favicon ein

Lade alle Dateien ins Hauptverzeichnis deiner Website, also dorthin, wo auch die Startseite liegt. Dann kopierst du den HTML-Code aus dem Favicon-Generator in den <head>-Bereich jeder Seite:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

• rel=“icon“ verweist auf die favicon.ico und die PNG-Dateien. Der Browser wählt die passende Größe.
• rel=“apple-touch-icon“ liefert das Symbol, wenn jemand deine Seite auf dem iPhone zum Home-Bildschirm hinzufügt. iOS rundet die Ecken dabei selbst ab.
• rel=“manifest“ verweist auf die site.webmanifest mit dem Namen deiner Website, der Hintergrundfarbe als Designfarbe und den Icons in 192 und 512 Pixeln.

Was steht in der site.webmanifest vom Favicon-Generator?

Die Datei enthält „name“ und „short_name“ (beide aus „Name der Website“), die beiden Android-Icons, „theme_color“ (deine Hintergrundfarbe), „background_color“ Weiß und „display“ mit dem Wert „standalone“. Du kannst sie in jedem Texteditor anpassen, etwa einen kürzeren Namen für den Startbildschirm eintragen.

Favicon in WordPress einbauen

In WordPress brauchst du weder FTP noch HTML-Code. Das System hat ein eingebautes Website-Icon:

1. Im Favicon-Generator die Datei android-chrome-512×512.png herunterladen.
2. Ab WordPress 6.5: Einstellungen → Allgemein → Website-Icon. In älteren Versionen und bei vielen klassischen Themes geht es auch über Design → Customizer → Website-Informationen → Website-Icon.
3. Bild hochladen oder aus der Mediathek wählen und speichern. Das Bild muss quadratisch sein und mindestens 512 × 512 Pixel groß.

WordPress rechnet daraus die kleineren Größen selbst und fügt die Verweise in den Seitenkopf ein. Wer zusätzlich eigene Dateien per FTP und HTML-Code einbaut, riskiert doppelte Angaben – entscheide dich für einen Weg.

Favicon-Generator-Tipps: Design, das auf 16 Pixeln funktioniert

Wie groß muss ein Favicon sein?

Im Tab zeigt der Browser das Favicon meist mit 16 × 16 Pixeln an, auf hochauflösenden Bildschirmen mit 32 × 32. Für Handy-Startbildschirme sind 180 und 192 Pixel üblich, für installierte Web-Apps und WordPress 512 Pixel. Google empfiehlt für die Anzeige in den Suchergebnissen ein quadratisches Favicon größer als 48 × 48 Pixel. Der Generator deckt all diese Größen ab.

Welche Farben eignen sich?

Starker Kontrast ist Pflicht: helle Schrift auf dunklem Grund oder umgekehrt. Bedenke, dass Browser-Tabs hell oder dunkel sein können – eine farbige Fläche wirkt in beiden Varianten. Hex-Codes wie #2563eb kannst du mit dem Hexadezimal-Rechner oder dem Zahlensystem-Rechner in Dezimalwerte umrechnen: 25, 63 und EB entsprechen 37, 99 und 235 für Rot, Grün und Blau.

Welche Form ist die beste?

„Abgerundet“ ist voreingestellt und wirkt modern. Der Kreis passt zu runden Logos. Das Quadrat nutzt die Fläche voll aus – iOS rundet die Ecken des Apple-Touch-Icons ohnehin selbst ab.

Häufige Fehler beim Favicon

• ✅ Zu viele Details: Schriftzüge, feine Linien und Fotos verschwimmen auf 16 Pixeln.
• ✅ Nicht quadratisches Logo: Der Generator schneidet aus der Mitte zu – Ränder eines Querformats gehen verloren.
• ✅ Falscher Ordner: Die Dateien gehören ins Hauptverzeichnis, sonst passen die Pfade im HTML-Code nicht.
• ✅ Manifest vergessen: Ohne site.webmanifest fehlen Android die Icons in 192 und 512 Pixeln.
• ✅ Zu kleines Website-Icon in WordPress: WordPress verlangt mindestens 512 × 512 Pixel. Nimm die 512er-Datei aus dem Generator, kein kleineres PNG.
• ✅ Cache unterschätzt: Nach dem Austausch ist das alte Favicon oft noch eine Weile zu sehen.

Häufige Fragen zum Favicon-Generator

Was ist ein Favicon?

Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, in Lesezeichen, im Verlauf und auf dem Handy-Startbildschirm erscheint. Der Name kommt von „favorite icon“. Ein gutes Favicon macht deine Seite zwischen vielen offenen Tabs sofort erkennbar.

Wie erstelle ich ein Favicon kostenlos?

Im Favicon-Generator gibst du einen Buchstaben, ein Kürzel oder ein Emoji ein oder wählst dein Logo aus. Danach Farben, Form und Schrift einstellen und die Dateien herunterladen. Das kostet nichts und funktioniert ohne Anmeldung.

Welche Größe sollte ein Favicon haben?

Für den Browser-Tab sind 16 × 16 und 32 × 32 Pixel üblich, für das iPhone 180 × 180 und für Android 192 × 192 und 512 × 512 Pixel. WordPress verlangt für das Website-Icon mindestens 512 × 512 Pixel. Der Generator erstellt alle diese Größen auf einmal.

Brauche ich heute noch eine favicon.ico?

Sie schadet nicht und ist ein sicherer Rückfall: Viele Browser suchen von sich aus nach /favicon.ico im Hauptverzeichnis. Moderne Browser nutzen zusätzlich die PNG-Dateien aus dem HTML-Code. Die favicon.ico aus dem Generator enthält 16, 32 und 48 Pixel.

Wie füge ich ein Favicon in WordPress ein?

Lade die 512-Pixel-Datei aus dem Generator unter Einstellungen → Allgemein → Website-Icon hoch, in älteren WordPress-Versionen unter Design → Customizer → Website-Informationen. WordPress erzeugt die übrigen Größen selbst. HTML-Code ist dafür nicht nötig.

Warum wird mein Favicon nicht angezeigt?

Meist liegt es am Browser-Cache: Lade die Seite mit Strg + F5 neu oder öffne sie in einem privaten Fenster. Prüfe außerdem, ob die Dateien im Hauptverzeichnis liegen und die Pfade im HTML-Code stimmen. Bis Google ein neues Favicon in den Suchergebnissen zeigt, kann es länger dauern.

Werden meine Bilder beim Favicon-Generator hochgeladen?

Nein. Das Bild wird nur in deinem Browser verarbeitet, auch favicon.ico und site.webmanifest entstehen direkt auf deinem Gerät. Es werden keine Dateien an einen Server übertragen.

Kann ich ein Emoji als Favicon verwenden?

Ja, trag das Emoji im Modus „Buchstabe / Emoji“ ein. Der Generator zeichnet es mit der Emoji-Schrift deines Geräts in alle Größen. Deshalb sieht es auf Windows, Android und Apple-Geräten jeweils etwas anders aus – entscheidend ist das Gerät, auf dem du das Favicon erstellst.

Was ist ein Apple-Touch-Icon?

Das Apple-Touch-Icon ist ein 180 × 180 Pixel großes PNG, das iPhone und iPad anzeigen, wenn jemand deine Website zum Home-Bildschirm hinzufügt. Der Generator speichert es als apple-touch-icon.png und verlinkt es im HTML-Code.

Passende Rechner und Generatoren: So geht es weiter

Wie scharf dein Logo auf Bildschirmen wirkt, zeigt der PPI-Rechner; das passende Format für Banner und Vorschaubilder findest du mit dem Seitenverhältnis-Rechner. Für Text-Logos aus Zeichen gibt es den ASCII-Art-Generator. Alle Werkzeuge rund um PC und Website findest du unter Computer- und Internet-Rechner.