Favicon einfach erklärt: Das kleine Icon mit grosser Wirkung

Was ist ein Favicon?

Ein Favicon (zusammengesetzt aus Favorite und Icon) ist ein kleines grafisches Symbol, das Ihre Website in verschiedenen Kontexten visuell repräsentiert. Es erscheint an mehreren prominenten Stellen:

• In der Browser-Tab-Leiste neben dem Seitentitel
• In der Lesezeichen- bzw. Favoritenliste des Browsers
• In der Adressleiste (je nach Browser)
• Auf dem Startbildschirm mobiler Geräte, wenn die Seite als Web-App gespeichert wird
• In den Suchergebnissen einiger Suchmaschinen

Das Favicon dient damit als kompakte visuelle Identifikation Ihrer Website. In einer Browser-Leiste mit zahlreichen geöffneten Tabs ermöglicht es Nutzern, Ihre Seite auf einen Blick wiederzufinden. Fehlt ein Favicon, zeigt der Browser in der Regel ein generisches Standardsymbol an, was einen weniger professionellen Eindruck hinterlässt.

Technische Spezifikationen und Dateiformate

Ursprünglich wurde das Favicon ausschliesslich im ICO-Format mit einer Auflösung von 16 × 16 Pixeln bereitgestellt. Die Anforderungen haben sich mit der Weiterentwicklung der Browser und Endgeräte jedoch deutlich erweitert. Heute unterstützen moderne Browser verschiedene Formate und Grössen.

Gängige Dateiformate

Empfohlene Grössen

Für eine optimale Darstellung auf sämtlichen Geräten und Plattformen sollten Sie Ihr Favicon in mehreren Auflösungen bereitstellen:

Die Bereitstellung mehrerer Grössen stellt sicher, dass Ihr Favicon in jedem Kontext scharf und professionell dargestellt wird, unabhängig von Gerät und Bildschirmauflösung.

Favicon in die Website einbinden

Die Einbindung des Favicons erfolgt über entsprechende Link-Elemente im Head-Bereich Ihres HTML-Dokuments. Eine zeitgemässe Implementierung umfasst mehrere Varianten, um die verschiedenen Plattformen und Endgeräte abzudecken.

Grundlegende HTML-Einbindung

Platzieren Sie die folgenden Zeilen im Head-Bereich Ihrer HTML-Datei. Der klassische ICO-Verweis stellt die Kompatibilität mit älteren Browsern sicher, während die zusätzlichen PNG- und SVG-Verweise moderne Browser optimal bedienen:

link rel="icon" href="/favicon.ico" sizes="48x48"

link rel="icon" href="/favicon.svg" type="image/svg+xml"

link rel="apple-touch-icon" href="/apple-touch-icon.png"

Für Progressive Web Apps empfiehlt sich zusätzlich die Referenzierung über ein Web-App-Manifest (manifest.json), in dem die verschiedenen Icon-Grössen definiert werden.

Favicon in WordPress einbinden

WordPress bietet seit Version 4.3 eine integrierte Funktion zur Verwaltung des Favicons, die unter der Bezeichnung Website-Icon im Customizer zu finden ist. Der Weg dorthin:

1. Melden Sie sich im WordPress-Dashboard an.
2. Navigieren Sie zu Design und dann Customizer.
3. Öffnen Sie den Bereich Website-Informationen.
4. Klicken Sie auf Website-Icon und laden Sie Ihr Favicon hoch (empfohlen: mindestens 512 × 512 Pixel).
5. Speichern und veröffentlichen Sie die Änderungen.

WordPress generiert aus der hochgeladenen Datei automatisch die benötigten Grössen und fügt die entsprechenden HTML-Tags in den Head-Bereich ein. Mit einer professionellen WordPress-Hosting-Umgebung stehen Ihnen dabei optimale Ladezeiten und zuverlässige Darstellung zur Verfügung.

Best Practices für ein professionelles Favicon

Ein gutes Favicon ist mehr als nur ein verkleinertes Logo. Bei einer Darstellungsgrösse von teilweise nur 16 × 16 Pixeln gelten besondere Gestaltungsregeln, um die Erkennbarkeit zu gewährleisten.

