Créer et Ajouter un Favicon

Un Favicon c'est quoi ? C'est cette petite image que l'on retrouve à gauche du nom d'une page web comme ceux-ci :

Dans ce tutoriel je vais vous expliquer comment en créer un, et comment l'intégrer à votre Blog sous Blogger :)

Introduction

Un Favicon est une image en .ico généralement de taille 16 pixels par 16 pixels.
Avec Blogger cette image peut être un .png ou un .jpg, et elle peut être plus grande que 16 pixels par 16 pixels.
Vous pouvez créer une image sous Photoshop ou Gimp, mais elle doit respecter les consignes suivantes :

• Image carrée
• De taille inférieur à 100 ko.

Si vous avez la flemme, ou ne savez pas comment créer une image, vous pouvez prendre une icône sur internet. Veillez seulement à ce que vous ayez bien le droit de l'utiliser !
Il existe beaucoup de sites où vous pourrez trouver des icônes sympas. Deviantart par exemple en propose pas mal.

Créer un Favicon

Pixlr est un éditeur de photos et d'images gratuit en ligne ! Idéal pour ceux qui n'ont pas Photoshop ;)
Je vais vous expliquer comment réaliser ce joli petit Favicon rond avec ce programme.

Tout d'abord allez sur le site Pixlr Editor online, et créez un nouveau document en cliquant sur Créer une nouvelle image :

Donnez un nom à votre image (par exemple Favicon), et définissez en Largeur 50 pixels, et en Hauteur 50 pixels également. De plus, cochez la case Transparent, puis cliquez sur OK :

Voici donc votre image pour l'instant :

Elle est vide. Ces petits carrés gris et blancs représentent le fond transparent de l'image.
Créons la forme ronde. Sélectionnez l'outil Dessin dans la barre d'outils à gauche de l'écran :

Dans la barre d'outils de l'outil dessin, en au haut de l'écran, choisissez la forme ronde, précisez une bordure de 0 pixels, et choisissez la couleur de fond de la forme :

Puis créez un rond en cliquant sur l'image. Restez appuyé sur le clique gauche de la souris pour former le rond :

Pour créer l'initiale, cliquez sur l'outil Texte :

Puis cliquez sur l'image. Tapez l'initiale que vous voulez dans la partie Texte.
Sélectionnez la couleur, la taille et la police du texte, puis cliquez sur OK.
Repositionnez-le pour qu'il soit bien centré sur le rond :

Et voilà ! Il suffit maintenant de sauvegarder votre image.
Cliquez sur Fichier en haut à gauche de la page web, puis sur Enregistrer.
Dans la boîte de dialogue qui apparaît, sélectionnez le Format PNG pour conserver le transparence du fond. Si vous choisissez jpg, la transparence sera perdue. Puis cliquez sur OK et enregistrez l'image sur votre ordinateur.

Intégrer le Favicon sous Blogger

Une fois le Favicon créé il faut l'intégrer sur son blog. Pour cela, cliquez sur Mise en page dans le menu à gauche du tableau de bord :

Cliquez sur Modifier sur le widget Favicon en haut à gauche de l'aperçu de la disposition de votre blog :

La fenêtre suivante s'ouvre :

Cliquez sur Choisissez un fichier, et sélectionnez votre image. Cliquez ensuite sur Enregistrer.
Et voilà ! Vous avez ajouté un Favicon à votre blog !
/!\ Il se peut que le Favicon n’apparaisse que quelque jours après la mise en ligne... Ne me demandez pas pourquoi, mais c'est ce qui m'est arrivé :/