Favicon einbinden

17:43Uhr

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

– | Mobile-Navigation | –
(springt beim betrachten dieser Seite im hochformat, zur Seiten / Blog-Navigation)

Vorwort

Heute möchte ich dem Einen oder Anderen unter Euch,
erklären wie man Favicons (favourite icons) richtig einbindet.

Ich versuche alles so verständlich wie möglich zu erklären,
sollten dennoch Verständnisprobleme oder Fragen entstehen,
so helfe ich gerne weiter.

Viel Spaß beim ausprobieren


Was sind Favicons eigentlich?

kurze Erklärung

… kann man das essen?

Favicon (umgangssprachlich), engl. favourite icon (= Favorit, Bildzeichen)
sind kleine 16×16 oder 32×32 Pixel große Bildchen,
die in der Adressleiste des Browsers oder in den Lesezeichen angezeigt werden
um somit einen Wiedererkennungswert für die eigene Webseite zu schaffen.

(Fast alle neuartigen Browser unterstützen zudem die Bildformate GIF & PNG,
wodurch sogar kleine animierte Favicons möglich sind
)



Inhaltsverzeichnis

Möglichkeiten der Einbindung

Um ein Favicon einzubinden, gibt es im Grunde 2 Möglichkeiten:
(Für GIF & PNG stehen ebenfalls verschiedene Codes zur Verfügung,
dazu aber später mehr
)

– 01. Einbindung über die favicon.ico im root-Verzeichnis Deiner Webseite
– 02. Einbindung mittels Tags im <head>…</head>-Bereich Deiner Webseite

Achtung,
folgende Vorgehensweisen zur Einbindung in Deine Webseite
und für eine erfolgreiche Darstellung von Favicons sind zu beachten:

Lade Deine jeweilige favicon.ico in das Hauptverzeichnis Deiner Webseite hoch
und beachte dabei die eventuelle Groß-/Kleinschreibung.
Solltest Du XHTML statt HTML anwenden,
so muss am Ende des Tags ein abschließender back-slash ( / ) hinzugefügt werden,
da es sich hierbei um ein leeres XML-Element handelt.
(ist jedoch in allen Beispielen hier schon XHTML-Komform)



Inhaltsverzeichnis

ICO Format

Möglichkeit 01:

In der Standardversion für das ICO Format wird folgender HTML Code
im Head-bereich der Webseite eingefügt:


<head>

<link rel=“shortcut icon“ href=“favicon.ico“ type=“image/x-icon“ />

</head>





Inhaltsverzeichnis

Externe Verlinkung

Möglichkeit 02:

Befindet sich das Favicon nicht im Hauptverzeichnis,
oder Du möchtest beispielsweise das auf jeder Unterseite
ein anderes Favicon angezeigt wird,
so benutze bitte den folgenden HTML Code für eine externe Verlinkung:


<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.




Inhaltsverzeichnis

GIF & PNG einbinden

Für die Dateitypen GIF & PNG stehen jeweils ebenfalls verschiedene Codes zur Verfügung,
die abgewandelt von der Standardtversion auf das jeweilige Bildformat angewandt werden
und hier für ein Favicon im Hauptverzeichnis gelten und dementsprechend im Head-Bereich eingefügt werden:

HTML Code für GIF-Dateien im Hauptverzeichnis:



<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.



Inhaltsverzeichnis

Favicon in WordPress & Co.

Um die Dateien favicon.ico oder favicon_ani.gif in WordPress einzubinden,
werden diese in das Hauptverzeichnis des WordPress – Systems kopiert.
Dazu öffnest Du die header.php im Template Verzeichnis
(…/wp-content/themes/Dein-Template/…)
und fügst (getrennt jeweils für die herkömmliche oder animierte Version) folgende Codes,
in den Head-Bereich ein und lädst diese anschließend wieder hoch.

Achtung:
(Du kannst diese Änderung auch im Adminbereich des WordPress – Systems online vornehmen.
Eine vorherige Sicherung der Original header.php sollte dabei selbstverständlich sein!
)


HTML Code für Favicon Ico:



<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.
Eigentlich funktioniert der oben genannte HTML Code bei allen CMS-Systemen,
so dass es hier wenig zu beachten gibt.



Inhaltsverzeichnis

Tipp


Um die Anzeige in allen Browsern zu gewährleisten,
sollte man ein Favicon auf mehrere Arten einbinden.

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>





Inhaltsverzeichnis

Favicon Generatoren


Hier habe ich mal Google nach Favicon Generatoren gefragt:
Klick mich




Inhaltsverzeichnis

Abschluss

Ich hoffe das Dir dieses kleine Tutorial weiterhelfen konnte.
Es werden weitere Tutorials in dieser Richtung folgen.
Also „klick“ demnächst mal wieder vorbei
Du kannst auch einfach unseren RSS-Feed mitnehmen,
oder den Newsletter abonnieren
so bleibst Du immer „Up 2 Date“



Inhaltsverzeichnis

Anzeige


Werbung




mehr

Das könnte Dich auch Interessieren:

Ankerpunkte setzen
Ankerpunkt02read more …

Wer Bloggt hier?

über den Autor
Aheruion Hier erfährst Du mehr über mich:

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.

Leave a Reply to Anonymous Cancel Reply