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:

– 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:

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:

HTML Code für animierte GIF-Dateien im Hauptverzeichnis:

HTML Code für PNG-Dateien im Hauptverzeichnis:

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:

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

Werbung

<br />

mehr

Das könnte Dich auch Interessieren:

Ankerpunkte setzen
read more …

Wer Bloggt hier?

über den Autor

Hier erfährst Du mehr über mich:

Profil – Beiträge – Fotos

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.