Favicon erstellen: So kannst du Favicons generieren und auf deiner Website einbinden!

OnPage SEO Buch

Jede professionell gemachte Homepage sollte über Favicons verfügen. Doch was sind Favicons überhaupt? Favicons sind die kleinen Symbole die neben der Internetadresse in der Adressleiste auftauchen.

Sie erscheinen auch bei geöffneten Tabs neben dem Namen der Website. Ein Favicon peppt die Seite nicht nur auf, sie sieht damit auch um einiges professioneller aus. Es gibt aber noch weitere Vorteile: Wenn man die Seite in seinen Favoriten speichert, dann erscheint das Favicon dort als Symbol. Somit findet man die Seite schneller in seinen Lesezeichen.

Wie aber stellt man ein Favicon her?

Zunächst einmal kann man es in fast jedem Bildbearbeitungsprogramm erstellen. Favicons haben die feste Größe von 16 × 16 oder 32 × 32 Pixel und die Dateiendung “.ico”. Am komfortabelsten sind wohl diverse Online-Generatoren, die das Favicon auch gleich zum Herunterladen mit der entsprechenden Dateiendung anbieten.

Gut hierfür ist die Seite Favicon-generator.de, auf der man das Favicon bereits während der Erstellung als Live-Vorschau sehen kann. Hat man dort ein Favicon erstellt, so drückt man auf Ok und speichert es. Wenn du das mit dem Favicon erstellen nicht richtig hinbekommen solltest oder ein sehr gut aussehendes Favicon für deine Website möchtest, empfehle ich dir eins bei Fiverr zu kaufen.

Caroline Preuss Banner
Caroline Preuss mobile Banner

Wie wird das Favicon nun auf der Homepage angezeigt?

Dazu muss man einfach die Datei umbenennen in “favicon.ico”; es muss genau dieser Dateiname sein, sonst funktioniert es nicht! Diese Datei lädt man dann in das Hauptverzeichnis (Root) seiner Homepage und schon wird es angezeigt.

Generell durchsuchen die modernen Browser automatisch das Hauptverzeichnis einer Internetseite nach der favicon.ico Datei und zeigen sie dann auch ohne Anweisung an. Will man unterschiedliche Favicons für verschiedene Seiten haben, empfiehlt sich die Methode im Quelltext.

Man fügt dazu einfach folgenden Code in seine Seite ein:

<link rel=”shortcut icon” type=”image/x-icon” href=”dateiname.ico”>

Will man für eine andere Seite ein anderes Icon, so ändert man den Code auf dieser Seite entsprechend mit einem anderen Dateinamen.

<link rel=”shortcut icon” type=”image/x-icon” href=”dateiname2.ico”>

Favicons sind für eine Firmenhomepage sehr wichtig. Es stellt sich natürlich die Frage, ob das eigene Firmenlogo als Favicon brauchbar ist oder nicht. Die Tatsache, dass man nur 16 × 16 beziehungsweise 32 × 32 Pixel zur Verfügung hat, engt den Gestaltungsrahmen von Favicons sehr ein.

Das aber auch eine große Vielfalt möglich ist, zeigt die Favicon Sammlung von Favicon-Generator.org. Auf dieser Seite sind viele verschiedene Favicons gesammelt und wer möchte, kann sich dort inspirieren lassen.

Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

21 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.