Favicon: Dein Logo oben im Browser Tab!

Mit einem Favicon schaffst Du für Deine Nutzer und Besucher einen Mehrwert und Wiedererkennungswert. Mittlerweile ist es schon fast Pflicht und ein Muss, wenn Websitebetreiber eine neue Seite einrichten. Doch wie wird ein Favicon eigentlich eingebunden? Wir zeigen Dir, was Du dabei beachten musst.

Was ist ein Favicon?

Bei einem Favicon handelt es sich um ein kleines Symbol/Logo, was unter anderem im Internet Browser angezeigt wird. Je nachdem, mit welchem Browser Nutzer unterwegs sind, wird es direkt neben der geöffneten Internetadresse, oder im Browser Tab angezeigt.

Ein Favicon ist aber zusätzlich in weitaus mehr Bereichen sinnvoll. So beispielsweise, wenn Nutzer ein Lesezeichen deiner Website anlegen. Dann wird dein Website-Eintrag mitsamt Favicon angezeigt. Erstellen Smartphone- und Tablet-Nutzer eine Verlinkung auf dem Homescreen, wird dein Favicon hier ebenfalls als Logo verwendet.

Aber auch in Suchmaschinenergebnissen (mobile SERPs) und selbst im Betriebssystem Windows findet dein Favicon Verwendung, wenn Du hier eine Kachel anlegst.

Wie Du siehst, sorgt das Favicon für jede Menge Aufmerksamkeit und schafft gleichzeitig einen Wiedererkennungswert. Umso wichtiger ist es, dass Du ein eigenes erstellst und einbindest.

Welche Vorteile bietet es?

Besitzt Du bereits ein Logo für beispielsweise dein Unternehmen, Forum oder deinen Blog? Hervorragend. Dann kannst Du daraus direkt ein Favicon erstellen und dein Logo auf diesem Wege virtuell verbreiten.

Einmal eingerichtet, bleibt es dauerhaft im Browser Tab und wird in vielen andere Bereichen angezeigt.

Dazu gehören:

• Adressleiste
• Registerkarte
• Lesezeichen
• Verlaufsarchive
• Mobile Verknüpfungen auf mobilen Geräten (Homescreen)

Wird Dein Favicon in all diesen Bereichen angezeigt, schaffst Du auf diesem Wege einen Wiedererkennungswert. War Dein Nutzer oder Kunde bereits auf Deiner Seite, dient das Favicon zur Orientierung und er kehrt schnell zurück.

Tipp: Schaffe einen Wiedererkennungswert

Erstellst Du eine Website, kannst Du damit neue potenzielle Besucher, Kunden und bestimmte Zielgruppen erreichen und ansprechen. Wichtig ist dabei allerdings, dass Deine Besucher das Favicon sofort erkennen und sich daran erinnern können.

Hast Du also beispielsweise erst kürzlich einen Online-Shop eröffnet und bereits vorher offline verkauft, verwende dasselbe Logo. Denn so schaffst Du einen Wiedererkennungswert. Deine Nutzer und Besucher erhalten Orientierung und Du erhältst Vertrauen. Das gibt Pluspunkte.

Wie wird ein Favicon erstellt?

Wie bereits erwähnt, eignet sich das Logo Deiner Website oder Deines Unternehmens hervorragend, um daraus ein Favicon zu erstellen/generieren. Nur so stellst Du sicher, einen einheitlichen Auftritt und den bereits genannten Wiedererkennungswert zu schaffen.

Allerdings solltest Du darauf achten, dass sich nicht jedes Logo direkt als Favicon eignet. Denn das Favicon, was in Browser Tabs und Co. angezeigt wird, ist sehr klein. Hier liegt es nahe, dass Du große Logos mit zahlreichen Details, aufwändigen kleinen Elementen und Schattierungen nicht so einfach konvertieren kannst.

Ist das bei Dir der Fall, kannst Du auch ein einfaches Symbol erstellen (lassen), was die einheitlichen Farben Deines Firmenlogos enthält (Corporate Design).

Bist Du mit Photoshop gut versiert, kannst Du mit dem Programm schnell und einfach aus einem Logo eine .ico-Datei erstellen. Voraussetzung dafür ist allerdings, dass Du vorher ein Plugin installierst. Erst dann bist Du dazu in der Lage, die Funktion zu nutzen.

Favicon Generatoren und Converter

Kennst Du Dich im Grafikbereich überhaupt nicht aus, kannst Du alternativ auf Favicon-Generatoren und Converter setzen. Bei diesen Tools musst Du lediglich Dein Logo importieren, alle gewünschten Einstellungen vornehmen und schon wird Dein Favicon erstellt bzw. konvertiert.

Bekannte Favicon Generatoren im Überblick

Im Folgenden sind bekannte und einfach zu bedienende Favicon Generatoren aufgeführt:

Beim Favicon Generator von favicon.io stehen Dir gleich mehrere Funktionen und Möglichkeiten zur Verfügung.

