MinikursEinsteiger

Favicon-Anleitung: das Symbol Ihrer Website erstellen

Das Favicon ist das kleine Bild, das Ihre Website im Browser-Tab, in den Lesezeichen, bei Google und auf dem Startbildschirm von Handys vertritt. Dieser Kurzkurs erklärt, warum es mehrere Dateien braucht und wie Sie diese mit wenigen Klicks erhalten.

Werkzeug öffnen Zur Schritt-für-Schritt-Anleitung

Aktualisiert am

Das lernen Sie

  • Wissen, wo das Favicon erscheint und warum es Besuchern hilft, Sie wiederzuerkennen.
  • Die verschiedenen Dateien verstehen: ICO, PNG, SVG, Symbole für iPhone und Android.
  • Ein Symbol gestalten, das auch mit 16 Pixeln lesbar bleibt.
  • Die Symbole in WordPress oder auf einer selbst gebauten Website einrichten und das Ergebnis prüfen.

Modul 1

Das Favicon in 5 Minuten verstehen

Ein kleines Bild, das überall auftaucht

Das Wort kommt vom englischen favorites icon, also „Symbol der Favoriten“. Es erschien 1999 im Internet Explorer, um die Favoritenliste zu schmücken. Heute zeigt es sich an vielen Stellen:

  • im Tab des Browsers, neben dem Seitentitel;
  • in den Lesezeichen und im Verlauf;
  • in den Google-Ergebnissen, links vom Namen der Website;
  • auf dem Startbildschirm eines Handys, wenn jemand Ihre Website dort wie eine App ablegt.

Hat ein Besucher fünfzehn Tabs offen, ist es oft der einzige Anhaltspunkt, um Ihren wiederzufinden. Ohne Favicon zeigt der Browser ein graues Standardsymbol, und die Website wirkt unfertig.

Warum mehrere Größen und mehrere Dateien

Jeder Ort hat eigene Anforderungen. Der Tab zeigt das Symbol mit 16 oder 32 Pixeln, Google möchte ein Quadrat von mindestens 48 Pixeln, das iPhone erwartet 180 Pixel, Android verlangt 192 und 512 Pixel. Wird ein großes Bild auf 16 Pixel verkleinert, wirkt es oft verschwommen; ein kleines Bild zu vergrößern macht es pixelig.

Daher gibt es ein kleines Paket von Dateien, jede mit ihrer Aufgabe:

  • favicon.ico für Tabs und Lesezeichen;
  • apple-touch-icon.png für iPhone und iPad;
  • icon-192.png, icon-512.png und eine „maskable“ Version für Android;
  • site.webmanifest, eine kleine Datei, die Android den Namen der Website und ihre Symbole nennt.

Ein paar Zeilen Code in der Seite sagen dem Browser, wo er jede Datei findet.

ICO, PNG oder SVG?

Das ICO-Format ist ein Behälter: Eine einzige Datei enthält mehrere Größen (hier 16, 32 und 48 Pixel), und der Browser wählt die passende. Es ist das älteste und am weitesten verbreitete Format.

PNG ist ein gewöhnliches Bild in einer einzigen Größe, das Transparenz beherrscht. Es ist das Format für Handy-Symbole. JPEG dagegen kennt keine Transparenz und verwischt feine Kanten: besser meiden.

SVG ist ein Vektorbild: Es besteht aus Formen statt aus Bildpunkten und bleibt deshalb in jeder Größe scharf. Die meisten aktuellen Browser akzeptieren es als Favicon. Unser Generator erstellt eine icon.svg nur, wenn Ihr Logo bereits ein SVG ist: Ein Foto würde durch die Umwandlung in SVG nicht schärfer.

Transparenz: was iPhone und Android daraus machen

Im Tab ist ein transparenter Hintergrund ideal: Das Symbol liegt auf der Farbe des Browsers, hell oder dunkel. Vorsicht jedoch bei einem schwarzen Logo, das in einem dunklen Tab verschwindet.

Das iPhone akzeptiert auf dem Startbildschirm keine Transparenz: Es füllt transparente Stellen schwarz und rundet die Ecken selbst ab. Deshalb setzt das Werkzeug Ihr Logo für apple-touch-icon.png auf die gewählte Hintergrundfarbe.

Android schneidet Symbole je nach Handy zu: rund, als abgerundetes Quadrat, als Tropfen. Ein sogenanntes maskable Symbol berücksichtigt das: Das Motiv muss in einen mittigen Kreis passen, der 80 % der Breite einnimmt, die Sicherheitszone. Der Rest ist nur Hintergrund und darf abgeschnitten werden. Das Werkzeug fügt diesen Rand automatisch hinzu.

Lesbar mit 16 Pixeln, und Geduld mit dem Cache

