Skip to main content

Favicon


PDF herunterladen

Was ist ein Favicon?

Ein Favicon ist ein kleines Symbol mit 16 x 16 oder 32 x 32 Pixel, das zum Branding einer Webseite dient. Dieses Zeichen erleichtert Besuchern das Auffinden und Wiedererkennen einer Seite, wenn zum Beispiel im Browser mehrere Registerkarten geöffnet sind. Aufgrund ihrer geringen Größe eignen sich Favicons am besten als einfache Bilder oder als ein bis drei Zeichen Text. Favicons sind nicht mit Logos zu verwechseln, auch wenn sie manchmal gleich aussehen. Aufgrund seiner geringen Größe und Auflösung kann das Favicon möglicherweise nur ein kleineres Abbild oder Teil des ursprünglichen Logos eines Unternehmens sein.

Warum sind Favicons wichtig?

Das Wort Favicon setzt sich aus den englischen Begriffen “favorite” und “icon” zusammen. Favicons dienen zum eindeutigen Identifizieren einer Webseite, deshalb werden sie oft als Lesezeichen, auf Registerkarten, in Suchmenüs, als App-Symbol, Browserverlauf oder in Verkaufsergebnissen abgebildet. Besonders nützlich sind diese Zeichen auf Smartphone- und Tablet-Displays, sowie auf anderen mobilen Endgeräten.

Das Erstellen eines Favicons ist ein kleiner, aber wichtiger Schritt zum Einrichten einer Unternehmenswebsite. Es verleiht der Website Legitimität und stärkt das Online-Branding sowie das Vertrauen potenzieller Verbraucher. Favicons sind eine visuelle Markierung für die Website. Diese Zeichen ermöglichen eine einfache und schnelle Identifizierung der Seite für Webbenutzer. Sie vereinen alle verschiedenen Browser-Komponenten zu einem gut markierten Browser-Erlebnis.

Ein Favicon hilft bei der Suchmaschinenoptimierung

Favicons sind nicht direkt für die Suchmaschinenoptimierung verantwortlich, sie sind jedoch indirekt verantwortlich und ein wichtiges Instrument zur Verbesserung des Rankings in Suchmaschinen. Hier sind einige Beispiele, wie ein Favicon bei der SEO helfen kann:

Benutzerfreundliche Websites führen zu einer verstärkten Nutzung

Eine benutzerfreundliche Website verbessert indirekt das Suchmaschinen-Ranking. Wird auf Browser-Registerkarten, Lesezeichen, Verlaufsarchiven usw. ein Favicon angezeigt wird, können Benutzer Zeit sparen, indem sie eine Website problemlos identifizieren und durchsuchen können. Dadurch erhöht sich die Wahrscheinlichkeit einer Benutzerinteraktion mit einer Website. Dies verbessert den Zeitaufwand und die Interaktion mit einer Website. Das bedeutet, dass mehr Augen länger auf eine Website gerichtet sind, wodurch die SEO verbessert wird.

Ein Favicon dient als Lesezeichen

Ein Favicon auf einer Webseite bietet einen Vorteil gegenüber Websites, die keine verwenden. Der Chrome-Browser von Google zieht bestimmte Suchranking-Signale für Websites ab, die im Web mit Lesezeichen versehen sind. Anbieter, die kein Favicon auf ihrer Website haben, verpassen die Chance, im Chrome-Browser mit einem Lesezeichen versehen zu werden. Das macht sich unter Umständen direkt im Suchranking bemerkbar. Durch gut platzierte Favicon-Lesezeichen sticht eine Seite visuell hervor, wodurch Besucher besser in der Lage sind sich an eine Seite zu erinnern und erneut zu besuchen. Das erhöht den Traffic einer Webseite und die SEO.

Branding und Sichtbarkeit

Ein Favicon ist eine visuelle Darstellung der Website und eines Unternehmens, Organisation oder Privatperson. Anhand dieses Zeichens kann sich ein Benutzer eine Marke wiedererkennen und mit einer Marke identifizieren. Beim SEO dreht sich alles um Branding und Marketing. Je sichtbarer eine Website ist, desto mehr Benutzer klicken wahrscheinlich auf diese Website und erinnern sich, zu wem das Branding gehört.

Ein gutes Favicon erstellen

