Freitag

Favicon in statische HTML-Seite einbinden

Wie binde ich ein Favicon in eine statische HTML-Seite ein?

Eine Lupe vergroessert ein Favicon vom Seniorencoach
Wie Du ein Favicon in eine statische HTML-Seite einbindest, erfährst Du in dieser kleinen Anleitung.

Als erstes kannst Du dir hier mit dem Favicon-Generator dein eigenes Favicon erstellen und speicherst es auf deinem Computer. Am einfachsten nennst Du es favicon.ico und lädst es danach mit einem FTP-Programm auf deinen Webspace in das Verzeichnis, in dem Du deine anderen Bilder auch hast.

Anschließend öffnest Du die index.html deiner Website mit einem Web-Editor, z.B. dem KompoZer, und lässt dir den Quelltext anzeigen. Oben zwischen den 'head'-Tags, da sollten auch deine Keywords und die Description sein, fügst Du nach deinen meta-tags folgenden Codeschnipsel ein:

link rel="icon" href="http://deine-Domain/dein-bilder-verzeichnis/favicon.ico"
Am Anfang des Codes ein '<' und am Ende ein '/>' einfügen nicht vergessen!

Wo 'deine-Domain' steht, fügst Du den Namen deiner Domain, mit oder ohne www., ein. Wo 'dein-bilder-verzeichnis' steht, fügst Du dein Bilder-Verzeichnis, wo deine Bilder auf dem Webspace liegen, ein. Dein Favicon kann natürlich auch anders heißen, ist aber nicht so praktisch. Achte auf die korrekte Zeichenfolge und speichere das Dokument danach ;-)

Jetzt kannst Du die index.html auf deinen Webspace laden, wenn das nicht mit deinem Web-Editor geht, kannst Du das auch alternativ mit dem klasse FTP-Programm, es heißt Filezilla, tun.

Darauffolgend kannst Du im Browser zur Kontrolle deine Website aufrufen, einen Rechtsklick darauf machen und das Menü 'Seiteninformationen anzeigen' wählen. Dann gehst Du oben auf den Reiter 'Medien', da sollte dein Favicon.ico angezeigt werden, wenn alles richtig gemacht wurde.

Im Browser kann es eine Weile dauern bis es sichtbar wird, das hängt wahrscheinlich mit dem Cache zusammen. Im Firefox-Browser kannst Du noch folgendes ausprobieren: Ruf deine Website auf, klicke auf 'Aktuelle Seite neu laden'. Hilft das nicht, kannst Du oben unter 'Extras' die 'Neueste Chronik löschen...', dann sollte das Favicon sichtbar sein.

___________________________
Das könnte Sie auch interessieren:

1. Dein eigenes Favicon erstellen

2. Favicon in Word-Press einbinden

3. Favicon in Joomla-CMS einbinden


Keine Kommentare:

Kommentar veröffentlichen