Favicon erstellen: So bindest du ein Favicon in deine Website ein
- Alexandra Eger
- 3. Okt. 2023
- 9 Min. Lesezeit
Aktualisiert: 7. Mai
Viele Nutzer:innen, die eine Website erstellen, übersehen oft ein kleines, jedoch sehr wichtiges Detail: das Favicon, die kleine Grafik, die du in der Browserleiste ganz links neben der Website-URL findest.
Auch wenn die kleinen Symbole im Verhältnis zu der Website relativ unwichtig erscheinen, sind die Vorteile, die sie mit sich bringen, keinesfalls zu unterschätzen, denn es sorgt für einen besseren Wiedererkennungswert deiner Website und somit auch deiner Marke.
In diesem Beitrag erfährst du alles, was es über Favicons zu wissen gibt, aber vor allem, wie du dein eigenes Favicon erstellen und in deine Website einbinden kannst.
Du hast noch keine Website, um dein Favicon einzubinden? Dann erstelle sie jetzt.
Inhaltsverzeichnis:
Was ist ein Favicon?
Bei einem Favicon bzw. einem „Favoriten-Icon“, handelt es sich um ein 16x16 Pixel großes Symbol, dass in der Browserleiste links neben der URL angezeigt wird.
Favicons sind ein wichtiges Element im Web Design und werden verwendet, um eine Website in Browsern bildlich zu repräsentieren und so den Wiedererkennungswert zu verbessern.
Der Begriff Favicon setzt sich aus „favorite” und „icon“ zusammen. Es sind also „Lieblings-Symbole”, die meist quadratisch dargestellt werden. Es gibt sie aber auch in anderer Form, zum Beispiel rund und dreieckig.
Favicons werden nicht nur in der Browserleiste verwendet, sondern auch in den Registerkarten, der Lesezeichenleiste oder im Browser-Verlauf. In manchen Fällen, wie zum Beispiel bei Google Chrome, erscheinen die Favicons sogar auf der Homepage deines Browsers.
Kurz gesagt: Wenn du ein Favicon erstellst, dient es als Symbol für deine Website, bzw. als visuelles Identifikationsmerkmal, mit dem deine Nutzer:innen deine Website im Netz erkennen.
Warum ist ein Favicon wichtig?
Obwohl sie so klein sind, haben Favicons einen großen Einfluss auf den Wiedererkennungswert deiner Website, verbessern das Nutzererlebnis, dein Branding und vermitteln Professionalität.
Verbesserung der Nutzererfahrung: Favicons bieten eine Kurzvorschau auf deine Website. Besonders, wenn Nutzer:innen viele Tabs geöffnet haben, können Favicons ihnen dabei helfen, eine bestimmte Website schneller zu finden. Das gilt auch für die Lesezeichen.
Besseres Branding und Markensichtbarkeit: Bei einer rundum einheitlichen Marke sind selbst die kleinsten Details ausschlaggebend. Indem du dein Logo als Favicon nutzt, platzierst du es an prominenter Stelle und erhöhst die Sichtbarkeit einer Marke.
Seriosität: Favicons zeigen, dass dein Unternehmen auf Details Wert legt. Das wiederum verleiht dir mehr Glaubwürdigkeit und Seriosität bei deinen Kund:innen.
Wiederkehrende Nutzer:innen: Favicons sind ein wichtiges Markenzeichen und erleichtern es dir, dafür zu sorgen, dass sich deine Website von anderen abhebt – in den Suchergebnissen oder im Browser-Verlauf deiner Nutzer:innen. Deshalb hilft ein gut wiedererkennbares Favicon dabei, dass Nutzer:innen deine Website öfter erneut besuchen. Zusätzlich hilft das Favicon deinen Nutzer:innen, deine Website schneller in ihren Lesezeichen zu finden, wenn sie deine Website gebookmarkt haben.
Verbesserung deiner mobilen Websites: Besonders auf mobilen Websites sind Favicons sehr wichtig, denn sie dienen als Icons für die Links auf dem Homescreen. So finden die Nutzer:innen deine Website schnell wieder. Außerdem erscheinen die Favicons auch in den Suchergebnissen auf Mobilgeräten, wodurch sich die Websites besser erkennen lassen.
Wo erscheinen die Favicons?
Favicons können an verschiedenen Stellen erscheinen, zum Beispiel in Webbrowsern, der Lesezeichenleiste, im Browser-Verlauf und in den Suchergebnissen.
Favicon in einem Webbrowser
Favicon in der Lesezeichenleiste
Favicon im Browser-Verlauf
Favicon in den Suchergebnissen
Welche Größe hat ein Favicon?
Die optimale Größe für das Erstellen von Favicons ist 16x16 Pixel, was auch die Größe ist, in der sie normalerweise angezeigt werden. Sie können allerdings auch größer angezeigt werden (z. B. 32x32 Pixel). Aufgrund der vielen Anzeigeorte für Favicons, empfehlen wir dir, sie in unterschiedlichen Größen zu erstellen.
Hier sind ein paar Standardgrößen für Favicons und Tipps, welche du wo verwendest:
16x16 px: Standard-Format für Browser
32x32 px: Shortcut-Icon für die Verknüpfung in der Menüleiste
96x96 px: Desktop-Icon für die Anzeige auf Bildschirmen sowie Homescreens von Google TV, Apples iOS
180x180 px: Apple Touch Icon für iPhones mit Retina-Display
152x152 px: Favicon für iOS 10
Welche Bilder und Formate können als Favicon verwendet werden?
Ursprünglich war das Format für Favicons ICO. Mittlerweile sind die bevorzugten Dateiformate oder Vektorgrafiken für Favicons PNG oder JPEG.
Auch das SVG-Format wird immer beliebter, da es von immer mehr Browsern unterstützt wird. Browser können außerdem Favicons anzeigen, die als GIF erstellt wurden. Kleine GIFs verschlechtern allerdings die Erkennbarkeit deines Favicons. Hier haben wir die gängigsten Formate für Favicons erklärt.
ICO: Wurde von Microsoft entwickelt und ist das Original-Format für Favicons. Es wird von allen Browsern unterstützt und kann mehrere Bildgrößen in einer Datei speichern. So hast du die Möglichkeit, die Größe deines Favicons anzupassen, und musst dich nicht auf die Browser verlassen. Wenn Favicons als ICO und als andere Dateitypen gespeichert werden, entscheiden sich Browser immer noch dafür, die ICO-Version anzuzeigen.
PNG: Dieses Dateiformat für Favicons ist sehr beliebt, weil Website-Creator:innen es gut kennen. Es lässt sich leicht erstellen und liefert gute Qualität bei Bildern und Favicons. Außerdem haben PNG-Dateien geringe Dateigrößen, was bedeutet, dass sie schnell laden.
SVG: Diese Dateien sind für ihre geringen Dateigrößen bekannt. Der größte Vorteil dieses Dateiformats ist die Möglichkeit, hochwertige Bilder zu liefern, die die Seitengeschwindigkeit und -performance nicht beeinflussen. In der Vergangenheit war die Verwendung von SVG-Dateien für Favicons durch die beschränkte Kompatibilität mit Browsern eingeschränkt, aber das ändert sich gerade.
Transparenz: Wenn dein Design einen transparenten Hintergrund hat, solltest du darauf achten, dass du das PNG-Format verwendest und den transparenten Hintergrund aktivierst.
Wie erstelle ich ein Favicon?
Wie wir schon angedeutet haben, ist dein Firmenloge das perfekte Design für dein Favicon. Du kannst einen Logo Maker wie Wix nutzen, um es selbst zu erstellen, oder jemanden engagieren, der dein Logo bzw. dein Favicon für dich designt.
Da das Favicon sehr klein ist, lassen sich allerdings nicht alle Logos gut als Favicon einbinden. Das gilt besonders für sehr detaillierte Logos mit vielen Farben, Schrift, Schattierungen und anderen aufwändigen Elementen. Daher raten wir dir dazu, immer auch eine vereinfachte Form deines Logos zu erstellen, die du dann gut als Favicon einsetzen kannst.
Favicon erstellen und einbinden – So geht’s
Zu einem guten Web Design gehört ein Favicon einfach dazu. Mittlerweile gibt es auch mehrere Design-Programme und Favicon Generator, mit denen du dein eigenes Favicon erstellen kannst.
Mit dem Wix Logo Maker, hast du die Möglichkeit ein professionelles und vollends personalisiertes Favicon zu erstellen, das auf deine Bedürfnisse und deine stilistischen Vorlieben zugeschnitten ist.
Größe: Wie bereits erwähnt, ist das optimale Format eines Favicons sollte 16x16 Pixel betragen, was mit der Größe übereinstimmt, in der Favicons für gewöhnlich angezeigt werden.
Dateityp: Meistens werden die Favicons als JPEG oder PNG hochgeladen.
Transparenz: Falls dein Design auf einem transparenten Hintergrund dargestellt wird, solltest du die Datei als PNG abspeichern und sichergehen, dass die Transparenzeinstellungen eingeschaltet sind.
Wie du ein Favicon mit HTML hinzufügst
Wenn du deine Website mit einem Homepage-Baukasten erstellt hast, ist es nicht notwendig HTML zu verwenden, um dein Favicon hinzuzufügen. Dieser Schritt ist nur notwendig, wenn die Website von Entwickler:innen erstellt wurde. Unten kannst du sehen, wie ein Favicon in den Header des HTML-Codes deiner Website eingefügt werden muss, damit es auf der Website angezeigt wird.
<link rel="icon" type="image/png" href="Favicon.png"/>
Du erstellst deine Website mit Wix? Dann zeigen wir dir gleich, wie du deiner Website ganz einfach ein Favicon hinzufügen und es anpassen kannst.
Favicon in deiner Website von Wix einbinden
Standardmäßig verfügt deine Wix Website über ein Muster-Favicon. Du kannst es nach Belieben anpassen. Hol dir dafür zunächst ein Premiumpaket und verbinde deine Website anschließend mit einer Domain.
Jetzt Domain sichern und professionell durchstarten.
Das Favicon deiner Wix Website kannst du in wenigen Klicks ändern:
Öffne den Bereich Einstellungen in deiner Website-Verwaltung.
Klicke auf Website-Einstellungen.
Klicke unter Favicon auf Bild aktualisieren.
Wähle ein Bild aus oder klicke auf Bilder hochladen, um eines von deinem Computer hochzuladen.
Klicke auf Datei auswählen.
Klicke auf Speichern.
Dein Favicon testen
Wenn du dein Favicon auf deiner Website eingefügt hast, solltest du prüfen, ob es überall da, wo es erscheint, gut aussieht. Während du das tust, solltest du den Inkognito-Modus verwenden, damit es keine Probleme mit dem Cache gibt.
Dann schaust du dir dein Favicon überall dort an, wo deine Nutzer:innen es auf deiner Website sehen können – im Browser, in den Lesezeichen, im Verlauf und, wenn möglich, auch in den Suchergebnissen. Du rankst noch nicht für organische Keywords? Wenn deine Website indexiert wurde, solltest du sie finden, wenn du nach deinem Unternehmensnamen oder Markennamen suchst. Sobald du dein Favicon siehst, weißt du, dass es richtig implementiert wurde.
Jetzt ist auch ein guter Moment, um darüber nachzudenken, wie dein Favicon aussieht. Schafft dein finales Design es, die Essenz deiner Marke einzufangen? Wenn ja, dann kannst du dein Favicon mit der Welt teilen.
Dein Favicon steht bereit – jetzt fehlt nur noch der perfekte Webauftritt. Kaufe deine Domain und mach deine Website unverwechselbar.
Tipps fürs Favicon-Design
Etwas so Winziges zu designen, mag zwar wie ein Kinderspiel klingen, in Wahrheit ist es aber etwas komplexer. Gerade die Tatsache, dass die Symbole so klein sind, macht das Design zu einer Herausforderung. Hier sind ein paar Tipps für das Erstellen eines Favicons, das zu deiner Marke und Website passt:
Einfachheit: Durch die kleine Größe des Favicons ist einiges an Präzision gefragt. Statt deine Zeit in dünne Linien, Struktur und Schattierungen zu investieren, solltest du dich mehr auf ein Design konzentrieren, das klar zu erkennen ist.
Das Favicon der Schmuckdesignerin und Wix-Nutzerin Ilaria Bonardi ist ein großartiges Beispiel für ein einfaches Favicon-Design, das aus drei einfachen Punkten besteht. Wir lieben auch den skurrilen Spaß des einfachen Favicons von Ducknology – die Ente ist von ihrem Logo übernommen und repräsentiert alles, was diese Website und Marke so einzigartig macht.
Markenidentität: Ein Favicon repräsentiert die Kernidee einer Website und Marke und sollte zu der visuellen Sprache und dem Farbschema der Website passen.
Für die Wix-Website des Grafikdesigners Bhroovi ist das regenbogenfarbene Favicon eine Fortsetzung derselben farbenfrohen visuellen Sprache wie ihre Website. Auch das Favicon von eBay ist hierfür ein großartiges Beispiel, weil es die visuelle Sprache aufnimmt, die auch auf der Website und im Logo verwendet wird. Die Branding-Farben wurden mit einem kleinen Warenkorb zu einem Design vereint, das die Marke perfekt repräsentiert.
Wenig bis keinen Text: Falls du gerne Text, z. B. deinen Firmennamen, in dein Favicon aufnehmen möchtest, solltest du dich auf ein bis drei Zeichen beschränken. Initialen oder Abkürzungen sind dabei immer eine gute Idee.
Die Wix Website für die Non-Profit-Organisation Arte, nutzt das Initial A aus ihrem Logo als Favicon. Es ist neongrün hinterlegt, um es besonders aufpoppen zu lassen. Auch das Favicon von unseren Nutzern Red Fern kann sich sehen lassen. Sie haben komplett auf Text verzichtet. Stattdessen haben sie auf ihr bekanntes Blatt-Logo gesetzt, damit die Leute verstehen, worum es geht.
Logoverwendung: Manche Logos eignen sich bereits bestens als Favicon. Andere Logos werden jedoch komplett unbrauchbar, sobald man sie verkleinert. Wenn du dich also dazu entscheiden solltest, dein Logo als Favicon zu verwenden, sind u. U. ein paar Änderungen erforderlich. Dafür musst du vielleicht auf deinen Slogan verzichten oder nur einen Buchstaben deines Markennamens verwenden.
Wenn du dir zum Beispiel das Favicon von Google ansiehst, weicht dieses nur dezent vom Logo ab und verwendet die gleichen Designelemente. In dem Favicon ist lediglich das bekannte G zu sehen, das gleichzeitig die vier Branding-Farben in einem einzigen Buchstaben vereint. Einen anderen Weg ist die Illustratorin und Wix Nutzerin Charlotte Mei gegangen, die ihre handgezeichneten Initialen als Favicon verwendet hat.
Farbe: Beachte, dass dein Favicon je nach den Browsereinstellungen auf unterschiedlichen Hintergründen dargestellt werden kann. Deshalb ist es wichtig, dass du dein Favicon vorweg auf grauen, weißen und schwarzen Hintergründen testest, bevor du das Design fertigstellst.
Wenn du nach weiteren Inspirationen für gute Favicon-Designs suchst, solltest du dich bei diesen Wix Website Beispielen umsehen.
Favicons und SEO
Favicons haben keinen direkten Einfluss auf die Suchmaschinenoptimierung einer Website. Weil sie es aber den Browsenden erleichtern, Websites zu identifizieren, verbessern sie das gesamte Nutzererlebnis – die Eigenschaften eines Favicons können organisch verbessern, wie gut deine Website in den Suchergebnissen rankt:
Favicons können Google helfen, deine Website zu identifizieren. Wenn Google deine Website crawlt, sucht es nach der Favicon-Datei. Wenn es sie findet, nutzt es die Favicon-Datei, um deine Website in den Suchergebnissen zu identifizieren.
Favicons helfen Nutzer:innen, sich an deine Website zu erinnern. Wenn deine Nutzer:innen dein Favicon in ihren Browser-Tabs, Lesezeichen oder in den Suchergebnissen sehen, kann es ihnen dabei helfen, sich an deine Website zu erinnern. Das kann zu mehr Klicks auf deine Website in den Suchergebnissen führen.
Favicons können das Nutzererlebnis verbessern. Ein gut designtes Favicon lässt deine Website professioneller und gepflegter erscheinen, was das Nutzererlebnis verbessert.
Herausforderungen beim Erstellen von Favicons
Um ein Favicon zu einem starken Markenzeichen zu machen, müssen ein paar Herausforderungen gemeistert werden. Einige der wichtigsten haben wir hier zusammengestellt.
Begrenzter Raum: Dein Markenlogo in eine für Favicons geeignete Größe zu bringen, kann eine Herausforderung sein, besonders wenn deine Markenbotschaft nicht verloren gehen soll.
Sicherheit: Favicons können für Cyberangriffe missbraucht werden, einschließlich Einschmuggeln schädlicher Codes, Malware, Spoofing-Angriffe und Phishing.
Website-Ladezeit und -Geschwindigkeit: Wie alle Bilder fürs Web müssen Favicons für die Website-Performance optimiert sein, ansonsten verschlechtern sie die Ladezeiten deiner Website.
Barrierefreiheit: Kleine Bilder wie Favicons können die Barrierefreiheit negativ beeinflussen. Sie sind zu klein, um erklärende Texte oder ähnliches hinzuzufügen. Kompatibilitätsprobleme: Trotz der Standardisierung von Dateitypen und -formaten für Favicons kann es immer noch Probleme bei der Darstellung in verschiedenen Browsern und auf verschiedenen Geräten geben. Das beeinflusst, wie dein Favicon im Web angezeigt wird.
Fazit: Dein Favicon verbessert den Markenauftritt
Ein eigenes Favicon trägt maßgeblich zur Wiedererkennung deiner Marke bei. Es ist die kleine Ikone, die neben dem Tab in deinem Browser erscheint und deinem Unternehmen eine unverwechselbare Identität gibt. Ein gut gestaltetes und ansprechendes Favicon ist somit ein wichtiger Teil deines Markenauftritts und kann dazu beitragen, dass deine Website und somit auch deine Marke bei deinen Nutzer:innen im Gedächtnis bleibt.
Indem du ein Favicon erstellst und in deine Website einbindest, kannst du dich deiner Konkurrenz abheben. Investiere also genug Zeit und Mühe in die Gestaltung deines Favicon und hinterlasse einen bleibenden Eindruck bei deinen Kund:innen.
Also warte nicht länger. Erstelle deine Website und binde dein Favicon ein.
Alexandra Eger
Content-Managerin