Bei der Erstellung und Gestaltung eines Favicons für eine Website müssen einige Dinge berücksichtigt werden. Obwohl das Zeichen klein und einfach ist, kann (und sollte) es eine große Wirkung haben. Ebenso wichtig ist es, dass bestmögliche Favicon zu erstellen, da sich Benutzer mit der Marke identifizieren. Hier sind einige Kriterien, die bei der Erstellung eines Favicons zu beachten sind:

Einfachheit

Obwohl das Favicon das visuelle Gesicht einer Marke ist, sollte das Design so einfach wie möglich gehalten werden. Die besten Favoriten sind die einfachsten. Aufgrund der geringen Größe des Favicons und der Einfachheit der verwendeten Formen sind Farben entscheidend, um die Aufmerksamkeit potenzieller Verbraucher auf sich zu ziehen und aufzufallen. Zu viele Details lassen das Favicon nur überladen und chaotisch aussehen.

Markenidentität

Das Favicon ist das visuelle Symbol für eine Marke und sollte den Benutzern visuell mitteilen, was ein Unternehmen darstellt. Dieses Zeichen sagt ihnen sofort, worum es bei einer Marke geht und was sie tut. Obwohl dies mit einem so kleinen und einfachen Design sehr schwierig ist, sollten Entwickler versuchen, kreativ zu sein. Kleine, kreative Icons besitzen eine große Kraft.

Abkürzung

Das perfekte Bild zu finden, ist für das, was ein Unternehmen tut, möglicherweise nicht praktikabel. Eine gängige Lösung hierfür ist die Verwendung des ersten Buchstabens des Firmennamens oder der Akronyme. Entwickler können auch eine Abkürzung für den Firmennamen verwenden. Spielen Sie mit verschiedenen Variationen und wählen Sie die für Sie am besten geeignete aus.

Farbabstimmung

Auch die Farbauswahl ist sehr wichtig. Kontrastfarben erleichtern dem Auge das Erkennen von Formen und den Schwerpunkt des Favicons. Aufgrund der geringen Anzahl von Favoriten müssen Entwickler ein Unternehmen dem Benutzer gegenüber klar darstellen. Dabei kann die Verwendung von Farben kann von entscheidender Bedeutung sein. Zu beachten ist, dass alle Browser die Farben leicht unterschiedlich darstellen. Einige haben beispielsweise einen grauen, schwarzen oder weißen Hintergrund, über das Favicon gelegt wird.

Welche Größe sollte ein Favicon haben?

