Wie man ein Favicon erstellt

Das Geheimnis einer erfolgreichen Website – in den kleinen Dingen, die Besitzer oft vermissen. Für eine effektive Promotion reicht die SEO allein nicht aus: Heutzutage wird immer mehr auf die Feinheiten geachtet – Designelemente, die vom Leser unauffällig berücksichtigt und schnell in Erinnerung gerufen werden. Ein solches Element ist das Favicon.

Gliederung

Was ist ein Favicon?
Wozu braucht man ein Favicon?
Wie erstellt man ein Favicon?
So bindet man ein Favicon in die Website ein
Fazit

Was ist ein Favicon?

Favicon ist ein kleines Symbol mit dem Seitenlogo, das im Browser-Tab vor dem Namen der Seite angezeigt wird:

In einigen Browsern erscheint der Favorit auch in der Adressleiste vor der URL der Website. Zusätzlich zum Logo wird manchmal das Favicon für die Website in das Symbol eingefügt, das das Thema der Ressource, den ersten Buchstaben des Firmennamens usw. symbolisiert. Die Größe des Symbols beträgt in der Regel 32x32 oder 16x16 Pixel.

Wozu braucht man ein Favicon?

Ein Site-Icon spielt eine wichtige Rolle bei der Markenbildung der Website. Ein prägnantes Bild hilft dem Benutzer, sich an die Ressource zu erinnern und gewährleistet deren Originalität.

Eine Seite ohne Favicon sieht im Vergleich zu anderen zumindest grau aus: Anstelle eines einprägsamen Symbols gibt es ein Standard Windows Symbol, das schon vor der Erfindung des Flachbildschirms verwendet wurde.

Der Einsatz des Favicons bietet noch eine Reihe weiterer Vorteile:

Vertrauen. Der Nutzer achtet in der Regel in erster Linie darauf, wie die Website gestaltet ist. Wie professionell und detailliert das Design gestaltet ist. Da andere Dinge gleich sind, wird eine Website ohne dieses Mini-Icon nicht so vertrauenswürdig sein wie ihr Konkurrent, der dieses kleine Detail berücksichtigt hat.

Erkennbarkeit. Das Favicon erleichtert die Suche. Wenn der Benutzer im Browser, in Lesezeichen oder Stories nach der notwendigen Tabs sucht, fällt ihm als Erstes das Symbol auf. Niemand achtet auf den Text. Stell dir vor, du suchst etwas, wenn 20 Tabs in deinem Browser geöffnet sind: Bis auf das Symbol siehst du fast nichts.

Wie erstellt man ein Favicon?

Um ein Favicon für die Website zu machen, musst du kein Designer sein und über professionelle Fähigkeiten verfügen. Du kannst eigenen bevorzugten Online-Service in wenigen Minuten erstellen.

Alle diese Services sind extrem einfach zu bedienen. Wir haben mehrere Tools zusammengestellt, mit denen du schnell und kostenlos ein Favicon finden kannst.

ionos.de

Einfacher und übersichtlicher Generator: Ein Favicon wird in zwei Schritten erstellt. Wähl ein Bild am Computer aus und verwandle es in ein Mini-Logo.

favicon.pro

Es ist möglich, die Bildauflösung (Favicon-Größe) einzustellen (von 16x16 bis zu 128x128 Pixel). Wähle einfach ein Bild aus und klick auf „Submit".

favicon-generator.de

Sehr einfacher Generator, der auf Basis vom heruntergeladenen Bild ein Favicon in wenigen Sekunden erstellt.

websiteplanet.com

Der Online-Service ermöglicht es dir, das eigenes Bild zum Erstellen des Favicons herunterzuladen oder ein fertiges Bild aus der Galerie auszuwählen.

favicon-kostenlos-erstellen.de

Mit diesem Tool kannst du dein Bild hochladen und den Text hinzufügen.

So bindet man ein Favicon in die Website ein

Um das Bild auf der Registerkarte zu sehen, musst du es dem Stammordner der Website hinzufügen. Der Browser findet das Favicon und zeigt das Symbol auf der Website an. Dazu musst du das Bild im Format 16x16 hochladen. Die automatische Ausgabe im Format 32x32 kann schwierig sein.

Um die Zuverlässigkeit in jeder Bildauflösung zu gewährleisten, wird jedoch empfohlen, die Ausgabe des Favicons manuell in den HTML-Code der Seite aufzunehmen. Darum geht es hier:

Füge die Datei favicon.ico dem Stammordner – dem Site-Verzeichnis – hinzu.

Schreibe in HTML-Favicon-Code. Sie wird durch das Verknüpfungssymbol angezeigt:

<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

Browser verwenden Icon-Caching, daher ist es besser, einen temporären Code zu verwenden, wenn du ihn ersetzen musstest:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Hier gibt v = 2 die Version des Symbols an. Erhöhe ihn um eins, wenn du das Bild änderst (v = 3, v = 4, usw.). Der Browser zeigt dann sofort die neueste Version an. Nachdem du dich für die endgültige Version des Symbols entschieden hast, kannst du diesen Parameter sicher aus dem Code entfernen.

Fazit

Ein Favicon ist ein wichtiges Element jeder Website. Ein hochwertiges Originalbild wird fast zum zweiten Gesicht der Marke. Es hilft dem Benutzer unauffällig, sich an die Seite zu erinnern, sie unter vielen anderen zu finden.

Um ein Symbol für die Website zu erstellen und zu installieren, benötigst du nicht mehr als 10 Minuten. Im Netzwerk gibt es viele kostenlose Online-Dienste mit verschiedenen Funktionen und einer Auswahl an Bildern, einige bieten an, selbst ein Logo zu erstellen.

Dieser Artikel gehört zum Modul «Checklist» von Serpstat

Die Option „Checklist" ist eine To-do-Liste, die dir hilft, den Aufgabenstatus des bestimmten Projekts zu verfolgen. Das Tool umfasst fertige Vorlagen mit einer umfangreichen Liste der Parameter, die zur Entwicklung erforderlich sind. Du kannst diese fertigen Vorlagen einsetzen oder eigene Posten hinzufügen.

Checklist testen