Ein Symbol mit 16 mal 16 Pixeln hat insgesamt nur 256 Bildpunkte. Ein geschriebener Name, ein Slogan oder feine Linien werden zum Fleck. Behalten Sie nur das Zeichen Ihres Logos oder ein bis zwei kontrastreiche Initialen, die das Quadrat füllen. Kleiner Test: Betrachten Sie die Vorschau mit zusammengekniffenen Augen.

Nach der Einrichtung kann es dauern, bis Ihr neues Symbol erscheint. Browser behalten das alte in ihrem Speicher, dem Cache, manchmal tagelang. Zur Kontrolle öffnen Sie Ihre Website in einem privaten Fenster. Google aktualisiert die Symbole in den Ergebnissen, wenn es Websites erneut besucht: Rechnen Sie mit einigen Tagen bis Wochen.

Das WichtigsteEin gutes Favicon ist schlicht, kontrastreich und besteht aus mehreren Dateien: ICO für Tabs, PNG mit vollem Hintergrund für das iPhone, PNG mit Sicherheitsrand für Android.

Wichtige Begriffe

Favicon
Kleines Symbol, das eine Website in Tabs, Lesezeichen, Google-Ergebnissen und auf dem Startbildschirm vertritt.
ICO
Dateiformat, das mehrere Größen desselben Symbols in einer einzigen Datei bündelt.
SVG
Vektorbildformat, das aus Formen besteht: Es bleibt in jeder Größe scharf.
Transparenz
Farblose Bereiche eines Bildes, durch die der Hintergrund des Bildschirms sichtbar ist. PNG und SVG beherrschen sie, JPEG nicht.
apple-touch-icon
Symbol mit 180 Pixeln, das iPhone und iPad verwenden, wenn man eine Website zum Startbildschirm hinzufügt.
Maskable Symbol
Android-Symbol mit Sicherheitsrand, gedacht zum Zuschneiden als Kreis oder abgerundetes Quadrat.
Manifest
Die Datei site.webmanifest: eine kleine Textdatei, die Android Namen, Symbole und Farbe der Website mitteilt.
Cache
Speicher des Browsers, der bereits gesehene Dateien aufbewahrt, um schneller zu sein, manchmal zu lange.

Modul 2

Ihr Favicon Schritt für Schritt erstellen

Schritt 1 von 6

  1. Quelle wählen: Logo oder Initialen

    • Öffnen Sie den Favicon-Generator.
    • Es gibt zwei Reiter: Mein Logo und Initialen.
    • Unter Mein Logo klicken Sie auf Logo auswählen oder ziehen die Datei in den Rahmen.
    • Das beste Ergebnis liefert ein SVG oder ein quadratisches PNG mit mindestens 512 Pixeln.
    • Ist das Bild zu klein oder sehr breit, erscheint ein Hinweis.

    TippEin sehr breites Logo mit dem Namen neben dem Zeichen wird im Quadrat winzig: Behalten Sie nur das Zeichen.

  2. Oder ein Symbol aus Initialen gestalten

    • Im Reiter Initialen tippen Sie ein bis drei Buchstaben in Buchstaben (1 bis 3), zum Beispiel „CG“ für Claras Gärten.
    • Wählen Sie Hintergrundfarbe, Buchstabenfarbe und Schrift: Montserrat, Georgia oder Courier.
    • Übernehmen Sie die Farben Ihrer Website und achten Sie auf starken Kontrast: helle Buchstaben auf dunklem Grund oder umgekehrt.
    Bildschirmfoto : Oder ein Symbol aus Initialen gestalten
    Bildschirmfoto : Favicon und Symbole

  3. Form, Rand und Hintergrund einstellen

    • Unter Form wählen Sie Quadrat, Abgerundet oder Rund.
    • Der Regler Rand lässt mehr oder weniger Platz um das Motiv: Verringern Sie ihn, damit das Symbol das Quadrat gut ausfüllt.
    • Bei einem Logo ist Hintergrund transparent lassen bereits angekreuzt.
    • Die Hintergrundfarbe wird trotzdem für das iPhone-Symbol verwendet, das nicht transparent sein kann.
    • Tragen Sie zuletzt den Name der Website (für Handys) ein: Er erscheint unter dem Symbol auf dem Startbildschirm.

    TippEin kurzer Name mit höchstens 12 Zeichen wird unter dem Symbol auf Handys vollständig angezeigt.

  4. Die Vorschauen prüfen

    • Die Spalte Vorschau zeigt Ihr Symbol in einem hellen und einem dunklen Tab, dann In den Google-Ergebnissen und Auf dem Startbildschirm eines iPhones und eines Android-Handys.
    • Prüfen Sie drei Dinge: Das Symbol ist im kleinen Tab erkennbar, es bleibt im dunklen Tab sichtbar, und im Android-Kreis wird nichts Wichtiges abgeschnitten.

  5. Die Dateien herunterladen

    Es gibt zwei Schaltflächen:

    • Alles herunterladen (.zip): Das Archiv enthält favicon.ico, apple-touch-icon.png, die Android-Symbole, site.webmanifest, icon.svg, falls Ihr Logo ein SVG ist, und eine Datei mit dem einzufügenden Code.
    • Symbol für WordPress (512 px): ein einzelnes quadratisches Bild, das auch für Wix, Squarespace, Shopify oder Jimdo passt.

    Der HTML-Code erscheint darunter, mit einer Schaltfläche Kopieren.

    Bildschirmfoto : Die Dateien herunterladen
    Bildschirmfoto : Favicon und Symbole

  6. Symbole einrichten und prüfen

    • WordPress: Design › Customizer › Website-Informationen › Website-Icon (oder bei neueren Themes Einstellungen › Allgemein).
    • Wählen Sie das Bild mit 512 Pixeln und klicken Sie auf Veröffentlichen: WordPress erstellt die übrigen Größen selbst.
    • Selbst gebaute Website: die .zip entpacken, die Dateien ins Hauptverzeichnis der Website legen und den Code in den <head>-Bereich jeder Seite einfügen.
    • Prüfen Sie danach in einem privaten Fenster.

    TippWird noch das alte Symbol angezeigt, ist das nicht unbedingt ein Fehler: Oft ist es nur der Browser-Cache.

