![]()
|
||
InhaltÜberarbeiteter Artikel – Was sind Favicons eigentlich? – – Möglichkeiten der Einbindung – – ICO Format – – externe Verlinkung – – GIF & PNG einbinden – – Favicon in WordPress & Co. – – Tipp – – Favicon Generatoren – – Abschluss – – Wer Bloggt hier – – Kommentare – (springt beim betrachten dieser Seite im hochformat, zur Seiten / Blog-Navigation) Vorwort erklären wie man Favicons (favourite icons) richtig einbindet. Ich versuche alles so verständlich wie möglich zu erklären, Viel Spaß beim ausprobieren Was sind Favicons eigentlich?kurze Erklärung
Favicon (umgangssprachlich), engl. favourite icon (= Favorit, Bildzeichen) (Fast alle neuartigen Browser unterstützen zudem die Bildformate GIF & PNG, Möglichkeiten der EinbindungUm ein Favicon einzubinden, gibt es im Grunde 2 Möglichkeiten: – 01. Einbindung über die favicon.ico im root-Verzeichnis Deiner Webseite Achtung, Lade Deine jeweilige favicon.ico in das Hauptverzeichnis Deiner Webseite hoch ICO FormatMöglichkeit 01: In der Standardversion für das ICO Format wird folgender HTML Code <head> … <link rel=“shortcut icon“ href=“favicon.ico“ type=“image/x-icon“ /> … </head> Externe VerlinkungMöglichkeit 02: Befindet sich das Favicon nicht im Hauptverzeichnis, <head> … <link rel=“icon“ href=“http://www.Deine-Webseite.de/Dein_Ordner/favicon.ico“ type=“image/x-icon“ /> … </head> Achtung: Lege dazu einfach einen neuen Ordner in Deinem Hauptverzeichnis an, in dem Du dann anschließend Deine verschiedenen Favicons ablegst und diese dementsprechend auf jeder einzelnen Unterseite verlinkst. Den Aufbau diesbezüglich, kannst Du dem oben abgebildeten HTML Code entnehmen. GIF & PNG einbindenFür die Dateitypen GIF & PNG stehen jeweils ebenfalls verschiedene Codes zur Verfügung, <head> … <link rel=“icon“ type=“image/gif“ href=“favicon.gif“ /> … </head> HTML Code für animierte GIF-Dateien im Hauptverzeichnis: <head> … <link rel=“icon“ type=“image/gif“ href=“favicon_ani.gif“ /> … </head> HTML Code für PNG-Dateien im Hauptverzeichnis: <head> … <link rel=“icon“ type=“image/png“ href=“favicon.png“ /> … </head> Tipp: Du kannst die GIF & PNG – Dateien auch wie bei externe Verlinkung schon beschrieben wurde, einbinden. Favicon in WordPress & Co.Um die Dateien favicon.ico oder favicon_ani.gif in WordPress einzubinden, <head> … <link rel=”shortcut icon” href=”<?php bloginfo(’url’); ?>/favicon.ico” type=”image/x-icon” /> … </head> HTML Code für favicon_ani.gif: <head> … <link rel=”icon” href=”<?php bloginfo(’url’); ?>/animated_favicon.gif” type=”image/gif” /> … </head> Nun sollte das Favicon angezeigt werden. Diese Vorgehensweise, ist auch bei Drupal, Joomla oder Magento Anwendbar. Tipp
Bespiel: <head> … <link rel=“icon“ type=“image/x-icon“ href=“http://www.Deine-Webseite.de/favicon.ico“ /> <link rel=“shortcut icon“ type=“image/x-icon“ href=“img/favicon.ico“ /> <link type=“image/x-icon“ href=“img/favicon.ico“ /> … </head> Favicon Generatoren
AbschlussIch hoffe das Dir dieses kleine Tutorial weiterhelfen konnte. Anzeige
mehrAnkerpunkte setzen |
||
Wer Bloggt hier? |
Jetzt Bist Du gefragt …
Wie hat Dir dieser Artikel gefallen?
Hinterlasse Deine Spuren.
Artikel wie diese, leben von Kommentaren, Lob & Kritik.
Hast Du vielleicht Verbesserungsvorschläge?
Sag uns Deine Meinung, Teile oder Like uns.
Wir würden uns freuen,
wenn auch Du Dich hier verewigen magst.