Zum Hauptinhalt springen
EverAudit

Brand

Fehlendes oder zu kleines Favicon, kaum sichtbare Social-Icons: EverAudit prüft die Marken-Assets Ihrer Website und zeigt, wo der Wiedererkennungswert leidet.

Brand-Assets prüfen: Favicon und Social-Icons richtig einbinden

Ein Favicon und gut sichtbare Social-Media-Icons gehören zu den kleinsten, aber am häufigsten wahrgenommenen Elementen Ihrer Website. Sie erscheinen in jedem Browser-Tab, in jedem Lesezeichen und oft auch auf dem Startbildschirm eines Smartphones — und fallen gerade deshalb sofort auf, wenn sie fehlen oder unscharf wirken.

Was prüft EverAudit in der Kategorie „Brand"?#

Die Kategorie „Brand" bündelt aktuell zwei Prüfungen rund um sichtbare Marken-Elemente:

Favicon-Vorhandensein und -Auflösung. EverAudit prüft, ob Ihre Seiten überhaupt ein <link rel="icon"> bereitstellen und ob mindestens ein Icon in ausreichend hoher Auflösung (192×192 oder 512×512 Pixel) hinterlegt ist. Details dazu im Einzelartikel Favicon richtig einbinden.

Größe der Social-Media-Icons. Icons, die zu Ihren Profilen in sozialen Netzwerken verlinken, werden auf Mindestgröße geprüft — sowohl die sichtbare Darstellung als auch das antippbare Touch-Ziel auf mobilen Geräten. Auch dieser Befund wird im Artikel Favicon richtig einbinden mitbehandelt, da beide Themen häufig im selben Arbeitsschritt (Marken-Assets pflegen) gelöst werden.

Warum prüft EverAudit das?#

EverAudit lädt jede Seite gerendert und prüft im DOM sowie über die tatsächlich ausgelieferten Icon-Dateien, ob ein Favicon vorhanden ist und welche Auflösung das größte hinterlegte Icon hat. Für Social-Icons wird die tatsächliche gerenderte Größe der Icon-Elemente gemessen, inklusive des klickbaren beziehungsweise antippbaren Bereichs. Beide Prüfungen laufen automatisch mit, weil es sich um rein sichtbare, leicht zu übersehende Details handelt, die in der laufenden Website-Pflege häufig durchrutschen — etwa nach einem Relaunch, bei dem das Favicon aus der alten Website nicht mit übernommen wurde.

Welche Auswirkung haben fehlende oder mangelhafte Brand-Assets?#

  • Fehlt das Favicon ganz, zeigt der Browser stattdessen ein neutrales Standard-Symbol. Bei mehreren offenen Tabs geht Ihre Seite darin unter, und Besucher erkennen Ihre Website in ihrer Tab-Leiste nicht mehr wieder.
  • Ist das Favicon zu niedrig aufgelöst, wirkt es auf hochauflösenden Bildschirmen und besonders auf dem Startbildschirm eines Smartphones (nach „Zum Startbildschirm hinzufügen") verpixelt und unsauber.
  • Zu kleine Social-Icons sind schwer zu erkennen und auf Touchscreens kaum präzise zu treffen — Besucher, die Ihren Kanälen folgen möchten, geben eher auf, als mehrfach danebenzutippen.

In allen drei Fällen ist der Effekt vor allem ein Wahrnehmungs- und Vertrauenseffekt: Kleine, gepflegte Details signalisieren Sorgfalt, ihr Fehlen signalisiert das Gegenteil — unabhängig davon, wie gut der eigentliche Inhalt Ihrer Website ist.

Wie beheben Sie Probleme bei Brand-Assets?#

  1. Favicon bereitstellen, falls noch keins vorhanden ist: 
    <link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
  2. Höher aufgelöste Varianten ergänzen, insbesondere für die Startbildschirm-/PWA-Erwartung: 
    <link rel="icon" href="/icon-192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="/icon-192.png">
  3. Social-Icons in ausreichender Größe ausliefern: sichtbare Größe mindestens 24×24 Pixel, Touch-Ziel (inklusive Klickfläche, nicht nur des sichtbaren Icons) mindestens 16×16 Pixel — in der Praxis meist per CSS-Padding um ein kleineres visuelles Icon herum gelöst: 
    .social-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.social-icon svg {
  width: 24px;
  height: 24px;
}
  4. Nach einem Relaunch gezielt gegenprüfen. Favicons werden bei einem CMS- oder Theme-Wechsel überraschend häufig vergessen, weil sie nicht im sichtbaren Seiteninhalt liegen, sondern nur im <head>.

Fazit#

Favicon und Social-Icons sind kleine Details mit großer sichtbarer Wirkung — sie erscheinen auf praktisch jeder Interaktion mit Ihrer Website, vom Browser-Tab bis zum Smartphone-Startbildschirm. Der Aufwand zur Behebung ist gering, der Effekt auf den professionellen Eindruck Ihrer Marke messbar. Details und konkrete Icon-Größen finden Sie im Artikel Favicon richtig einbinden.

Artikel