Das fehlende Favicon: das kleine Detail, das Ihre Website im Tab unfertig wirken lässt
Das generische Symbol im Browser-Tab signalisiert „nicht fertiggestellte Website“. So funktioniert ein Favicon, warum es wichtig ist und wie Sie es richtig einrichten.
Sie öffnen zehn Tabs, und zwischen den klaren Logos anderer Unternehmen zeigt Ihres ein leeres weißes Blatt oder einen generischen Globus. Ein kleines Detail, aber das Gehirn des Besuchers liest es sofort: „Hier ist etwas unfertig.“ Niemand sagt Ihnen das am Telefon, aber der Eindruck entsteht lautlos.
Das Favicon ist das winzige Symbol in der Ecke des Tabs, neben dem Seitentitel. Es erscheint auch bei Lesezeichen, im Verlauf, in der Tab-Liste auf dem Handy, manchmal sogar in den Google-Suchergebnissen auf Mobilgeräten. Es gehört zu den günstigsten Details, die man an einer Website reparieren kann, und gleichzeitig zu jenen, die den Unterschied zwischen „Amateur“ und „seriöses Unternehmen“ ausmachen. Schauen wir uns genau an, warum es zählt und wie man es richtig einrichtet – nicht nur pro forma.
Was ein Favicon eigentlich ist und wo es sichtbar wird
Favicon kommt von „favorites icon“ – das Symbol, das der Browser neben den Seitentitel setzt. Es ist klein, erscheint aber an mehr Orten, als man denkt:
- im geöffneten Tab, neben dem Seitennamen;
- in der Lesezeichenleiste und in den Favoriten;
- im Browserverlauf und in den Vorschlägen der Adressleiste;
- in der Tab-Liste auf dem Handy, wo der Titel fast verschwindet und vor allem das Symbol übrig bleibt;
- auf Mobilgeräten manchmal sogar neben Ihrem Ergebnis in Google.
Fehlt es, setzt der Browser ein generisches Symbol ein – ein leeres Blatt oder einen Globus. Inmitten anderer Websites mit eigenen Symbolen ist Ihre die einzige, die „leer“ wirkt. Keine Katastrophe, aber genau die Art von Detail, die sagt: „Die Arbeit ist nicht fertig.“
Warum ein so kleines Detail Ihre Glaubwürdigkeit beeinflusst
Menschen beurteilen eine Website nicht anhand einer Checkliste. Sie spüren sie. Und kleine Signale – ein fehlendes Favicon, eine inkonsistente Schriftart, ein verzerrtes Foto – summieren sich zu einem Gesamteindruck von „Sorgfalt“ oder „mangelnder Sorgfalt“.
Das Favicon ist besonders, weil es genau dann erscheint, wenn jemand zu Ihnen zurückkehrt. Wer den Tab offen gelassen hat und sieben Tabs geöffnet hat, muss Sie mit den Augen wiederfinden. Mit einem klaren Symbol findet man Sie sofort. Ohne es sind Sie das „weiße Blatt“, das versehentlich geschlossen wird.
Dann ist da noch die Vertrauensfrage: Wenn das Unternehmen dieses vom ersten Moment an sichtbare Detail übersehen hat, was wurde bei weniger sichtbaren Dingen ausgelassen? Vielleicht unfair. Aber so funktioniert Wahrnehmung.
Wie ein gutes Favicon aussieht (nicht das verkleinerte Logo)
Der klassische Fehler ist, das komplette Logo samt Text zu nehmen und in ein winziges Quadrat zu quetschen. Bei dieser Größe wird der Text zu einem Fleck. Ein gutes Favicon folgt ein paar Regeln:
- Einfach und in sehr kleiner Größe wiedererkennbar – ein einziger Buchstabe, ein Symbol, eine klare Form.
- Guter Kontrast, damit es sowohl im hellen als auch im dunklen Tab sichtbar ist.
- Ein Hintergrund, der nicht verloren geht – vermeiden Sie einen völlig transparenten Hintergrund, wenn die Form weiß ist, sonst verschwindet sie bei hellen Themes.
- Dieselbe Identität wie der Rest der Marke: dieselbe Farbe, derselbe Geist.
Haben Sie ein Logo mit langem Text, nehmen Sie nur den Anfangsbuchstaben oder das Symbol daraus. Es geht nicht darum, alles unterzubringen, sondern auf einen Blick erkannt zu werden – wie ein Button, den das Auge trifft, ohne zu lesen.
Wie Sie es Schritt für Schritt einrichten (unabhängig von der Plattform)
Auf den meisten modernen Plattformen wird das Favicon an einer einzigen Stelle eingerichtet, ohne Code.
- Bei WordPress.com oder klassischem WordPress: Anpassen (Customize) → Website-Identität → „Site Icon“ hochladen. Die Größen werden automatisch verwaltet.
- Bei anderen Plattformen (Wix, Shopify usw.): Suchen Sie in den Einstellungen nach „Favicon“ oder „Site Icon“.
- Bei einer maßgeschneiderten Website: Es werden die Icon-Dateien und ein paar Zeilen im <head> hinzugefügt (favicon.ico, eine größere PNG-Version und ein apple-touch-icon für den Fall, dass jemand die Website auf dem Handy-Bildschirm speichert).
Zwei praktische Tipps: Verwenden Sie ein sauberes, quadratisches Ausgangsbild von mindestens 512×512 px, damit es überall gut aussieht. Und wenn Sie es eingerichtet haben und trotzdem noch das alte Symbol sehen, liegt es am Browser-Cache – laden Sie die Seite erzwungen neu oder öffnen Sie sie in einem privaten Fenster.
Häufige Fehler und wie Sie sie vermeiden
Einige Fallstricke, die ich oft sehe:
- Symbol nur für einen kleinen Bildschirm gedacht – Sie verwenden ein winziges Bild, und auf Handys mit feinem Display wirkt es verpixelt. Gehen Sie von einer großen, quadratischen Quelle aus.
- Text zu klein – wenn das gesamte Logo hineinpasst, wird es bei 16 px zu einem Knäuel. Vereinfachen Sie.
- Farbe, die verschwindet – Weiß auf transparent wirkt gespenstisch bei hellen Themes; geben Sie ihm einen Hintergrund oder eine sichtbare Form.
- „Ich hab's eingerichtet, aber es ändert sich nicht“ – fast immer ist es der Cache. Nicht doppelt einrichten, sondern das Neuladen erzwingen.
- Vergessen auf Unterseiten – bei einer gut gemachten Website ist das Favicon überall dasselbe; prüfen Sie auch die inneren Seiten, nicht nur die Startseite.
Keines davon ist einzeln gravierend, aber zusammen machen sie den Unterschied zwischen „aufmerksam“ und „vernachlässigt“.
Ein kleines Signal aus einem größeren Ganzen
Das fehlende Favicon ist selten das einzige Problem. Meist kommt es zusammen mit anderen übersehenen Kleinigkeiten: Der Tab-Titel zeigt „Home“ statt des Firmennamens, das Vorschaubild für WhatsApp fehlt, das Menü verhält sich seltsam auf dem Handy. Jedes für sich wirkt unwichtig. Zusammen entscheiden sie, ob Sie wie ein verlässliches Unternehmen wirken.
So arbeiten wir bei MPO Web Studio: nicht nur „schöne Website“, sondern auch die Details, die stillschweigend überzeugen – Favicon, korrekte Titel, Vorschaubilder, Geschwindigkeit. Wir arbeiten remote, im ganzen Land, und können Ihnen zunächst eine kostenlose Demo Ihrer Website vorbereiten, damit Sie genau sehen, wie es aussehen würde – Favicon inklusive. Wenn Ihnen gerade das leere Blatt in Ihrem Tab aufgefallen ist und Sie es beheben möchten (samt den restlichen Details), schreiben Sie uns auf WhatsApp – wir kümmern uns darum.
Häufig gestellte Fragen
Beeinflusst das Favicon meine Position bei Google?+
Nicht direkt – es ist kein Rankingfaktor. Aber auf Mobilgeräten zeigt Google manchmal das Favicon neben Ihrem Ergebnis an, und ein klares Symbol macht Sie leichter auffindbar und anklickbar. Es hilft also indirekt, durch Vertrauen und Wiedererkennung, nicht durch den Algorithmus.
Welche Größe und welches Format sollte es haben?+
Gehen Sie von einem sauberen, quadratischen Bild von mindestens 512×512 px aus. Moderne Plattformen erzeugen daraus automatisch alle kleinen Größen. Bei einer maßgeschneiderten Website verwendet man üblicherweise ein favicon.ico, eine PNG-Version und ein apple-touch-icon zum Speichern auf dem Handy-Bildschirm.
Ich habe es eingerichtet, sehe aber immer noch das alte Symbol. Warum?+
Fast sicher ist es der Browser-Cache, der das Favicon hartnäckig speichert. Laden Sie die Seite erzwungen neu, leeren Sie den Cache oder öffnen Sie die Website in einem privaten Fenster. In der Regel aktualisiert es sich bald von selbst; richten Sie es nicht aus Sorge doppelt ein.
Kann ich das Logo direkt als Favicon verwenden?+
Nur wenn es einfach ist. Ein Logo mit langem Text wird bei kleiner Größe zu einem Fleck. Am besten nehmen Sie nur den Anfangsbuchstaben oder das Symbol aus dem Logo und behalten die Markenfarbe bei, damit Sie auf einen Blick erkannt werden.
Kann ich das selbst machen, oder brauche ich jemanden dafür?+
Bei WordPress, Wix oder Shopify richten Sie es selbst in den Einstellungen ein, in wenigen Minuten. Bei einer maßgeschneiderten Website oder wenn Sie auch die restlichen Details fachgerecht erledigt haben möchten (Titel, Vorschaubilder, Geschwindigkeit), lohnt sich die Hilfe von jemandem, der alles auf einmal erledigt.
7 Fehler, die Kunden von Ihrer Website vertreiben
Geben Sie Ihre E-Mail-Adresse ein und Sie erhalten den Leitfaden sofort hier. Kein Spam.
Möchten Sie sehen, wie die Website Ihres Unternehmens aussehen könnte?
Schreiben Sie uns auf WhatsApp und wir erstellen Ihnen kostenlos eine Demo-Website mit dem Namen Ihres Unternehmens. Erst ansehen, dann entscheiden — völlig unverbindlich.