Favicon erstellen: So bindest du ein Favicon in deine Website ein
Bei der Veröffentlichung einer Website übersehen viele oft ein kleines, jedoch sehr wichtiges Detail: das Favicon. Auch wenn die kleinen Symbole im Verhältnis zu der Website relativ unwichtig erscheinen, sind die Vorteile keinesfalls zu unterschätzen. Hier erfährst du alles über Favicons und wie du dein eigenes Favicon erstellen kannst.
Was ist ein Favicon?
Bei einem Favicon handelt es sich um ein 16x16 Pixel großes Symbol, das im Browserfenster angezeigt wird, um eine Website bildlich vorzustellen. Das Kürzel Favicon für Favourite Icon (zu Deutsch „Lieblingssymbol”) wird meistens in einem Tab in der oberen Browserleiste angezeigt. Trotzdem findet man sie auch in der Lesezeichenleiste oder im Verlauf eines jeden Browsers. In manchen Fällen tauchen die kleinen Symbole, wie am Beispiel von Google Chrome, auch in der Startseite des Browsers auf. In anderen Worten ausgedrückt: das Favicon fungiert als Markenzeichen deiner Website oder einer optischen Markierung, woran man deine Website in den Weiten des Webs klar erkennen kann.
Welche Vorteile hat ein Favicon?
Unauffällig klein, spielen Favicons dennoch eine große Rolle in Hinsicht zum Nutzererlebnis, Branding oder der Seriosität einer Website.
Nutzererlebnis: Favicons sind quasi eine Kurzvorschau über deine Website, die einen langanhaltenden Eindruck hinterlassen und bewiesenermaßen das Nutzererlebnis verbessern. Auf diese Weise können Nutzer deine Website aus all den Tabs und Anwendungen leichter ausfindig machen, um auf deine Website zuzugreifen oder zurückzukehren.
Brinding: Bei einer rundum einheitlichen Marke, sind selbst die kleinsten Details ausschlaggebend. Favicons tragen zum Branding und der Sichtbarkeit einer Website bei, indem der Browser als Verlängerung für das Design und der Sprache dient.
Seriosität: Favicons sorgen für mehr Glaubwürdigkeit und Seriosität, wodurch deine Website transparenter für Besucher wirkt.
Favicon erstellen und einbinden – So geht's
Wenn du dein eigenes Favicon erstellen möchtest, solltest du vielleicht einen professionellen Designer in Erwägung ziehen. Falls du nicht schon mit einem Designer zusammenarbeitest, sollte das Favicon unbedingt in eurem Vertrag festgehalten werden. Mittlerweile gibt es auch mehrere Design-Programme und Favicon Generator, mit denen du dein eigenes Favicon erstellen kannst. Zum Beispiel 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: Das optimale Format eines Favicons sollte 16x16 Pixel betragen, welches mit der Größe übereinstimmt, in der das Favicon für gewöhnlich dargestellt wird. Manchmal kann es allerdings vorkommen, dass das Symbol in größerer Ausführung (z. B. 32x32 Pixel) dargestellt wird.
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.
Tipps zum Designen eines Favicons
Etwas so winziges zu designen, mag zwar wie ein Kinderspiel klingen, in Wahrheit ist es aber etwas komplexer. Die Symbole so klein sind, dass man sich keine Fehler erlauben sollte. Hier sind ein paar Tipps für die Erstellung 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.
Markenidentität: Ein Favicon umhüllt die Seele einer Website und Marke, welches auf die visuelle Sprache und Farbe der restlichen Website abgestimmt ist.
Das Favicon von eBay ist hierfür ein großartiges Beispiel, weil es die visuelle Sprache fortgesetzt, die sich auch in der Website und dem Logo findet. Die Branding-Farben wurden mit einem kleinen Warenkorb in einem Design vereint, das den Nutzen perfekt wiedergibt.
Wenig bis keinen Text: Falls du gerne Text, z. B. deinen Firmennamen, in deinem Favicon beinhalten möchtest, so 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. Dieses ist neon-grü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. Sobald man diese jedoch verkleinert, werden diese komplett unbrauchbar. Wenn du dich also dazu entscheiden solltest, dein Logo als Favicon zu verwenden, sind ein paar Änderungen zu erwarten. Indem du deinen Slogan überspringst oder nur einen Buchstaben verwendest, kannst du ein Logo erstellen, dass auch in der Verkleinerung gut aussieht.
Wenn du dir zum Beispiel das Favicon von Google ansiehst, weicht dieses nur dezent vom Logo ab, während es die gleichen Designelemente beibehält. In dem Favicon ist lediglich das altbekannte G zu sehen, welches gleichzeitig die vier Branding-Farben in einem einzigen Buchstaben verkörpert. 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 auf Hintergründen dargestellt wird, die sich von den Farben, dem Kontext und dem verwendeten Browser unterscheiden können. Deshalb ist es wichtig, dass du dein Favicon vorweg auf grauem, weißem und schwarzem Hintergrund testest, bevor du das Design fertigstellst.
So geht die Einbindung des Favicons in gängigen Content-Management-Systemen
Die Einbindung von Favicons durch HTML-Code mag sich auf Anhieb nach einer Sisyphusarbeit anhören. Das ist aber heutzutage nicht mehr zwingend notwendig. Denn auch auch Programmieranfänger können in nur wenigen Schritten ein eigenes Favicon in ihrer Website einbauen. Bei manchen gibt es bereits vorgefertigte Add-Ons, womit man das Favicon hochladen und im Browsertab einfügen kann.
Favicon in deiner Wix Website einbinden
Standardmäßig verfügt deine Wix Website über ein Muster-Favicon. Dieses kannst du nach Belieben anpassen. Hol dir ein Premiumpaket und verbinde deine Website anschließend mit einer Domain.
Das Favicon deiner Wix Website kannst du in wenigen Klicks abändern:
Öffne die Einstellungen von deiner Verwaltung aus.
Klicke neben “Favicon” auf “Verwalten”.
Klicke auf “Bild hochladen” und wähle eines aus den vorhandenen Bildern aus oder klicke auf “Medien hochladen”, um eigene Bilder von deinem Computer hochzuladen.
Durch Klicken auf “Hinzufügen” erhältst du eine Vorschau, wie dein Favicon im Browser-Tab aussehen wird.
Klicke auf “Speichern” und tadaa – deine Website hat ein Favicon. Dieses erscheint im Tab der Website, sobald du deine Website veröffentlicht hast.
Das Team von Wix
