Favicons sind die kleinen 16×16 Pixel großen Symbole, die neben deiner URL im Browserfenster auftauchen. Auch wenn du eine Webseite in deinen Lesezeichen speicherst, oder wie ich in der Lesezeichen-Symbolleiste in Firefox, findest du die Favicon-Icons wieder. So kannst du eine Webseite schnell wiederfinden.

1. Und wie erstellt du dein Favicon?

Am besten verwendest du dein Webseiten-Logo als Favicon. Doch bei einer so kleinen Größe (16×16 Pixel), ist das leider nicht immer möglich. Dann suchst du am besten ein einfaches Symbol in den Farben deiner Webseite, oder verwendest deine Initalien. Erstelle dein Symbol erst als .jpg oder .png Datei.

Jetzt gehst du auf die Webseite eines kostenlosen Favicon-Generators. Zum Beispiel: www.favicon-generator.de oder www.favicon-maker.de.

Favicon-Generator

Hier kannst du dein Favicon online generieren.

Dein Favicon mit der Dateiendung .ico kannst du dir dann als gezippte Datei herunterladen. Du kannst dir sogar ein animiertes Favicon-Icon erstellen, wenn du das möchtest.

Lade die favicon.ico Datei in das Hauptverzeichnis deiner Webseite auf deinen Server hoch.

2. Die Favicon-Datei im Head-Bereich deiner Webseite aufrufen

Als letzten Schritt muss du lediglich noch einen Code-Schnipsel in den Head-Bereich deiner Webseite einfügen.

Wenn du einen WordPress-Blog hast, öffne deine header.php Datei in deinem Theme-Ordner (wp-content/themes/DeinThemeName/header.php). Füge folgenden Code in den Head-Bereich ein:

[php]
<head>
<link rel="shortcut icon" href="<?php bloginfo(‘url’); ?>/favicon.ico" type="image/x-icon" />
</head>
[/php]

Auf einer statischen Webseite fügst du folgenden Code in den Head-Bereich deiner Seiten ein:

[php]
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>
[/php]

Fertig, beim nächsten Aufruf deiner Webseite sollte dein Favicon-Icon zu sehen sein. Falls nicht, versuche doch einmal die Cookies in deinen Browser zu löschen. Dann klappt es bestimmt!

Wenn du Fragen oder Anregungen an mich hast, schreib doch einfach unten einen Kommentar. Ich freue mich über dein Feedback!