This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Datenschutzerklärung

Accept and continue

Report a bug

Cancel
313 11
SEO Lesezeit 6 Minuten 20 June 2019

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

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 0 people on average out of 5
Hast du einen Fehler gefunden? Markiere diesen und betätige Ctrl + Enter, um es uns mitzuteilen
Abonniere den Newsletter von Serpstat
Bleibe auf dem Laufenden mit aktuellsten Nachrichten, Beiträgen und Updates

Teile den Artikel in sozialen Netzwerken :)

Einloggen Registrieren

Вы исчерпали лимит запросов.

Or email
Забыли пароль?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code queriesLeft

smthWentWrong

contactSupport
telegramVerification telegramBotLink
Choose the project to view data on it

Persönliche Produktdemonstration

Serpstat hilft dir, noch mehr Zeit zu sparen! Bitte fülle das Formular vollständig aus — du wirst schnellstmöglich von einem unserer Produktspezialisten kontaktiert.

Persönliche Demonstration umfasst den Testzeitraum des Services, umfangreiche Anleitungen und Webinare, individuelle Beratung von Serpstat-Experten. Wir machen alles, damit du mit Serpstat zurechtkommst.

Name

Email

Telefonnummer

Wir freuen uns auf deine Kommentare

Upgrade your plan

Export is not available for your account. Please upgrade to Plan A or higher to get access to the tool. Learn more.

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
Просмотр Редактирование

E-mail
Message
Optional
E-mail
Message
Optional

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов