Zum Inhalt springen
Browser Tools

Favicon-Generator

Erstelle alle Icons, die deine Website braucht, von favicon.ico bis zu iPhone- und Android-Icons, aus einem Buchstaben, einem Emoji oder deinem Logo. Du lädst ein ZIP mit dem HTML-Code zum Einfügen herunter.

  • Kostenlos, ohne Anmeldung
  • Läuft in deinem Browser
  • Aktualisiert

Choose an image to see your icon

Paste this into your site's <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">

The zip has favicon.ico (16, 32 and 48 px), PNGs for browsers, iPhone and Android, and site.webmanifest.

Die Schaltflächen und Beschriftungen des Tools sind vorerst auf Englisch.

Vollständige Anleitung lesen (auf Englisch): How to Create a Favicon for Your Website (ICO, PNG, Apple)

So erstellst du ein Favicon

Kurze Antwort: Für ein Favicon wählst du Text oder ein Bild, suchst Farben und Form aus, lädst das Paket herunter und fügst es in deine Website ein.

  1. Text oder Bild wählen. Gib 1–3 Buchstaben oder ein Emoji ein oder lade dein Logo hoch (am besten ein quadratisches PNG oder SVG).
  2. Farben und Form wählen. Achte auf die kleinen Vorschauen: Sie zeigen, wie das Icon im Browser-Tab aussieht.
  3. Paket herunterladen. Das ZIP enthält favicon.ico, PNG-Icons und eine site.webmanifest.
  4. In die Website einfügen. Kopiere die Dateien in das Stammverzeichnis deiner Website und füge den HTML-Code in den <head> ein.

Welche Favicon-Größen brauche ich?

favicon.ico (16, 32 und 48 px) für Browser-Tabs und Windows, ein apple-touch-icon mit 180 × 180 für iPhones sowie Icons mit 192 und 512 px für Android und installierte Web-Apps. Das ZIP enthält alle.

Tipps für ein klares Favicon

Bei 16 Pixeln verschwinden Details. Nimm ein oder zwei kräftige Buchstaben oder ein einfaches Symbol mit starkem Kontrast zwischen Icon und Hintergrund.

Häufige Fragen

Wie füge ich ein Favicon in WordPress ein?

Geh in WordPress zu Design → Customizer → Website-Informationen → Website-Icon und lade android-chrome-512x512.png aus dem ZIP hoch.

Kann ich ein Emoji als Favicon verwenden?

Ja. Gib es ins Textfeld ein. Es wird mit der Emoji-Schrift deines Geräts gezeichnet.

Warum wird mein neues Favicon nicht angezeigt?

Browser speichern Favicons hartnäckig zwischen. Öffne deine Website in einem privaten Fenster oder leere den Cache, um es zu sehen.