Créer un site gratuitement    Tutoriels    Html    Mettre en place un favicon
Mes favoris    Ajouter l'article à vos favoris

Mettre en place un favicon

Qu'est-ce qu'un favicon ?

Un favicon est une image située à gauche de l'url de votre site dans la barre d'url de votre navigateur :
Favicon

Vous pouvez le modifier dans le but de "personnaliser votre site" (biensur, ce n'est pas ça qui va faire que votre site va attirer 2'000 visiteurs de plus chaque jour).
On retrouve souvent à la place du favicon le logo du site, son titre ou slogan, la première lettre de son titre ou encore une image qui pourrait le représenter.
Pour ma part, j'ai préféré placer une image en rapport avec le sujet principal du site.

En ajoutant un site à vos favoris, vous le repérerez plus facilement grâce au fait qu'à côté du titre du site, son favicon apparait.

Cette image est souvent au format 16x16 pixels, 32x32 pixels et d'extension ".jpg", ".gif", ".png", ".ico".

Favicons et navigateurs

Comme de nos jours rien n'est parfait, il fallait bien inventer un problème pour notre très cher favicon (un bug en quelque sorte), et bug fut : Internet Explorer !
Internet Explorer, ce bon vieux navigateur n'a pas la même façon de gérer les favicon que les autres navigateur, il lui faut absolument un favicon de nom "favicon.ico" situé à la racine du site alors que les autres navigateurs se contentent de favicon d'extension ".jpg", ".gif", ".png".
Ce qui implique que nous devrons créer deux favicons, un pour Internet Eplorer et un autre pour les autres navigateurs !

Ajouter un favicon à mon site

Nous allons voir ici la procédure pour installer un favicon sur son site en tenant compte des deux navigateurs.

Internet Explorer :
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Autres navigateurs :

S'il s'agit d'une image d'extension .png :
<link rel="icon" type="image/png" href="/favicon.png" />
S'il s'agit d'une image d'extension .gif :
<link rel="icon" type="image/gif" href="/favicon.gif" />
S'il s'agit d'une image d'extension .jpeg 
<link rel="icon" type="image/jpeg" href="/favicon.jpeg" />

Participez au développement du site en laissant vos impressions.

Commentaire/demande concernant l'article :


Recopiez le contenu de cette image :
Code anti-robot  »