dimanche 17 juillet 2011

Créer et installer une favicon personnalisée pour son blog Blogger




Dans ce tutoriel, nous allons voir comment installer une favicon pour son blog Blogger
Déjà pour commencer, la favicon est cette icone (favIcon = favourite icon) qui s’affiche dans la barre d’adresse du navigateur à gauche de l’URL, quand vous visitez certains sites web.


Qu'est ce qu'une favicon ?

Une favicon est tout simplement une image de dimensions et de formats spéciaux, généralement 16x16 ou 32x32 pour la taille et png, gif, .. pour le format.
Cependant, pour être compatible avec IE, il faut utiliser une image au format ico et de dimensions 16x16.

C’est le moment pour avoir votre propre favicon !


Créer une favicon personnalisée pour son blog

Pour créer une favicon, la méthode la plus simple est de se baser sur une image existante, la convertir (la formaliser dans les bons dimensions et le bon format) ensuite en favicon à l’aide d’un générateur de favicon. Plusieurs générateurs existent, il y a ceux qui permettent de générer une favicon à partir d'une image de base, tel que favicon.htmlkit que je vais utiliser dans ce tutoriel ou l'outil favicon generator de dynamic drive, et ceux qui permettent en plus de ça de dessiner carrément une icone (exemple : favicon.cc)



Exemple :

Mon image de base est la suivante :

Je vais la convertir en favicon en utilisant un des générateurs existants sur le web : favicon.htmlkit
Il suffit maintenant de choisir l’image de base, l’uploader et cliquer sur le bouton de conversion. 

Après quelques secondes d’attente, la favicon est générée. Vous n’avez qu’à télécharger le dossier compressé contenant deux types de favicons, une au format ico standard et une auu format gif (animée), c’est la 1ère qui nous intéresse.

Vous pouvez aussi personnaliser le package (et éventuellement la favicon) en cliquant sur Customize :


Installer la favicon sur votre blog

Maintenant que la favicon est prête à être installée, il suffit de se rendre sur votre tableau de bord, onglet Présentation > Eléments de la page :



de choisir ensuite la favicon déjà générée :
Et le résultat :

Vous pouvez, bien entendu modifier la favicon, comme mieux vous semble :

 
Voilà, j'espère que ce tutoriel vous a été utile !

Partagez cet article sur vos réseaux sociaux :



Recevez les nouveautés par email

5 commentaires:

Gite Périgord Noir a dit…

Je ne connaissais pas du tout cette méthode, qui a l'air rapide et efficace. JE vais la tester pour voir si cela fonctionne parfaitement et pour me faire une idée dessus.

Commentaire de blog dofollow a dit…

Fait à l'instant sur mon blog :)
c'est plus personnel que le vieux B sur fond orange quand même...

Nawras a dit…

Oui :)

Portail économie a dit…

Merci pour cette petite astuce bien pratique ! C'est clair que ça fait une petite touche en plus qui personnalise son blog. Sinon j'aime bien ton design et les petits plugins que tu as ajouté ;)

sanji1400 a dit…

merci pour l'article :)

Sélectionnez les signes à côté du smiley à insérer dans votre commentaire

:)) ;)) ;;) :X :(( =(( :-o :-* :| :)] :-t
b-( :-L :-/ o_O :D ;) :p :) :( 8-) ^^

Enregistrer un commentaire

Related Posts with Thumbnails