Favicons sind ein wichtiger Bestandteil des digitalen Marketings. Sie helfen dabei, Ihr Unternehmen im breiten Internet optisch zu identifizieren. Durch diese winzigen, aber wirksamen Elemente kann das Benutzererlebnis auf Ihrer Website verbessert und die Markenbekanntheit gesteigert werden. In diesem Beitrag erfahren Sie mehr darüber, was Favicon-Bildsymbole sind, einschließlich ihrer Größe, wie Sie mit einem Generator eines für Ihre Website erstellen, wie sie sich auf SEO auswirken und wie Sie eines mithilfe von HTML hinzufügen.
Was ist ein Favicon??
Ein Favicon ist ein kleines 16×16 Pixel großes Bildsymbol, das als Branding für Ihre Website dient. Das Hauptziel besteht darin, Benutzern das Auffinden Ihrer Seite zu erleichtern, wenn mehrere Registerkarten geöffnet sind.
Aufgrund seiner geringen Größe funktioniert ein Favicon am besten als einfaches Bild oder als Text mit ein bis drei Zeichen. Favicons und Logos sind manchmal gleich, sollten aber nicht verwechselt werden. Aufgrund seiner geringen Größe und geringen Auflösung muss das Favicon möglicherweise noch kleiner sein oder ein Teil des Originallogos eines Unternehmens sein.
Wo können Sie das Favicon-Bildsymbol sehen?
Das Favicon für Ihre Website kann neben allen identifizierenden Elementen platziert werden. Dazu gehören Suchleisten, Verlaufsergebnisse, Symbolleisten-Apps, Lesezeichen und Registerkarten.
Favicons finden Sie auf:
- Die Suchleiste.
- Suchverlauf.
- Symbolleisten-Apps.
- Lesezeichen.
- Empfehlungen für Ihre Suchleiste.
- Das Dropdown-Menü Ihrer Lesezeichen.
Durch die Verwendung eines solchen können Sie sicherstellen, dass die Leute Ihre Website schnell erkennen. Mithilfe dieser Favoriten können Online-Besucher die von ihnen besuchten Seiten sofort identifizieren.
Warum ist das Favicon-Symbol wichtig?
Ein einfacher, aber entscheidender Schritt beim Erstellen einer Unternehmenswebsite ist die Erstellung eines Favicon-Symbols. Es verleiht Ihrer Website mehr Autorität und stärkt sowohl Ihren Ruf im Internet als auch das Vertrauen potenzieller Kunden.
Sie dienen als erster visueller Hinweis für die Website, ermöglichen Webbenutzern eine schnelle und einfache Identifizierung und vereinen alle verschiedenen Elemente des Browsers, um ein einheitliches, gut gebrandetes Surferlebnis zu schaffen.
Favicon erstellen
Beim Erstellen und Entwerfen eines Favicon-Symbols für Ihre Website müssen mehrere Faktoren berücksichtigt werden. Obwohl es winzig und einfach ist, kann (und sollte) es erhebliche Auswirkungen haben. Da Besucher Ihre Marke mit Ihrem Favicon assoziieren, ist es wichtig, die beste Version dieses Bildes zu erstellen. Beachten Sie beim Erstellen Ihres Favicon-Bildsymbols Folgendes:
#1. Nutzen Sie den Platz sinnvoll
Manchmal kann ein Favicon nicht nur eine verkleinerte Nachbildung Ihres Firmenlogos sein. Dabei muss die Gesamtgröße Ihres Favicons berücksichtigt werden. Sie sollten bei 16px bleiben, da alle Browser dies zulassen.
#2. Einfachheit
Auch wenn das Favicon Ihrer Marke als Logo dient, sollten Sie versuchen, Ihr Design so geradlinig wie möglich zu halten. Die einfachsten Favoriten funktionieren am besten. Aufgrund der geringen Größe des Favicons und der Verwendung geradliniger Designs sind Farben unerlässlich, um die Aufmerksamkeit potenzieller Kunden zu erregen und sich abzuheben. Das Favicon wirkt nur dann unübersichtlich und unorganisiert, wenn es zu viele Details enthält.
#3. Markenidentität
Ihr Favicon sollte den Nutzern visuell vermitteln, wofür Ihr Unternehmen steht, da es die visuelle Darstellung Ihrer Marke ist. Dadurch wird ihnen sofort erklärt, was Ihre Marke ist und was sie leistet.
Versuchen Sie, erfinderisch zu sein, auch wenn das bei einem so kleinen und unkomplizierten Design schwierig ist.
#4. Abkürzung
Für die Tätigkeit Ihres Unternehmens ist es möglicherweise nicht möglich, das ideale Bild zu finden. Eine typische Lösung hierfür ist die Verwendung des ersten Buchstabens Ihres Firmennamens oder von Akronymen. Sie können sich auch dafür entscheiden, den Namen Ihres Unternehmens zu kürzen. Probieren Sie verschiedene Varianten aus und wählen Sie diejenige aus, die Ihren Bedürfnissen am besten entspricht.
#5. Farbkoordination
Auch die Auswahl der Farben sollte berücksichtigt werden. Kontrastierende Farben machen es dem Auge leicht, zwischen Formen und dem Hauptmerkmal Ihres Favicons zu unterscheiden. Da es so wenige Favoriten gibt, müssen Sie Ihr Unternehmen dem Benutzer präsentieren, und die Farbauswahl kann wichtig sein. Bedenken Sie, dass sich jeder Browser geringfügig voneinander unterscheidet. Einige haben beispielsweise einen grauen, schwarzen oder weißen Hintergrund, der von Ihrem Favicon abgedeckt wird.
Favicon Generator
Die besten Favicon-Generatoren im Internet sind unten aufgeführt. Sie laden einfach Ihr Favicon-Bild mit den für den Favicon-Generator verfügbaren Funktionen hoch. Anschließend wird das Bild von der Generator-Software in die entsprechenden Favicon-Formate umgewandelt und zum Download bereitgestellt. Dieser Vorgang wird nicht lange dauern.
ICO und PNG sind die akzeptierten Dateiformate für Favicons.
- Alle Browser, einschließlich Internet Explorer, sind mit ICO kompatibel.
- Ein weiteres beliebtes Format ist PNG. Der Hauptnachteil besteht darin, dass eine PNG-Datei vom Internet Explorer nicht unterstützt wird.
Idealerweise sollten Sie Ihr Favicon in beiden Formaten von dem von Ihnen ausgewählten Generator erhalten können.
#1. Favikon
Es ist ganz einfach, in Favikon ein Favicon zu erstellen. Um ein Symbol zu erstellen, laden Sie einfach ein Bild hoch, schneiden Sie es zu und erhalten Sie es im ICO- oder PNG-Format. Favikon erlaubt nur eine Größe, nämlich 16×16 Pixel, was einen Nachteil darstellt.
#2. Favicon.io
Sie können mit Favicon.io ein Favicon von Grund auf erstellen, ein Bild, ein Logo oder ein Emoji. Vor dem Download können Sie es in drei verschiedenen Größen betrachten. Das Ergebnis steht in den Formaten ICO und PNG in verschiedenen Größen zum Download bereit.
#3. Favicon.ico & App-Icon-Generator
Sie können ein PNG- oder JPG-Bild hochladen und es mit dieser kostenlosen Anwendung in verschiedene Größen in ICO- und PNG-Formate konvertieren. Sie speichern Ihr Favicon im Stammverzeichnis Ihrer Website, sobald Sie es im gewünschten Format generiert haben. Das Favicon kann dann zu Ihrer Website hinzugefügt werden, indem Sie einen HTML-Link erstellen, der auf die Datei verweist.
Dies gilt für Websitebesitzer, unabhängig davon, ob sie ein Entwicklungsframework wie Bootstrap CSS verwendet oder ihre Website von Grund auf neu entwickelt haben. Es ist wichtig zu beachten. Das Verfahren unterscheidet sich erheblich, unabhängig davon, ob Sie einen Website-Builder oder ein CMS wie WordPress oder WordPress-Alternativen verwenden.
Favicon-Größe
Ein Favicon sollte 16×16 Pixel groß sein. Sie werden auf diese Weise in Adressleisten, Lesezeichenlisten und Browser-Registerkarten angezeigt. Erstellen Sie Ihr Favicon idealerweise in mehr als einer Größe. Auf größeren Displays sehen Sie Versionen, die entsprechend skaliert sind, und nicht die gestreckte 16×16-Version.
Die beliebtesten Favicon-Größen und ihre speziellen Verwendungszwecke sind unten aufgeführt.
- 16×16: Die Größe der Browser-Favicons.
- 32×32: Die Größe der Verknüpfungssymbole in der Taskleiste.
- 96×96: Die Größe der Desktop-Verknüpfungssymbole.
- 180×180: Die Größe der Apple Touch-Symbole.
- 300×300: Die von Squarespace benötigte Größe.
- 512×512: Die von WordPress benötigte Größe.
Sind Favicons wichtig für SEO?
Obwohl Favicons nicht direkt für Ihre SEO verantwortlich sind, sind sie indirekt dafür verantwortlich und eine entscheidende Technik, um Ihre Suchmaschinenposition zu verbessern. Hier sind einige Beispiele dafür, wie die Verwendung eines Favicons Ihre SEO verbessern kann:
#1. Benutzerfreundliche Websites führen zu einer erhöhten Nutzung
Die Benutzerfreundlichkeit Ihrer Website erhöht indirekt das Suchmaschinenranking. Durch die einfache Identifizierung und Navigation Ihrer Website spart ein Favicon in Ihren Browser-Registerkarten, Lesezeichen, Verlaufsarchiven und anderen Orten Ihren Benutzern Zeit und erhöht die Wahrscheinlichkeit, dass sie mit Ihrer Website interagieren.
Dadurch besuchen mehr Menschen Ihre Website über einen längeren Zeitraum, was den Traffic steigert und Ihre SEO steigert.
#2. Lesezeichen
Sie haben einen Vorteil gegenüber Websites ohne Favicons. Bei Websites, die online mit Lesezeichen versehen wurden, berücksichtigt der Google Chrome-Browser bestimmte Suchranking-Faktoren. Ohne ein Favicon kann Ihre Website möglicherweise nicht im Chrome-Browser mit einem Lesezeichen versehen werden, was eines von vielen indirekten Signalen wäre, die zur Bestimmung des Suchrankings verwendet werden.
Darüber hinaus erhöht sich die Wahrscheinlichkeit, dass Benutzer zu Ihrer Website zurückkehren, wenn Sie Ihre Website mit einem Lesezeichen versehen und dann dank Ihres Favicons optisch in der Lesezeichenliste hervorstechen. All dies verbessert die SEO und die Besucher Ihrer Website.
#3. Branding und Sichtbarkeit
Benutzer werden Ihre Marke mit Ihrem Favicon assoziieren, da es eine visuelle Darstellung Ihrer Website und Ihres Unternehmens ist. Bei SEO dreht sich alles um Marketing und Branding. Je mehr Besucher Ihre Website sehen und sich an Sie erinnern, desto wahrscheinlicher ist es, dass sie darauf klicken.
So fügen Sie ein Favicon in HTML hinzu
Sobald Ihr Favicon erstellt wurde, müssen Sie Browsern und anderen webbasierten Anwendungen mitteilen, wo es zu finden ist. Dies müssen Sie erreichen, indem Sie eine Codezeile in die einfügen relevanten Bereich Ihrer HTML-Datei.
Angenommen, Sie haben Ihre PNG-Datei unter dem Namen „favicon.ico“ gespeichert. Fügen Sie dann den folgenden Codeausschnitt zwischen jedem Ihrer r ein </head> Tags:
Bitte beachten Sie, dass sich Ihr Favicon, obwohl es üblich ist, nicht im Stammverzeichnis der Site befinden muss. Stellen Sie einfach sicher, dass die href-Eigenschaft korrekt ist, wenn Sie sie woanders gespeichert haben. Sie würden eintippen wenn Sie es im Unterordner „images“ gespeichert haben.
Stellen wir uns vor, Sie hätten verschiedene Favicon-Größen erstellt. Durch Einfügen einer Codezeile für jede Größe in die Wenn Sie den relevanten Bereich Ihrer HTML-Datei angeben, können Sie alle davon auf Ihre Website laden.
Sie würden beispielsweise die folgende Codezeile hinzufügen, um eine 16×16-, 32×32-, 48×48- und 180×180-Version zu erstellen:
Welche Formate verwende ich für ein Favicon?
Es gibt jetzt einige andere Formatierungsoptionen, im Gegensatz zur vorherigen, als ein Favicon im Windows-ICO-Format vorliegen musste. Hier ist ein genauerer Blick auf jeden von ihnen:
- Windows ICO: Das ICO ist bei weitem der Dateityp, der am häufigsten unterstützt wird. Der Vorteil des ICO besteht darin, dass es verschiedene Bittiefen und Auflösungen unterstützen kann, was hervorragend funktioniert und insbesondere für Windows hilfreich ist. Darüber hinaus stellt ICO ein 32-Pixel-Symbol für die Windows 7-Taskleiste bereit, das mit Internet Explorer funktioniert. Darüber hinaus ist es das einzige Format, das das Element überspringt.
- PNG: Es gibt mehrere Verwendungsmöglichkeiten für das PNG-Format. Eine PNG-Datei kann ohne zusätzliche Software erstellt werden, was sie äußerst benutzerfreundlich macht. Es wird die kürzeste Dateigröße bereitgestellt und Alpha-Transparenz wird unterstützt. Ein wesentlicher Nachteil dieses Designs besteht jedoch darin, dass Internet Explorer nur ICO-Dateien unterstützt und keine PNG-Dateien öffnet.
- SVG: Dieses Format kann von Opera-Browsern verwendet werden und wird von diesen unterstützt.
- GIF: Abgesehen von der Kompatibilität mit älteren Browsern bietet dieses Format keine Vorteile. Obwohl sie die Aufmerksamkeit der Benutzer auf sich ziehen, neigen sie auch dazu, zu nerven, und es herrscht die überwältigende Überzeugung, dass sie überhaupt nicht vorteilhaft sind.
- JPG: Obwohl JPG verwendet werden kann, ist es weniger beliebt und bietet nicht die gleiche Auflösungsqualität wie PNG. Aufgrund der bescheidenen Größe des Favicons verliert das JPEG auch alle seine Vorteile.
- APNG: Hierbei handelt es sich um eine animierte Variante von PNG, und obwohl Firefox und Opera sie möglicherweise unterstützen, weist sie die gleichen Nachteile wie das animierte GIF auf, da sie den Betrachter von der Benutzeroberfläche ablenkt.
Wie erhalte ich ein Favicon?
Um ein Favicon zu Ihrer Website hinzuzufügen, speichern Sie das Bild entweder im Stammverzeichnis Ihres Webservers oder in einem neuen Ordner mit dem Namen „pictures“, den Sie im Stammverzeichnis erstellen. „favicon.ico“ ist ein typischer Name für ein Favicon-Bild.
Wofür wird ein Favicon verwendet?
Verbesserung der Benutzererfahrung. Die Hauptfunktion eines Favicons besteht darin, Benutzern das sofortige Wiedererkennen einer Seite zu erleichtern, wenn mehrere Registerkarten im selben Browserfenster geöffnet sind. Benutzer können Ihre Website schnell erkennen und darauf zugreifen, wenn Sie eine mit einem Favicon erstellen.
Ist ein Favicon dasselbe wie ein Logo?
Im Vergleich zu Logos sind Favicons im Wesentlichen winzig. Einige Unternehmen verwenden als Favoriten eine verkleinerte Version ihres Logos. Dies ist jedoch nicht immer effektiv. Die meisten Logos verwenden Bilder und Text, doch die Favicons sind zu klein, um sie unterzubringen.
Was ist ein Beispiel für ein Favicon?
Unser Favicon ist das schicke P, das auf der Registerkarte links neben der URL-Leiste auf der ProCreator-Website zu sehen ist.
Kann ich mein Logo als Favicon verwenden?
Ja. Als Favicons verwenden die meisten Websites häufig ihr Logo. Mit dem kostenlosen Logo-Ersteller können Sie ganz einfach ein Logo für Ihre Website erstellen, falls noch keins vorhanden ist.
Welche Regeln gelten für Favicon?
Richtlinien zum Erstellen fantastischer Favicons:
- Sorgen Sie für Einfachheit.
- Behalten Sie die Vertrautheit.
- Verwenden Sie so wenig Text oder Schrift wie möglich.
- Bedenken Sie die Farbe.
Zusammenfassung
Trotz ihrer geringen Größe haben Favicons eine große Wirkung. Favicons sind für den Erfolg Ihres Unternehmens in der heutigen schnelllebigen digitalen Welt von entscheidender Bedeutung, da sie Ihrer Website online eine visuelle Identität verleihen und dabei helfen, das größtmögliche Benutzererlebnis zu schaffen. Das Schöne daran ist, dass das Erstellen von Favicons unkompliziert ist.
Ähnliche Artikel
- WIE MAN LESEZEICHEN KANN: Schnelle und einfache Möglichkeiten, jede Seite mit einem Lesezeichen zu versehen
- 2 schnelle Möglichkeiten zum Aktualisieren Ihrer alten PDF-Dateien
- BANNERWERBUNG: Wie es funktioniert mit Beispielen
- LINKEDIN-LOGO: Bedeutung, Geschichte, Schriftart und Designeinflüsse
Bibliographie