• Einfachheit: Reduzieren Sie Ihr Design auf das Wesentliche. Komplexe Grafiken oder Schriftzüge sind bei dieser Grösse nicht mehr lesbar. Nutzen Sie stattdessen ein markantes Symbol, einen einzelnen Buchstaben oder ein stark vereinfachtes Logozeichen.
• Kontrast: Achten Sie auf ausreichend Kontrast, damit das Icon sowohl auf hellen als auch auf dunklen Hintergründen gut erkennbar ist. Testen Sie die Darstellung in verschiedenen Browsern und Betriebssystemen.
• Transparenz: Verwenden Sie einen transparenten Hintergrund (PNG oder SVG), damit sich das Favicon nahtlos in die jeweilige Umgebung einfügt.
• Konsistenz: Das Favicon sollte visuell eindeutig zu Ihrer Marke und Ihrem Webauftritt passen. Es ist Bestandteil Ihres Corporate Designs und sollte entsprechend gestaltet sein.
• Dateigrösse: Optimieren Sie die Dateigrösse, um die Ladezeit nicht unnötig zu beeinflussen. Bei PNG-Dateien empfiehlt sich eine Komprimierung ohne sichtbaren Qualitätsverlust.

Favicon und Suchmaschinenoptimierung

Seit einiger Zeit zeigt Google in den mobilen Suchergebnissen das Favicon neben dem Seitennamen und der URL an. Damit wird das Favicon zu einem sichtbaren Element Ihrer Präsenz in den Suchergebnissen. Ein professionell gestaltetes Favicon kann die Klickrate positiv beeinflussen, da es Vertrauen und Wiedererkennungswert schafft.

Google stellt bestimmte Anforderungen an Favicons in den Suchergebnissen:

• Das Favicon muss über den Browser abrufbar sein (keine robots.txt-Blockierung).
• Es sollte visuell repräsentativ für die Website sein.
• Die empfohlene Mindestgrösse beträgt 48 × 48 Pixel oder ein Vielfaches davon.
• Unangemessene oder irreführende Favicons können von Google ignoriert werden.

Häufige Fehler und deren Behebung

Das Favicon wird nicht angezeigt

Wenn Ihr Favicon im Browser nicht erscheint, prüfen Sie zunächst folgende Punkte:

• Ist der Dateipfad im HTML korrekt und die Datei unter dieser URL erreichbar?
• Wird die Datei nicht durch Caching-Mechanismen blockiert? Leeren Sie den Browser-Cache und testen Sie erneut.
• Ist das Dateiformat korrekt? Einige ältere Browser unterstützen ausschliesslich das ICO-Format.
• Wird die Datei durch die robots.txt oder Zugriffsrechte blockiert?

Das Favicon erscheint unscharf oder verpixelt

Unscharfe Darstellungen entstehen häufig, wenn nur eine einzige Grösse bereitgestellt wird und der Browser diese skalieren muss. Stellen Sie das Favicon in den gängigen Grössen bereit oder verwenden Sie ein SVG-Format, das vom Browser verlustfrei auf jede Grösse skaliert werden kann.

Tools zur Favicon-Erstellung

Für die Erstellung und Optimierung von Favicons stehen verschiedene professionelle Werkzeuge zur Verfügung:

• Favicon-Generatoren: Online-Tools wie RealFaviconGenerator erstellen aus einer Ausgangsgrafik sämtliche benötigten Grössen und Formate inklusive des zugehörigen HTML-Codes.
• Grafikprogramme: Adobe Illustrator, Affinity Designer oder Figma eignen sich hervorragend, um Favicons als Vektorgrafik zu erstellen und anschliessend in die benötigten Formate zu exportieren.
• Bildkonverter: Spezialisierte Tools konvertieren bestehende Grafiken in das ICO-Format mit mehreren eingebetteten Grössen.

Professioneller Webauftritt mit METANET

Ein korrekt eingebundenes Favicon ist ein wichtiger Baustein eines professionellen Webauftritts, doch die Grundlage bildet eine leistungsfähige und zuverlässige Hosting-Infrastruktur. METANET bietet Ihnen dafür massgeschneiderte Lösungen.

Mit dem Hosting von METANET profitieren Sie von SSD-basierter Performance und der Möglichkeit, sämtliche statischen Ressourcen, einschliesslich Ihrer Favicons, optimal auszuliefern. Für WordPress-Websites steht Ihnen eine spezialisierte WordPress-Hosting Umgebung zur Verfügung, die unter anderem die komfortable Verwaltung von Website-Icons über den Customizer unterstützt.

Falls Sie Ihren Webauftritt ohne Programmierkenntnisse erstellen möchten, bietet der Website Baukasten von METANET eine professionelle Lösung, bei der das Favicon-Management bereits integriert ist. Für anspruchsvolle Projekte mit individuellen Anforderungen stehen VPS, Managed Cloud Server oder das Virtual Data Center bereit, die Ihnen volle Kontrolle über Ihre Server-Konfiguration und die Auslieferung sämtlicher Assets ermöglichen.

Ergänzen Sie Ihren Webauftritt mit einer passenden Domain und professionellen E-Mail-Adressen von METANET, um Ihre Marke konsistent und vertrauenswürdig zu präsentieren.