Home / Webdesign + Webpflege / Wie Sie zu Ihrem eigenen Favicon kommen

Wie Sie zu Ihrem eigenen Favicon kommen

mit Keine Kommentare

Favicons sind die kleinen Bildchen, die Sie im Browser neben den Lesezeichen und oben in den Tabs finden. Die Favicons werden in der Adressleiste eines Webbrowsers neben der URL einer Webseite angezeigt. Sie werden auch auf der Registerkarte angezeigt, wenn Sie mehrere Webseiten in einem Browser öffnen. Der Begriff „Favicon“ steht für „Favoriten-Ikon“ und ist eine Kombination aus den englischen Wörtern „favorite“ (Favorit) und „icon“ (Ikon).

Online-Marketing-Informationen gemäss Stand vom 16.1.2023

Favicons

Favicons sind in der Regel eine grafische Darstellung des Logos oder eines anderen markanten Merkmals einer Website und helfen den Benutzern, die Website leichter in einer Reihe von geöffneten Tabs oder in ihren Lesezeichen zu identifizieren. Sie sind normalerweise im Format .ico, können aber auch in anderen Formaten wie .png oder .svg vorliegen.

Um ein Favicon zu erstellen, entwerfen Webdesigner ein kleines, quadratisches Bild, das dann in den HTML-Code der Webseite eingefügt wird. Der Webbrowser liest diesen Code und zeigt das Favicon entsprechend an.

Benötigt man diese Dinger überhaupt? Favicons sind praktisch zum Webdesign-Standard geworden. Sie zeugen nicht nur für die Liebe zum Detail, sondern sind ein kleines Stück Corporate Identity.

Grundlagen Favicons

Favicons sind lediglich 48 × 48 (oder ein mehrfaches davon) Pixel grosse Grafiken, die unter dem Namen favicon.ico gespeichert werden. Moderne Browser erkennen die Favicons nicht nur im ICO-Format, sondern auch PNG oder GIF.


Kundennutzen NewsAbo

Erhalten Sie alle 7 bis 14 Tage aktuelle Insider-Tipps und Tricks sowie frisch entdeckte Online-Tools direkt ins eigene Post­fach. Zudem erhalten Sie Zugriff auf den Mitglieder­bereich mit E-Books rund um das Thema Website!


Wie kommen Sie zu einem Favicon?

Hier gibt es verschiedene Möglichkeiten. Entweder Sie haben bereits eine Grafik, die sich als Favicon eignet oder Sie zeichnen eines. Da Sie jedoch nur wenige Pixel zur Verfügung haben, eignen sich nur sehr Detail-schwache Grafiken.

  • Generator nutzen
    chami.com/html-kit/services/favicon/
    sowie:
    genfavicon.com
    sowie
    favicon-generator.org/editor/
    sowie
    www.xiconeditor.com
  • Kreativität nutzen
    Zeichnen Sie ihr eigenes Favicon. Dazu benötigen Sie nicht mal ein Bildbearbeitungsprogramm. Öffnen Sie in Ihrem Browser den Link degraeve.com/favicon/, wählen Sie jeweils eine Farbe aus und erfinden Sie Ihr eigenes Favicon.
    Genauso geht das mit favicon.cc. Auf dieser Website finden Sie viele Favicons zum Ansehen, die Ihnen Inspiration für eigene Kreationen bieten.
  • Eigenes Bildbearbeitungsprogramm verwenden
    Geht natürlich auch. Zeichnen Sie Ihre Grafik und speichern Sie es im Format .ico.
  • Profi einsetzen
    Wer kein geeignetes Bild hat und keine Lust noch Zeit für die Gestaltung hat, fragt einfach einen Profi. Für Grafiker und Webdesigner sind die Herstellung eines Favicons kein Problem.
  • Google Suchmaschine
    Wenn es für Ihre Webpräsenz ein Favicon gibt, kann dieses in die Google-Suchergebnisse aufgenommen werden. Lesen Sie dazu die Google Richtlinien.
  • Cross-Browser-Kompatibilität
    Es ist wichtig, sicherzustellen, dass Ihr Favicon in verschiedenen Browsern korrekt angezeigt wird. Manche Browser haben spezifische Anforderungen oder unterstützen bestimmte Formate besser.

Wie wird ein Favicon manuell eingebettet?

Befördern Sie das favicon.ico per FTP in das Root Ihres Webservers. Die Anweisung ein Favicon einzubetten kommt in den Header einer jeden Internetdatei. Der Code lautet dafür:
<link rel="shortcut icon" href="favicon.ico">

<link rel="apple-touch-icon" sizes="180x180&quot href="favicon.png">

Favicon mit einem Content-Management-System

Moderne CMS bieten eigene Lösungen, um das Favicon einfach und schnell in das Design zu integrieren.

Fazit

“Favicons sind ein kleiner, aber wichtiger Teil der Online-Präsenz einer Website, der oft übersehen wird. Sie spielen eine wichtige Rolle in der visuellen Identität einer Marke im digitalen Raum.”

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung mit dem Internet. Im Jahr 2001 gründete er das Magazin kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Tools konzentriert. Als Agenturleiter hat er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Darüber hinaus beriet Walser kleine Unternehmen bei ihrem Internetauftritt und spezialisierte sich auf die Pflege und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.