• PNG zu ICO: Lade eine PNG-Logo-Datei hoch und konvertiere Sie zu einem Favicon
• TEXT zu ICO: Gib einen Text wie beispielsweise den Name von Deinem Unternehmen ein und speichere ihn als .ico-Datei ab
• Emoji zu ICO: Du kannst alternativ aber auch ein beliebiges Emoji auswählen und es als ICO downloaden

Auf favicon.io stehen Dir zahlreiche Einstellungsmöglichkeiten und Installationsanleitungen zur Verfügung. Allerdings ist der Favicon Generator komplett auf Englisch.

Mit dem Real Favicon Generator erstellst Du im Handumdrehen Favicons. Das großartige an dem Tool ist, dass gleich mehrere Plattformen wie Android, Windows und Co. unterstützt werden. Lade einfach ein Logo im PNG-, SVG- oder JPG-Format hoch, die Konvertierung und Erstellung übernimmt der Generator automatisch.

Du möchtest Dein eigenes Favicon erstellen und zeichnen? Dann ist Favicon.cc hervorragend geeignet. Wähle zwischen verschiedenen Farben, Effekten und einer Transparentfunktion. Bei Bedarf erstellst Du auch ein Frame, also eine Animation im Favicon. Ein Blick in das Tool lohnt sich allemal!

Bei Arinjay Shekhar Favicons findest Du keinen direkten Generator. Vielmehr steht hier ein großes Package zum Download bereit, in dem verschiedene Styles enthalten sind. So findest Du in dem Paket Buchstaben in verschiedenen Farben, Ziffern und weitere Favicon-Symbole, die bestimmte Themen wie Musik oder den Medizinbereich behandeln.

Auch das Tool auf Favicon-Generator.org bietet zahlreiche nützliche Eigenschaften und Funktionen. Lade zunächst eine Grafik oder Dein Logo in einem vorgegebenen Dateiformat hoch. Anschließend triffst Du alle gewünschten Optionen und lässt das Favicon mit einem Klick generieren. Hast Du keine Möglichkeiten, Dein Favicon selbst hochzuladen? Beim Favicon-Generator.org erhältst Du zusätzlich Codes zum Einbinden.

Der Generator Favic-o-Matic ist simpel gehalten und einfach zu bedienen. Hier stehen Dir grundsätzlich zwei Optionen zur Auswahl, nachdem Du ein Bild oder Logo hochgeladen hast.

Bei der ersten Option lässt Du einfach nur eine normale .ico-Datei mit 16×16 und 32×32 px erstellen. Die zweite Option erstellt Dir alle erdenklichen Formate, die für sämtliche Systeme wie Android, iOS und Co. geeignet sind.

Tipp: Favicon Generator als WordPress Plugin

Betreibst Du Deine Website mit dem CMS WordPress, findest Du hierfür einige Favicon Plugins. Hierzu loggst Du Dich einfach in das WordPress-Admin-Menü Deiner Domain ein und klickst im Admin-Bereich in der linken Navigationsleiste auf die Option „Plugins“. Als nächstes wählst Du „Installieren“ aus und gibst oben rechts in der Suchleiste „Favicon“ ein. Nun erhältst Du eine Ergebnisliste mit allen verfügbaren Favicon-Plugins.

Ein bekanntes und häufig verwendetes Plugin ist beispielsweise Favicon by RealFaviconGenerator. Einmal eingerichtet und ein Bild oder Logo hochgeladen, erstellt das praktische Plugin automatisch ein Favicon. Es ist mit nahezu allen Plattformen und Betriebssystemen kompatibel.

Passende Formate für Favicons

Mittlerweile findet nicht nur das Dateiformat .ico Verwendung, um hiermit ein Favicon auf dem Server abzulegen und es auszugeben.

Auch die folgenden Dateiformate werden unterstützt:

• .ico
• .gif
• .png
• .jpg
• .svg

Dadurch, dass in der Vergangenheit immer mehr neue Browser und Geräte erschienen sind, sind auch die Anforderungen an Favicons gewachsen. Dateiformate wie .png und .jpg bieten weitaus höhere Auflösungen, die bei Apple und Co. gefordert werden. Alle Standardgrößen findest Du in der Tabelle im nächsten Absatz.

So wählst Du die richtige Größe

Mittlerweile sind Favicons längst nicht nur für klassische Internetbrowser geeignet, um sie in den Browser Tabs oder Adresszeilen anzuzeigen. Wie Du bereits erfahren hast, finden sie auch auf anderen Geräten und Systemen wie Smartphones, Tablets und Windows-Computern Verwendung.

Umso wichtiger ist es, dass du ein Favicon in allen erforderlichen Größen zur Verfügung stellst. Hier kommen auch wieder die oben vorgestellten Favicon Generatoren ins Spiel, die mit wenigen Klicks sämtliche Formate und Größen generieren.

Im Folgenden sind alle wichtigen und benötigten Standardgrößen aufgeführt:

Gerätetyp	Erforderliche Standardgrößen in Pixel
Internet-Browser	16 x 16, 32 x 32, 96 x 96
Apple	57×57, 60×60, 72×72, 114×114, 76×76, 120×120, 152×152, 180×180
Android	36×36, 48×48, 72×72, 96×96, 144×144, 192×192
Windows-Computer	70×70, 150×150, 310×150, 310×310

