Wiki

Favicon Tool - Anleitung

Mit dem Favicon Tool kannst du aus einem einzigen Bild alle benötigten Favicon-Formate für deine Website generieren.

Was ist ein Favicon?

Ein Favicon ist das kleine Icon, das in Browser-Tabs, Lesezeichen und Suchergebnissen neben deinem Website-Namen angezeigt wird. Es stärkt deine Markenidentität und macht deine Seite wiedererkennbar.

Voraussetzungen

Optimales Ausgangsbild

Format: PNG oder JPG
Größe: Mindestens 512×512 Pixel (empfohlen: 1024×1024 Pixel)
Motiv: Einfaches, klares Logo oder Symbol
Hintergrund: Transparent (PNG) oder einfarbig

💡 Tipp: Verwende ein quadratisches Bild mit einfachem Motiv. Details gehen bei kleinen Größen verloren.

Favicon generieren

Gehe zu Favicon Tool in der Navigation
Klicke auf "Bild hochladen"
Wähle dein Logo/Icon (mindestens 512×512 Pixel)
Klicke auf "Favicons generieren"

Das Tool erstellt automatisch alle benötigten Formate:

favicon.ico (16×16, 32×32, 48×48)
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png (180×180)
android-chrome-192x192.png
android-chrome-512x512.png

Favicons einbinden

Automatischer Download

Nach der Generierung erhältst du ein ZIP-Archiv mit allen Dateien und einem HTML-Snippet.

HTML-Code einfügen

Füge diesen Code in den <head>-Bereich deiner Website ein:

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

Dateien hochladen

Lade alle generierten Dateien in das Root-Verzeichnis deiner Website (dort wo auch die index.html liegt).

Progressive Web App (PWA)

Für fortgeschrittene Nutzer generiert das Tool auch eine site.webmanifest Datei:

{
      "name": "Deine Website",
      "short_name": "DW",
      "icons": [
            {
                  "src": "/android-chrome-192x192.png",
                  "sizes": "192x192",
                  "type": "image/png"
            },
            {
                  "src": "/android-chrome-512x512.png",
                  "sizes": "512x512",
                  "type": "image/png"
            }
      ],
      "theme_color": "#ffffff",
      "background_color": "#ffffff",
      "display": "standalone"
}

Passe name und short_name an deine Website an.

Überprüfung

Nach der Einbindung kannst du das Favicon testen:

Leere den Browser-Cache (Strg+Shift+R / Cmd+Shift+R)
Rufe deine Website auf
Das Favicon sollte im Browser-Tab erscheinen

⚠️ Hinweis: Es kann bis zu 24 Stunden dauern, bis Suchmaschinen das neue Favicon in ihren Ergebnissen anzeigen.

Häufige Probleme

Favicon wird nicht angezeigt

Browser-Cache leeren
Prüfe, ob die Dateien im Root-Verzeichnis liegen
Kontrolliere die Dateipfade im HTML-Code

Favicon sieht pixelig aus

Verwende ein hochauflösendes Ausgangsbild (min. 512×512)
Einfache Motive funktionieren besser als komplexe Logos

Alte Favicons werden noch angezeigt

Leere den Browser-Cache vollständig
Teste im Inkognito-Modus
Warte 24h für vollständige Aktualisierung

Anonymous