Werkzeug öffnen

Modul 3

Beispiele aus der Praxis

Ein Verein ohne Logo

Claras Gärten e. V. hat noch kein Logo. Der Kassenwart nutzt den Reiter Initialen: „CG“ in Weiß auf dem Grün der Website, abgerundete Form. Er lädt das Symbol für WordPress (512 px) herunter und richtet es in zwei Minuten ein. Endlich fällt der Tab der Website zwischen den anderen auf.

Eine Bäckerei mit sehr detailreichem Logo

Das Logo der Bäckerei zeigt eine Ähre, eine Mühle und den Namen in alter Schrift. Mit 16 Pixeln verschwimmt alles. Die Inhaberin schneidet das Logo auf die Ähre zu, speichert es als quadratisches PNG mit 1000 Pixeln und stellt den Rand auf das Minimum. Die Ähre bleibt im Tab wie auf dem Startbildschirm gut erkennbar.

Ein Symbol, das sich nicht ändert

Die Ferienwohnung Lindenhof hat ihr Favicon ersetzt, aber das alte erscheint weiterhin. In einem privaten Fenster ist das neue zu sehen: Es lag am Cache. Bei Google folgt es einige Tage später. Um den Rest der Website zu prüfen, startet die Vermieterin danach die komplette Website-Diagnose.

Häufige Fehler

  • Das ganze Logo samt Text auf 16 Pixel verkleinern: Es wird zu einem unlesbaren Fleck.
  • Ein schwarzes Logo auf transparentem Hintergrund behalten: Im dunklen Tab verschwindet es.
  • Von einem Bild mit 32 Pixeln ausgehen: Das Symbol auf dem Startbildschirm wird unscharf.
  • Das Motiv bis an den Rand des Android-Symbols zeichnen: Beim runden Zuschnitt wird ein Teil des Logos abgeschnitten.
  • Glauben, die Einrichtung sei gescheitert, obwohl der Browser nur noch das gespeicherte alte Symbol zeigt.

Zusammengefasst

  • Das Favicon erscheint in Tabs, Lesezeichen, Google-Ergebnissen und auf dem Startbildschirm von Handys.
  • Jede Verwendung hat ihre Größe: 16 bis 48 Pixel für den Computer, 180 für das iPhone, 192 und 512 für Android.
  • ICO für die Kompatibilität, PNG für Handys, SVG für perfekte Schärfe, wenn Ihr Logo ein Vektorbild ist.
  • Das iPhone lehnt Transparenz ab und Android schneidet zu: Planen Sie einen Hintergrund und einen Rand ein.
  • Ein gutes Favicon ist schlicht, kontrastreich und wird in einem privaten Fenster geprüft.

Testen Sie sich

Ein paar Fragen, um zu prüfen, ob alles klar ist.

1. Warum braucht das iPhone-Symbol eine Hintergrundfarbe?
2. Wozu dient der Rand des „maskable“ Symbols unter Android?
3. Ihr neues Favicon erscheint nicht im Browser. Was tun Sie zuerst?
4. Was eignet sich am besten für ein Symbol, das mit 16 Pixeln lesbar sein soll?

Textversion (Markdown)