We use cookies to make Serpstat better. By ckicking "Accept cookies", you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Datenschutzerklärung

Report a bug

Cancel
2721 3
SEO Lesezeit 6 Minuten

Wie man ein Favicon erstellt

Wie man 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.

Was ist ein Favicon?

Favicon ist ein kleines Symbol mit dem Seitenlogo, das im Browser-Tab vor dem Namen der Seite angezeigt wird:
So sieht das Favicon einer Website aus
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.
So sieht das Favicon in Chrome-Geschichte
Der Einsatz des Favicons bietet noch eine Reihe weiterer Vorteile:
1
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.
2
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.
Favicon im Browser

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.
Favicon-Generator
1
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.
2
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".
3
favicon-generator.de

Sehr einfacher Generator, der auf Basis vom heruntergeladenen Bild ein Favicon in wenigen Sekunden erstellt.
4
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.
5
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:
1
Füge die Datei favicon.ico dem Stammordner – dem Site-Verzeichnis – hinzu.
2
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
«Checklist» von Serpstat" title = "Wie man Favicon erstellt 16261788290913" />

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

Erfahre, wie du Serpstat mit bestmöglicher Effizienz verwendest

Möchtest du persönliche Produktdemonstration, die Testversion oder erfolgreiche Use-Cases bekommen?

Sende eine Anfrage und unser Support-Team kontaktiert dich ;)

Rate the article on a five-point scale

The article has already been rated by 1 people on average 2 out of 5
Hast du einen Fehler gefunden? Markiere diesen und betätige Ctrl + Enter, um es uns mitzuteilen