32
Créer et installer un favicon sur son site internet
J’ai reçu un mail d’un lecteur de WonkaStudio qui m’invitait à incorporer de toute urgence un favicon sur wks.fr, car en effet il n’y en a pas. Je me suis demandé alors l’utilité d’un tel gadget… La réponde m’est venue tout simplement en regardant mes marques pages, les pages qui étaient dotées d’un favicon me sautaient presque aux yeux, et les autres étaient beaucoup moins visibles. Le constat est encore pire car certaines pages ne portant pas le nom du site devenaient alors non identifiables, donc inutiles.
Je vous propose donc un article complet sur les icônes des sites Internet, en quatre grand points :
- Qu’est ce qu’un favicon ?
- Quelques exemples de favicons
- Comment créer son favicon
- Comment appliquer son favicon à son site Internet.
Qu’est ce qu’un favicon ? Définition wikipedia
Un ou une favicon est une icône mise à disposition par un site web pour enjoliver, en particulier dans les navigateurs web, les endroits où ce site est mentionné. Cette icône pourra ainsi être utilisée dans la barre d’adresse ou de titre, les favoris (le terme est d’ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis.
Le nom vient du fait que ce concept a commencé à être utilisé avec le navigateur Internet Explorer de Microsoft, où il fallait utiliser un fichier /favicon.ico placé à la racine du site.
Elémentaire non ? En tout cas, cette petite image vous rendra de grands services et vous pouvez être sûr d’optimiser ainsi la fidélisation des internautes via les marques pages !
Quelques exemples de favicons
Sources direct sur internet pour visualiser des favicons : http://www.deltatangobravo.com/archive/2004/march/favourite
Comment créer son favicon
Un favicon c’est une simple image standardisée par son format (png, gif) et par sa dimension 16x16 pixels ou 32x32 (généralement), pour créer un favicon il suffit donc de créer avec Photoshop une image de cette taille.
Je vais créer le favicon pour wks, je vais donc créer un fichier de 32 pixels de côtés que je vais essayer de rendre le plus lisible possible.
Voici mon image :
Vous pouvez également utiliser cet outil en ligne pour créer à partir de n’importe quelle de vos images un favicon : http://www.genfavicon.com/ Mais attention, l’icône affiché le plus souvent dans le navigateur est de 16 pixels de côtés, du coup l’intérieur de mon image en cette taille sera impossible à lire. Il faut la retravailler pour qu’elle soit accessible à la lecture facilement.
Avec cette seconde image je suis sûr d’être lu, même en petite dimension.
Comment appliquer son favicon à son site Internet ?
Alors là, rien de plus, il vous suffit d’ajouter cette ligne entre les balises HTML
de votre page.
<link rel="icon" type="image/png" href="favicon.png" />
Dans le cas où votre fichier est une image PNG, n’oubliez pas d’uploader votre fichier graphique à la racine de votre site internet.
Attention il vous faudra placer cette ligne de code sur toutes les pages concernées par la présence de ce favicon.
Bonne chance à tous pour la réalisation de votre favicon, si vous avez des questions n’hésitez pas à utiliser le forum ci-dessous. Réponse assurée 
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 16 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
28 novembre 2008 16:37, par filou
Bonjour,
Et les lignes seraient donc :
<link rel="shortcut icon" type="image/x-icon" href="http://www.monsite.org/favicon.ico">Les différentes valeurs de l’attribut type sont :
- image/png pour les images au format PNG,
- image/jpeg pour les images au format JPEG,
- image/gif pour les images au format GIF,
- image/x-icon pour les images au format icône
Et par exemple pour un png :
<link rel="shortcut icon" type="image/png" href="http://www.monsite.org/favicon.png">Voili
Répondre
-
-
28 novembre 2008 20:16, par Filou
Pas de quoi, mais je pense que tu as oublié de le mettre dans la fin du tut
Répondre-
29 novembre 2008 15:19, par Wonka
Ah oui j’avais pas vu, en fait je n’avais pas oublié la ligne de code, mais comme il s’agit de HTML elle n’apparaissait pas à l’écran ! Avec une petite retouche tout est rentré dans l’ordre. Merci à toi pour ces message et ta vigilance.
Répondre-
5 décembre 2008 17:42, par Filou
Pas de quoi !
Par contre, tu as fait un joli Favicon, mais je ne le vois pas dans ma barre d’adresse !!
Répondre-
6 décembre 2008 13:31, par Wonka
ah je viens juste d’y penser grace à ton commentaire, j’ai ajoute la favicon sur la page accueil mais pas sur les pages intérieurs ! Super malin de ma part, je corrige cela au plus vite
Répondre
-
-
-
-
-
1er décembre 2008 10:38
bonjour , ya t’il un moyen de ne rentrée qu’une ligne de code ? ( en passant par la feuille de style par exemple ) pour que le favicon sois plus facilement applicable et modifiable
Répondre-
1er décembre 2008 11:13
http://www.favicon.cc/ ce site est super sympa pour creer des favicon animé simplement tout en etant sur de la lisibilité avec un affichage en temps réelle
Répondre -
1er décembre 2008 16:30, par Wonka
Bah tu dois ajouter qu’une seul ligne de code, non pas dans le css mais dans le header des pages !
Répondre
-
-
18 janvier 2010 14:36, par nicolas
Bonjour, Tout d’abord merci pour ce tuto (et tous les autres) mais juste une constatation, en fait tout fonctionne parfaitement sous firefox mais sous IE la favicon n’apparaît pas... Une solution ?
Merci d’avance.
Répondre -
7 juin 2010 10:47, par olivier026
bonjour déjà bravo pour votre site.Moi j’ai une question par rapport au favicon qui s’affiche très bien sous tout les navigateur sauf je le donne en mille ..... IE est ce normal que les 3/4 des favicon ne marche pas sous IE ??
Répondre-
29 juin 2011 23:18, par Bibiche
En fait, sous IE les favicons n’apparraissent que si le site fait parti des favoris.... j’ai lu ça quelque part, dans un livre, mais je sais pas pourquoi...
Répondre
-
-
7 novembre 2010 21:36, par Yann
Merci, j’ai enfin réussi a personnalisé mon favicon, après quelques heures de test... lol
Répondre
