Favicon erstellen und einbinden: So geht’s

Was wie der Name eines Pokémons klingt, ist in Wirklichkeit ein kleines Symbol: Ein sogenanntes Favicon ist eine kleine Grafik, die in der Browserleiste links neben der URL einer Webseite steht. Die Aufgabe von Favicons ist es, für einen besseren Wiedererkennungswert Ihrer Seite zu sorgen. Das Wort Favicon steht dabei für die Bestandteile „favourite“ und „icon“.

Gute Nachrichten für alle, die mit IT wenig am Hut haben: Das Erstellen und Einbinden eines Favicons gelingt in nur wenigen Schritten. Hier erfahren Sie, wie Sie es anstellen.

Favicons werden in der Regel in den Abmessungen von 16x16, 32x32 oder 64x64 Pixel erstellt, wobei das spezifische Format je nach Anwendung und Plattform variieren kann. Übliche Dateiformate für Favicons sind ICO, PNG und GIF. Während ICO als das traditionelle Format gilt, sind PNG und GIF sehr beliebt, da sie Transparenzen und Animationen darstellen können.

Bei der Farbwahl für Ihr Favicon orientieren Sie sich an Ihrer Markenidentität und dem Webdesign. Entscheiden Sie sich für Farben, die harmonisch mit dem restlichen Design Ihrer Webseite interagieren und Ihre Marke wirkungsvoll repräsentieren. Achten Sie auch darauf, dass Ihr Favicon auch in kleiner Größe klar und deutlich erkennbar bleibt.

Wie erstelle ich ein Favicon?

Sie haben es vermutlich schon geahnt: Als Favicon eignet sich besonders Ihr Unternehmenslogo. Wenn Sie dieses ohnehin bereits auf Ihrer Webseite verwenden, können Sie so für einen einheitlichen virtuellen Auftritt sorgen. Doch Vorsicht: Ein Favicon ist ziemlich klein, weshalb sich manche Logos nicht gut konvertieren lassen.

Hat Ihr Logo viele Details, Schattierungen oder andere aufwändige Elemente, ist eine kleine Darstellung eventuell nicht ratsam. Alternativ können Sie daher auch ein einfaches Symbol in den Farben Ihres Corporate Designs verwenden oder Ihr Logo zu diesem Zweck auf ein minimalistisches Design „herunterbrechen“.

Favicon erstellen: Online-Möglichkeiten

Es gibt mittlerweile verschiedene Online-Möglichkeiten, um Favicons zu erstellen. Dafür wandeln Favicon-Generatoren Bilddateien wie PNG, JPEG, JPG oder GIF in eine ICO-Datei um. Die besten Ergebnisse erhalten Sie dabei, wenn Ihre Ausgangsdatei bereits ein quadratisches Format hat.

Wo erscheinen die Favicons?

Favicons erscheinen in der Adresszeile Ihres Webbrowsers neben der URL Ihrer Webseite. Zusätzlich finden Sie es auch auf den Registerkarten Ihres Browsers, in Lesezeichen und im Verlaufsarchiv. Auf Smartphones und Tablets ist das Favicon sogar direkt in den Google-Suchergebnissen sichtbar und dient dort als Blickfang für potenzielle Kundschaft.

Welche Vorteile hat ein Favicon?

Ein Favicon bietet Unternehmen eine Reihe von Vorteilen:

• Verbesserung der Nutzererfahrung: Durch seine Präsenz in der Adressleiste, den Registerkarten und Lesezeichen hilft das Favicon den Nutzenden, sich besser auf Ihrer Seite zu orientieren und sie leichter wiederzufinden.
• Erhöhung der Markensichtbarkeit: Das Favicon ermöglicht es Ihnen, Ihr Unternehmenslogo an einer prominenten Stelle zu platzieren, was zur Erhöhung der Sichtbarkeit Ihrer Marke führt. Jedes Mal, wenn Nutzer und Nutzerinnen das entsprechende Browser-Tab öffnen, sehen sie Ihr Logo und erinnern sich an Ihr Unternehmen.
• Förderung der Markenwiedererkennung: Durch die ständige Präsenz Ihres Logos fördert das Favicon die Wiedererkennung Ihrer Marke und kann dazu beitragen, die Bindung zu Ihren Kunden zu stärken.
• Positiver Einfluss auf die Suchmaschinenoptimierung (SEO): Suchmaschinen wie Google berücksichtigen die Nutzungsfreundlichkeit einer Webseite bei der Bestimmung ihrer Suchrankings.

Wie wichtig sind Favicons für mobile optimierte Webseiten?

Favicons sind für mobile Webseiten von entscheidender Bedeutung. Sie werden als Icons für Verknüpfungen auf dem Homescreen verwendet, wodurch Nutzende eine Website schnell und einfach wiederfinden können. Darüber hinaus verbessern sie die Nutzungsfreundlichkeit auf mobilen Geräten erheblich, indem sie bei den Suchergebnissen auf mobilen Endgeräten angezeigt werden.

Sie tragen zur Wiedererkennung einer Marke bei und helfen den Usern und Userinnen, Ihre Webseite inmitten vieler Registerkarten und Lesezeichen schnell zu identifizieren. Daher können Favicons einen wesentlichen Beitrag zur Verbesserung der mobilen User Experience und zur Stärkung der Markenpräsenz leisten.

Die 6 besten Favicon-Generatoren