Wie wird ein Favicon auf einer Website eingebunden?

Möchtest du ein Favicon auf Deiner Website einbinden, geschieht das mittels HTML. Hierzu musst du einen entsprechenden Code hinzufügen und zur Favicon-Datei verlinken. Je nachdem, für welchen Gerätetyp du das Favicon zur Verfügung stellen möchtest, ist ein bestimmter Code erforderlich.

Bevor es zur Einbindung geht, lädst du alle generierten Favicon-Dateien in das Stammverzeichnis Deines Servers/Webspaces. Sie werden im weiteren Verlauf im HTML-Code verlinkt.

Den Code bindest du bitte immer im <head>-Bereich ein. Nur so ist sichergestellt, dass Browser und Gerätetypen den Code auslesen und entsprechend ausgeben.

Favicon für Internet-Browser einbinden

Bei der klassischen Variante für Internet-Browser sieht der Code wie folgt aus:

<link rel=“shortcut icon“ type=“image/x-icon href=“/favicon.ico“>

Möchtest du ein Favicon zusätzlich in mehreren Auflösungen zur Verfügung stellen, lädst du die entsprechenden Dateien hoch und verlinkst sie:

<link rel=“icon“ type=“image/png“ sizes=“16×16″ href=“/favicon-16×16.png“>
<link rel=“icon“ type=“image/png“ sizes=“32×32″ href=“/favicon-32×32.png“>

Tipp: Möchtest du die beiden Varianten mit 16 und 32 Pixel zur Verfügung stellen ist es hilfreich, die Favicons im PNG-Format hochzuladen. So umgehst du, dass der Browser sich für die niedrigere Auflösung entscheidet.

Favicon für Safari auf iOS einbinden

Möchtest du ein Favicon für Safari auf iOS erstellen und einbinden, ist ein Touch-Icon Grundvoraussetzung. Es muss eine Auflösung von 180 x 180 px und das Dateiformat PNG haben.

Der Code sieht dann so aus:

<link rel=“apple-touch-icon“ sizes=“180×180″ href=“/apple-touch-icon.png“>

Wichtig: Achte beim Touch-Icon darauf, dass im späteren Verlauf die Ecken vom Favicon zur besseren Darstellung automatisch abgerundet werden. Das ist vor allem für die Darstellung auf dem Homescreen der Fall.

Möchtest du zusätzlich ein Favicon für angeheftete Tabs erstellen, bindest du es bitte als SVG-Datei ein, die skalierbar ist.

Dabei gilt folgender Code:

<link rel=“mask-icon“ href=“/safari-pinned-tab.svg“ color=“#fff“>

Favicon für Android/Google Chrome einbinden

Wie in der oberen Tabelle ersichtlich, fallen die Favicons für Android ebenfalls größer aus. Hier stellst du am besten ebenfalls alle empfohlenen Formate zur Verfügung.

Der Code sieht so aus:

<link rel=“manifest“ href=“/icons/site.webmanifest“>

Wie du siehst, verlinkt der Code zu einer separaten Datei. Hierin legst du anschließend die entsprechenden Formate der Favicons ab:

Beispielcode:

{

    „name“: „“,

    „short_name“: „“,

    „icons“: [

        {

            „src“: „/android-chrome-144×144.png“,

            „sizes“: „144×144“,

            „type“: „image/png“

        },

        {

            „src“: „/android-chrome-192×192.png“,

            „sizes“: „192×192“,

            „type“: „image/png“

        }

    ],

    „theme_color“: „#fff“,

    „background_color“: „#fff“,

    „display“: „standalone“

}

Bitte füge nun noch die weiteren Formate der anderen Favicons zu, die du zur Verfügung stellen möchtest. Zusätzlich kannst du in der Datei Anpassungen vornehmen. So hast du bei den zwei Punkten „theme_color“: „#fff“ und „background_color“: „#fff“ die Möglichkeit, farbliche Anpassungen vorzunehmen, sodass alles zu Deiner Website passt.

Fazit zum Favicon

Ein Favicon bringt zahlreiche Vorteile mit sich und ist heutzutage ein Muss, um das eigene Logo in Adresszeile, Browser Tab, Lesezeichen und Co. darzustellen. Hiermit schaffst du einen Wiedererkennungswert und hilfst Deinen Nutzern dabei, sich einfacher zu orientieren.

In den letzten Jahren haben sich Favicons stark weiterentwickelt und werden längst nicht mehr nur als .ico-Datei und im 16- und 32-Pixel-Format angezeigt. Apple, Android und Co. setzen spezielle Formate und Dateitypen voraus, damit Favicons problemfrei und hochauflösend angezeigt werden.

Kennst Du Dich mit der Erstellung nicht aus und hast Probleme, helfen Favicon Generatoren weiter. Sie erstellen alle erforderlichen Favicon-Typen und zeigen Dir sogar Schritt für Schritt, wie die Einbindung erfolgt.