Que vous soyez un blogueur fou adepte des badges et autres widgets dont les sidebars n’en peuvent plus de déborder de plugins indispensables ou non ou alors juste un blogueur soucieux du moindre détail et qui ne laisse rien au hasard, Vous serez obligé de passer par la : la personnalisation de votre favicon.
Alors le Favicon c’est quoi ?
C’est cette petite icône (16×16 pixels) qui traîne à gauche de la barre d’adresse de votre navigateur, par défaut c’est pas très jojo, mais rapidement ça peut devenir votre dernière fierté en matière de personnalisation.
Quelques explications…
Le format des icônes dépend de votre navigateur. Un seul format est supporté par tous, c’est le .ico. Pour les autres navigateurs un peu plus compréhensifs, vous pouvez utilisez les formats d’images les plus courants : .gif, .jpg, .png, .bmp, .mng, rappelons que pour internet explorer le favicon ne servira qu’a illustrer vos favoris, une raison de plus de passer à firefox !
Comment obtenir le favicon de vos rêves ? Plusieurs solutions s’offrent à vous :
- La solution “home made” : faites vous même vos favicons ! Vous êtes un gourou de photoshop, The Gimp ne renferme plus aucuns secrets pour vous ! Très bien alors lancez vous, rien de plus facile, vous dessinez votre favicon et vous l’enregistrez dans un des formats cités plus haut en n’oubliant pas de respecter les dimensions 16×16 pixels ou 32×32 pixels (sauf pour IE bien sur).
- La solution du générateur : Nombres de sites internet proposent des générateurs plus ou moins performant vous permettant de changer une image stockée sur votre disque dur en favicon, rapide et pratique si les logiciels de dessin vous font encore un peu peur, retrouvez à la fin de cet articles une listes de générateurs de favicon.
- La solution de facilité : Télécharger votre favicon depuis une banque de favicon, un peu moins originale, mais au combien plus simple pour l’utilisateur lambda, ces sites proposent en libre téléchargement plusieurs types de favicons il ne vous reste plus qu’a choisir.
Maintenant que vous avez votre favicon, il faut le mettre en place, la encore rien de plus simple, uploadez votre favicon à la racine de votre blogue/site et ensuite la manipulation se passe dans l’en-tête de votre blogue/site entre les balises <head> et </head>.
Le code à insérer n’est pas des plus complexe en voici un exemple :
<link rel=”icon” type=”image/png” href=”/favicon.png” />
Remarquez le type qui contient le type ou Mime Type de l’image. Voici les types que vous pouvez utiliser pour les 4 classiques :
- image/png: image PNG.
- image/gif: image GIF.
- image/jpeg: image JPEG.
- image/x-icon: image de type icon, attention ce format n’est pas un format standard.
Le cas internet explorer et le non respect des standards :
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />
Cette fois le type utilisé est shortcut icon à la place de icon et l’image doit obligatoirement être au format .ico
Voila pour une utilisation “normale” du favicon, mais on peut facilement obtenir un résultat un peu plus “sexy” avec les navigateurs modernes comme par exemple un favicon animé, en utilisant une image de type .mng. Le type “mng” c’est comme le .gif mais pour les png.
Dans ce cas le code serait :
<link rel=”icon” href=”images/favicon.mng” type=”video/x-mng” />
Par contre, ça ne marchera pas sous internet explorer qui affichera le favicon par defaut, pour avoir un beau favicon sous tous les navigateurs même internet explorer il faut se casser un peu plus le trognon…
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />
<link rel=”icon” type=”video/x-mng” href=”/favicon.mng” />
En rajoutant après le lien pour internet explorer le lien vers la version animée vous aurez un favicon pour chaques types de navigateurs. IE va prendre en compte ce qu’il comprend, la première ligne et firefox lui comprend tout mais va sélectionner la version animée.
Quelques liens utiles :
Les générateurs de favicon :
Des favicons à télécharger :
- Favourite Favicons une collection mondiale des plus beaux favicons
- drapeaux des drapeaux en guise de favicon
- Alphabet l’alphabet alphanumérique au format favicon
- Favicon en vrac il y a de tout, faites votre marché
Quelques articles sur le sujet :
- articles de smashingmagazine sur le sujet, un autre ici et encore un la
Aller, à plus !
Excellent, va falloir que je pense a ajouter ça, même si c’est vieux comme le monde on y pense pas souvent =)
PS : fu**ing IE
afk miam
Commentaire par St3pH — 9 octobre 2007 @ 13:05
Bravo pour cet excellent article ! Perso, je suis complètement “favicons addicted”, c’est avec ça que je m’y retrouve dans mes marque-pages (avec + de 5000 liens, c’est pas du luxe !!). Du coup, si un site que je bookmarke n’en a pas, je lui en crée un illico (MSPaint + extension “Favicon Picker” pour Firefox => http://extensions.geckozone.org/FaviconPicker)
@+
Commentaire par Gabuzo38 — 9 octobre 2007 @ 14:19
Attention, ça ne fonctionne pas si bien que cela. J’ai pu créer un favicone très facilement et il s’est bien affiché. Ensuite j’ai voulu changer de design et depuis plus rien ne fonctionne. Choisissez dès le début la bonne image qui vous servira de favicone.
Commentaire par coco — 9 octobre 2007 @ 16:33
@ St3ph : c’est clair on le zappe souvent, je viens juste de rajouter le mien :d
@ Gabuzo : avec 5000 favoris tu dois faire des veillles de 6 heures par jour ^^
@ coco: As-tu bien remis ton le lien de ton favicon entre les balises
/ de ton nouveau design ?Commentaire par fab — 9 octobre 2007 @ 16:57
J’avais oublié ce détail…Allez hop, au boulo !
Commentaire par stagueve — 9 octobre 2007 @ 23:26
Ah oue trop bien il fo ke je fasse le mien aussi
Commentaire par djsearch — 12 octobre 2007 @ 16:06
[...] plus rapidement dans mes bookmarks - le favicon! et grâce à l’explication de Mistafab, je l’ai créé en un tour de main ou clic de [...]
Ping par Libellulôbar… » Favicon Magnets — 19 octobre 2007 @ 17:16
Pas mal ton billet va falloir que je m’y mette aussi
Commentaire par Gabriel — 19 novembre 2007 @ 14:03
@ gabriel : Et oui surtout que c’est rapide et facile à faire !
Commentaire par fab — 19 novembre 2007 @ 14:07
[...] Pour plus de détails concernant l’installation de votre Favicon sur votre blog, je vous laisse avec un billet de mon ami Fabien Thomas sur ce sujet ici. [...]
Ping par Sickoner Blog » Favicon sur votre Iphone — 22 janvier 2008 @ 12:29