Mit Favicon-Generatoren können Sie Favicon-Dateien automatisch erstellen. Wie bereits angedeutet funktionieren die Generatoren am besten mit einfachen Symbolen oder Logos, da bei komplexeren Grafiken durch die Konvertierung Details verloren gehen. Im Folgenden finden Sie eine Übersicht gängiger Favicon-Generatoren:

1. IONOS Favicon Generator

Der IONOS Favicon Generator erstellt alle gängigen Dateiformate für ein Favicon. Mit dem Tool können auch eigene Favicons direkt im Browser gezeichnet werden. Zusätzlich können Sie dort auch direkt die zugehörigen App-Icons für Android, iOS und Windows generieren.

2. favicon.io

Auf favicon.io haben Sie verschiedene Möglichkeiten, ein Favicon zu erstellen. PNG-Dateien lassen sich mit der Funktion „PNG to ICO“ in ein ICO-Format konvertieren. Mit „TEXT to ICO“ können Sie ein Favicon aus Buchstaben erstellen. Sogar Emojis können mit „EMOJI to ICO“ als Favicon eingebunden werden.

Der Code für die Einbindung in Ihre Webseite wird von favicon.io automatisch erstellt. Sie müssen die Favicons im Anschluss also nur in das Hauptverzeichnis Ihrer Webseite laden und den Code in die Header-Datei Ihrer Seite einfügen.

3. Favicon-Genator.org

Auf der Webseite favicon-generator.org können Sie Ihr Logo oder Ihre Grafik einfach hochladen und mit ein paar Klicks in ein Favicon verwandeln. Achten Sie jedoch darauf, das Häkchen bei „Include your favicon.ico in the public gallery“ zu entfernen.

Ihr Favicon wird automatisch in verschiedenen Formaten erstellt. Dazu erhalten Sie auch den Code, mit dem Sie das Favicon in Ihre Webseite einbinden können.

4. Favic-o-matic

Favic-o-matic bietet zwei interessante Möglichkeiten: Bei Option eins können Sie ein Bild oder eine Grafik hochladen und diese in die ICO-Datei konvertieren.

Benötigen Sie mehr Formate, ist die zweite Option passender. Hier werden Favicons für alle üblichen Plattformen (inklusive iOS- und Android-Apps) erstellt. In den erweiterten Einstellungen können Sie dazu bestimmen, welche Favicon-Formate Sie erhalten möchten.

5. Genfavicon

Mit Genfavicon können Sie ein Bild hochladen und es anschließend zuschneiden. Daraufhin wird aus Ihrem gewählten Ausschnitt ein Favicon erstellt. In einem Vorschaufenster können Sie sehen, wie das Favicon-Symbol im Browser aussehen wird. Bei der Erstellung des Favicons können Sie aus folgenden Größen wählen: 16 × 16, 32 × 32, 48 × 48, 64 × 64 und 128 × 128 Pixel.

6. Favicon-Generator als WordPress-Plug-in

Falls Ihre Webseite mit WordPress erstellt wurde, können Sie sich die Sache noch leichter machen, indem Sie ein Favicon-Generator-Plug-in installieren. Unser Tipp: Favicon by RealFaviconGenerator ist eine gute Wahl.

Favicon in HTML einbinden

Wenn Sie nun Ihr Favicon generiert haben, müssen Sie die Datei nur noch in Ihre Webseite einbinden. Dazu können Sie die ICO-Datei einfach unter dem Namen „favicon.ico“ im Hauptverzeichnis Ihrer Domain ablegen. Das funktioniert jedoch nicht in allen Browsern – eine Referenzierung über ein HTML-Element ist daher der sicherste Weg.

Um das Favicon in HTML einzubinden, muss es in das Hauptverzeichnis Ihrer Domain hochgeladen werden. Neben dem ICO-Format können Sie auch GIF-Formate oder PNG-Formate verwenden und mit individuellen Dateinamen versehen.

Dabei muss die Datei „favicon.ico“ nicht im Namen haben. Sie muss jedoch zunächst referenziert werden. Dazu benötigen Sie die folgenden Code-Zeilen, die Sie im Kopfbereich () des HTML-Elements Ihrer Webseite ergänzen.

Welche Code-Zeile Sie einfügen müssen, hängt davon ab, welches Dateiformat Sie verwenden.

Bei einem ICO-Dateiformat sieht der Code wie folgt aus:

<link rel="icon" type="image/vnd.microsoft.icon" href="(GENAUEPFADANGABE/DATEINAME.ico">

Wenn es sich um eine GIF-Datei handelt, setzen Sie stattdessen folgenden Code ein:

<link rel="icon" type="image/gif" href="(GENAUE-PFADANGABE/DATEINAME.gif">

Bei einer PNG-Datei verwenden Sie diese Zeile:

<link rel="icon" type="image/png" href="(GENAUE-PFADANGABE/DATEINAME.png">

Dabei ist es wichtig, dass Sie sowohl den Pfad als auch den Dateinamen korrekt angeben.

Fazit: Favicons verbessern Ihren Markenauftritt

Favicons sorgen dafür, dass Ihre Webseite im Internet sichtbarer ist. Wenn Ihre Seite beispielsweise in Lesezeichenlisten abgespeichert wird, können Sie mit Ihrem Favicon optisch hervorstechen und Ihrer Webseite einen höheren Wiedererkennungswert geben.

Mit einem Favicon-Generator lässt sich dabei leicht aus Ihrem Unternehmenslogo, Symbol oder Foto ein Favicon erstellen. Dieses können Sie anschließend mit den im Artikel dargestellten Möglichkeiten bequem in den HTML-Code Ihrer Seite implementieren.

Titelbild: d3sign / iStock / Getty Images Plus