Favicon-Generator

Was ist ein Favicon?

Das kleine Symbol, das eine Website im Browser-Tab, in Lesezeichen, im Verlauf, in mobilen Suchergebnissen und auf dem Startbildschirm eines Smartphones darstellt, wenn man die Seite dort ablegt. Ohne Favicon zeigt der Browser ein allgemeines Symbol, was eine Website unfertig wirken lässt.

Ihr Favicon erstellen

Wählen Sie ein Bild, idealerweise quadratisch und mindestens 512 × 512 Pixel groß. Toolo erzeugt:

• eine favicon.ico-Datei, das historische Format, das überall erkannt wird;
• ein PNG-Paket in modernen Größen, als ZIP herunterladbar.

Die Dateien einbinden

Legen Sie favicon.ico in das Stammverzeichnis Ihrer Website: Browser suchen es automatisch unter /favicon.ico. Fügen Sie dann im <head> Ihrer Seiten die passenden Tags ein, zum Beispiel:

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Für eine installierbare Web-App tragen Sie die Symbole 192 und 512 in Ihre Datei manifest.webmanifest ein.

Ein winziges Symbol gut gestalten

• Vereinfachen: Bei 16 Pixeln wird ein detailreiches Logo zum Fleck. Ein Buchstabe, ein Zeichen oder eine einfache Form funktioniert besser.
• Kontrast: Das Symbol muss auf hellen wie auf dunklen Tabs lesbar bleiben.
• Fläche nutzen: Lassen Sie wenig Rand um das Motiv.

Mein neues Favicon wird nicht angezeigt

Browser speichern Favicons lange zwischen. Laden Sie die Seite mit erzwungener Aktualisierung neu, öffnen Sie die Website in einem privaten Fenster oder hängen Sie einen Versionsparameter an die Adresse an, etwa /favicon.ico?v=2.

Favicon erstellen: Schritt für Schritt

1. Ausgangsbild vorbereiten: ein Quadrat mit mindestens 512 × 512 Pixeln, am besten ein transparentes PNG. Ein schlichtes Logo oder ein einzelner Buchstabe bleibt auch bei 16 Pixeln erkennbar.
2. Dateien erzeugen: Legen Sie das Bild oben ab und laden Sie die favicon.ico (16, 32 und 48 px in einer Datei) sowie das PNG-Paket als ZIP herunter, das favicon-16x16.png bis favicon-512x512.png enthält.
3. Hochladen ins Stammverzeichnis der Website: favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png und favicon-180x180.png, umbenannt in apple-touch-icon.png.
4. Einbinden im <head> jeder Seite.

Die HTML-Tags zum Kopieren

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
• <link rel="manifest" href="/manifest.webmanifest">, nur wenn Ihre Website ein Manifest hat, in dem Sie die PNGs mit 192 und 512 px für Android eintragen.

WordPress und Shopify: die Einstellung „Website-Icon“

In einem CMS müssen Sie keinen Code anfassen. In WordPress finden Sie das Website-Icon unter Design > Customizer > Website-Informationen oder, bei Block-Themes, im Block „Website-Logo“: Laden Sie das PNG mit 512 px hoch, die Tags setzt WordPress selbst. In Shopify öffnen Sie Onlineshop > Themes > Anpassen und dann die Theme-Einstellungen, je nach Theme unter Logo oder Favicon.

Warum noch das alte Favicon erscheint

Neben dem Browser-Cache kann auch ein Cache-Plugin oder ein CDN die alte Datei ausliefern: Leeren Sie den Cache nach der Änderung. In den Google-Suchergebnissen wird das Favicon erst beim nächsten Crawlen Ihrer Startseite aktualisiert, was einige Tage dauern kann.

Häufige Fragen

Muss das Bild quadratisch sein?

Idealerweise ja. Ein nicht quadratisches Bild wird angepasst und kann dabei leicht verzerrt werden. Schneiden Sie es vorher mit „Bild zuschneiden“ quadratisch zu.

Wird mein Bild an einen Server gesendet?

Nein. Die Symbole werden in Ihrem Browser erzeugt; das Bild verlässt Ihr Gerät nicht.

Bleibt ein transparentes PNG transparent?

Ja. Die Transparenz bleibt in der ICO-Datei und in den PNGs erhalten.

Brauche ich wirklich alle Größen?

Für Tabs reicht favicon.ico. Die PNGs mit 180, 192 und 512 Pixeln verbessern die Darstellung auf Smartphone-Startbildschirmen und in Web-Apps.

Welche HTML-Tags braucht ein Favicon?

Mindestens <link rel="icon" href="/favicon.ico" sizes="any"> und <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Mit dem PNG in 32 px und einem Manifest decken Sie zusätzlich Android und Web-Apps ab.

Welche Größe braucht das Website-Icon in WordPress?

WordPress verlangt ein quadratisches Bild mit mindestens 512 × 512 Pixeln: Nehmen Sie die Datei favicon-512x512.png aus dem Paket.

Enthält das Paket eine Manifest-Datei?

Nein, das ZIP enthält nur die PNG-Bilder. Braucht Ihre Website ein Manifest, legen Sie die Datei manifest.webmanifest selbst an und tragen dort die PNGs mit 192 und 512 px ein.