Im Allgemeinen haben diese Zeichen eine Größe von 16 x 16 oder 32 x 32 Pixel. So können sie in allen Browsern verwendet werden. Es gibt jedoch Ausnahmen:

  • 24 x 24 px – für Internet Explorer 9
  • 32 x 32 px – Neue Registerkarte in Internet Explorer, Taskleistenschaltfläche in Windows 7+ und Safari-Seitenleiste “Später lesen”
  • 57 x 57 px – Standard-iOS-Startbildschirm (iPod Touch, iPhone der ersten Generation bis 3G)
  • 72 x 72 px – iPad-Startbildschirmsymbol
  • 96 x 96 px – wird auf der Google TV-Plattform verwendet
  • 114 x 114 px – iPhone 4 Startbildschirm (doppelte Standardgröße für das Retina-Display
  • 128 x 128 px – Chrome Web Store
  • 195 x 195 px – Opera Kurzwahl

Verwendete Bildformate für Favicons

Windows ICO

Dieses Format ist die am häufigsten unterstützte Datei. Der Vorteil des ICO besteht darin, dass es mehrere Auflösungen und Bittiefen enthalten kann, was sehr gut funktioniert und besonders für Windows nützlich ist. ICO bietet auch ein 32-Pixel-Symbol, das für die Windows 7-Taskleiste von Internet Explorer nützlich ist. Es ist auch das einzige Format, das das -Element nicht verwendet.

Portable Network Graphics (PNG)

Das PNG-Format ist aus verschiedenen Gründen nützlich. Zum Entwerfen werden keine speziellen Tools benötigt, was das Format sehr benutzerfreundlich macht. Es gibt uns die kleinstmögliche Dateigröße und unterstützt Alpha-Transparenz. Ein großer Nachteil dieses Stils ist jedoch, dass Internet Explorer keine PNG-Datei, sondern nur ICO-Dateien unterstützt.

Scalable Vector Graphics (SVG)

Dieses Format wird von Opera und einigen anderen Browsern unterstützt.

Graphics Interchange Format (GIF)

Dieses Format bietet keine Vorteile außerhalb der Verwendung in alten Browsern. Während animierte GIFs mehr Aufmerksamkeit auf Benutzer lenken sollen, neigen sie eher dazu, Besucher zu irritieren. Der allgemeine Konsens ist, dass sie in keiner Weise von Vorteil sind.

Joint Photographic Experts Group (JPG)

Kann überall verwendet werden. Die Auflösungsqualität ist jedoch geringer als bei PNG.

Animated Portable Network Graphics (APNG)

Dies ist eine animierte Version von PNG. Wird von Opera und Firefox unterstützt.

Die Verwendung eines Favicon-Generators

Im Web werden zahlreiche kostenlose und kostenpflichtige Favicon-Generatoren angeboten. Mit einem Favicon Generator können Benutzer Favicons für den persönlichen oder kommerziellen Gebrauch erstellen. Der Generator sollte ständig aktualisiert werden, um mit den neuesten HTML5-, CSS- und JavaScript-Techniken Schritt zu halten.

Ein Favicon für HTML zu erstellen, ist mit diesen Werkzeugen unkompliziert und dauert nur ein paar Minuten. In den meisten Fällen reicht es, das Bildformat und die Pixel-Größe anzugeben, einige Generatoren erlauben weitere Einstellungen. Die Bilder werden dann automatisch für die bekannten Desktop-Browser, Tablets und mobile Endgeräte generiert.

Sobald die Datei favicon.ico erstellt wurde, kann diese in das Stammverzeichnis der Website hochgeladen werden. Danach sollte der folgende Code in der Kopfzeile des HTML-Quelltexts eingebunden werden:

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Domain

Was ist eine Domain? Eine Domain ist ein einmaliger, eindeutiger Name, der den Zugriff auf Webseiten im Internet bereitstellt. Sie begegnet jedem Menschen, der eine Internetseite aufruft. Neben diesem Merkmal für die Identifizierung von Webseiten hat die Domain in der Suchmaschinenoptimierung ebenfalls eine kleine, aber womöglich relevante Bedeutung. Warum existieren […]

Broken Link

Was ist ein Broken Link? Ein Broken Link ist ein Hyperlink auf einer Webseite, der zu einer nicht oder nicht mehr erreichbaren Zielseite führt oder zu einer verlinkten Datei, die nicht mehr auf den Servern befindlich ist. Das Resultat eines Klicks auf einen Broken Link ist in der Regel die […]

ASCII Code

Was ist ASCII Code? ASCII Code ist ein Zeichensatz, der mit insgesamt 7 Bits die Darstellung der meisten Zeichen auf einer Computertastatur erlaubt. Da es sich um eine US-amerikanische Erfindung handelt, fehlen im Deutschen (und anderen Sprachen) vorkommende Zeichen wie Umlaute und das ß. Durch eine ASCII Code Tabelle lässt […]

Amazon Web Service

Was sind die Amazon Web Services? Amazon Web Services, auch als AWS bekannt, ist eine vom gleichnamigen Unternehmen angebotene Plattform für Cloud-Computing. Kunden können dort Anwendungen, Webseiten und Dienste hosten lassen, Ressourcen für rechenintensive Aufgaben mieten und vieles mehr. AWS existiert seit 2006 und ist einer der größten Cloud-Services der […]

410 Fehler-Code

Was ist der Fehler 410? Der 410 Statuscode oder 410 Fehler erscheint im Browser, wenn der Nutzer eine URL aufrufen wollte, die jedoch dauerhaft gelöscht ist. Die genaue Formulierung des Fehlercodes hängt vom Webseitenserver ab. Mögliche Varianten sind unter anderem “Error 410”, “Gone”, “HTTP Status 410” oder “410 Gone”. Auch […]

Dialogmarketing

Was ist Dialogmarketing? Das Dialogmarketing ist eine Art des Direktmarketings. Wie der Name es bereits verrät, geht es um den direkten Dialog zwischen Unternehmen und Kunden. Die Akquise der Neukunden sowie Bestandskundenerhaltung sind im Dialogmarketing enthalten. Die Definition Dialogmarketing Aufgrund der sich verändernden Rechtslage ist die Form des Marketings in […]