Was ein Favicon braucht
Das Favicon ist das kleine Symbol deiner Website. Es erscheint im Browser-Tab, in Lesezeichen und bei Google neben dem Suchergebnis.
So funktioniert es
Browser suchen das Favicon an zwei Stellen. Zuerst in einem <link rel="icon"> im Kopf der Seite:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Fehlt der Verweis, fragen sie die feste Adresse /favicon.ico ab. Google zeigt das Favicon in den mobilen und Desktop-Suchergebnissen neben dem Namen der Website. Ohne Favicon steht dort ein neutrales Platzhaltersymbol, und deine Seite fällt zwischen den anderen weniger auf.
bytereport prüft beides: ob die Startseite ein Icon nennt und ob unter /favicon.ico eines liegt. Eines von beiden genügt.
Worauf es ankommt
- SVG oder PNG. SVG ist eine Vektorgrafik und bleibt in jeder Größe scharf. PNG geht ebenso; das alte ICO-Format wird weiter verstanden.
- Mindestens 48 × 48 Pixel. Google verlangt ein quadratisches Bild und empfiehlt mehr als 48 × 48 Pixel. Ein SVG erfüllt das von selbst.
- Einfach und erkennbar. Bei 16 Pixeln im Tab bleibt von einem Logo mit Schriftzug nichts übrig. Ein Buchstabe oder das Bildzeichen wirkt besser.
- Erreichbar für Crawler. Das Icon darf nicht in der robots.txt gesperrt sein, und seine Adresse sollte sich nicht ständig ändern.
- Für den Startbildschirm. Wer die Seite auf dem iPhone zum Home-Bildschirm hinzufügt, bekommt das
apple-touch-icon, ein PNG mit 180 × 180 Pixeln. Das ist eine Ergänzung, für die Suche nicht nötig.
So richtest du es ein
In WordPress lädst du es als „Website-Icon“ hoch; andere CMS und Baukästen haben eine ähnliche Einstellung. Das System erzeugt dann die nötigen Größen und Verweise.
Ohne CMS legst du die Datei im Hauptverzeichnis ab und verweist im <head> darauf:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Bis Google ein neues Favicon in den Suchergebnissen zeigt, kann es einige Tage dauern.