Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer et Ajouter un Favicon sous Blogger

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

Créer et Ajouter un Favicon sous Blogger

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.

Créer et Ajouter un Favicon sous Blogger

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

Créer et Ajouter un Favicon sous Blogger

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 :

Créer et Ajouter un Favicon sous Blogger

Voici donc votre image pour l'instant :

Créer et Ajouter un Favicon sous Blogger

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 :

Créer et Ajouter un Favicon sous Blogger

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 :

Créer et Ajouter un Favicon sous Blogger

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

Créer et Ajouter un Favicon sous Blogger

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

Créer et Ajouter un Favicon sous Blogger

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 :

Créer et Ajouter un Favicon sous Blogger

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.

Créer et Ajouter un Favicon sous Blogger

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 :

Créer et Ajouter un Favicon sous Blogger

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

Créer et Ajouter un Favicon sous Blogger

La fenêtre suivante s'ouvre :

Créer et Ajouter un Favicon sous Blogger

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é :/

Autres articles

30 commentaires:

  1. Coucou! J'adore ton blog! Etant donné que je viens de commencer le mien, il m'aide vraiment beaucoup pour comprendre comment réussir à le personnaliser! J'adore!!

    RépondreSupprimer
  2. Merci, pour ce tuto super bien expliqué !
    J'ai enfin réussi a créé mon favicon avec ce site très facile à comprendre par rapport à Gimp.

    RépondreSupprimer
  3. Merci pour ce super tuto, J'ai enfin pu créer un favicon qui me plait !!

    RépondreSupprimer
  4. Merci pour le petit Tuto! Ca m'a bien aidé! ;-)

    RépondreSupprimer
  5. Merci beaucoup pour tes tutos !!!

    RépondreSupprimer
  6. Bonsoir, j'ai une question: j'ai changé mon Favicon il y a une semaine environ et il ne s'affiche pas sur google Chrome alors que sur Internet Explorer oui, aurais-tu une solution?

    RépondreSupprimer
    Réponses
    1. Salut Tiphaine,
      Généralement c'est plutôt l'inverse, Internet Explorer pose souvent des problèmes.
      Tu peux essayer de convertir ton favicon.png en favicon.ico, un format plus adapté (Je devrais d'ailleurs le rajouter à l'article).
      Pour cela rien de plus simple :

      - Va sur ce site : http://www.favicon.cc/
      - Clique sur Import Image dans la liste de liens à gauche
      - Choisi ton image et clique sur Upload (l'option Keep dimensions doit être cochée)
      - Descends un peu la page web, et dans la partie Preview (Aperçu), clique sur Download Favicon.

      Tu as maintenant ton favicon au format .ico. Il ne reste plus qu'à l'ajouter à ton blog comme expliqué dans le tutoriel ;)

      Supprimer
  7. Super idée de Tuto! toujours très bien expliqué! Merci beaucoup! :-)

    RépondreSupprimer
  8. SoFrenchy Time25 janvier, 2015

    Bonsoir Catherine.

    Merci beaucoup pour tes tutoriels, ils m'aident vraiment !! Je ne pensais pas pouvoir réaliser ce ce que j'avais en tête mais grâce à toi, en partie, cela se concrétise. J'ai une petite question : peut-on faire un favicon avec une image ou un dessin sous Blogger ? Si oui, comment ? Merci d'avance.
    Bonne soirée.

    RépondreSupprimer
    Réponses
    1. Bonjour Sofrenchy time,
      Si tu as déjà une image tu peux utiliser le site suivant : http://www.favicon.cc/ qui va le convertir en favicon pour toi :)
      Clique sur Import Image dans la liste de liens à gauche, puis choisi ton image et clique sur Upload (l'option Keep dimensions doit être cochée).
      Descends un peu la page web, et dans la partie Preview (Aperçu), clique sur Download Favicon.
      Une fois que tu as le fichier favicon tu n'as plus qu'à l'ajouter au blog comment expliqué dans le tutoriel :)

      Supprimer
    2. SoFrenchy Time31 janvier, 2015

      D'accord, merci beaucoup Catherine.

      Supprimer
  9. Re,
    Comme prévu je bloque! Donc j'ai bien créer l'image et je l'ai même converti au format .ico mais ça ne fonctionne pas !!! Une solution à me proposer stp?

    RépondreSupprimer
    Réponses
    1. Ça peut prendre un peu de temps pour apparaître. Vérifie à nouveau dans quelques jours :)

      Supprimer
    2. Ok merci beaucoup je v attendre alors

      Supprimer
  10. Coucou, tout d'abord merci pour tous tes tutos qui sont géniaux. Alors, moi j’ai un problème : j'ai un favicon qui est déjà de format carré, je l'ai passé sur InstaBox pour en être sûre, puis je l'ai redimensionné sur Paint (pourcentage 50x50). Quand j'essaie de mettre mon favicon sur Blogger, il me met que mon image n'est pas carré... Pourrais-tu m'aider stp ? :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Essaye de changer le format de fichier en .ico :

      - Va sur ce site : http://www.favicon.cc/
      - Cliques sur Import Image dans la liste de liens à gauche
      - Choisis ton image et clique sur Upload (l'option Keep dimensions doit être cochée)
      - Descends un peu la page web, et dans la partie Preview (Aperçu), cliques sur Download Favicon.

      Tu as maintenant ton favicon au format .ico. Il ne reste plus qu'à l'ajouter à ton blog comme expliqué dans le tutoriel ;)
      Attention également à ce que ton ficher ne soit pas trop gros, la limite est d'environ 10kb pour le favicon.

      Supprimer
  11. Merci beaucoup pour ce tuto clair, net et précis !

    RépondreSupprimer
  12. Bonjour Catherine,
    J'ai une petite question non pas sur le Favicon mais sur le texte à côté de celui ci.
    Comment modifier ce qui est écrit ? J'aimerai mettre le titre de mon blog plutôt que son adresse en www.etc
    Merci d'avance
    Coralie

    RépondreSupprimer
    Réponses
    1. Bonjour Coralie,
      Pour cela il faut préciser ce qu'on appel des balises meta. Je pense en faire un tutoriel il y a pas mal de choses et ça peut intéresser du monde :)

      Supprimer
    2. Super !!! J'ai hâte ! Merci !!

      Supprimer
  13. Eh il est chouette ton blog Blogger ! Super tes infos ; elles sont très utiles. Merci

    RépondreSupprimer
  14. Bonsoir,

    Une nouvelle fois merci pour ce tutoriel. Le favicon apparait effectivement après quelques jours et ça donne beaucoup mieux que le favicon par défaut :)

    Petite question en plus: est ce possible de mettre ce même favicon à côté du nom dans le widget introduction/bio qui se trouve dans la barre latérale droite du site http://www.raspberrylipstick.com/?

    Merci d'avance,
    Antoine

    RépondreSupprimer
    Réponses
    1. Oui tu peux l'ajouter l'image à côté du titre du gadget. Il y a plusieurs moyens d'y arriver. Tu peux te baser sur ce tutoriel par exemple : http://ladybirdr.blogspot.com/2014/11/personnaliser-et-ajouter-une-image-aux.html

      Le code du titre de ce gadget est :

      #HTML1 h2 {
      }

      Supprimer
  15. Trop bien expliqué <3 J'ai réussi à le faire et en plus j'ai découvert Pixlr donc une pierre 2 coups, J'ADOOOOOOOOOORE <3

    RépondreSupprimer
  16. Bonjour ! J'ai réussit sauf que quand je peux intégrer le favicon sur mon blog il me mets type de fichier incorrect ?!

    RépondreSupprimer
    Réponses
    1. Bonjour Océane,
      Tu peux essayer de convertir ton favicon.png en favicon.ico, un format plus adapté (Je devrais d'ailleurs le rajouter à l'article).
      Pour cela rien de plus simple :

      - Va sur ce site : http://www.favicon.cc/
      - Clique sur Import Image dans la liste de liens à gauche
      - Choisi ton image et clique sur Upload (l'option Keep dimensions doit être cochée)
      - Descends un peu la page web, et dans la partie Preview (Aperçu), clique sur Download Favicon.

      Tu as maintenant ton favicon au format .ico. Il ne reste plus qu'à l'ajouter à ton blog comme expliqué dans le tutoriel ;)

      Supprimer
  17. Merci pour cet très utile article! :)

    RépondreSupprimer
  18. Impossible de ne pas réussir avec ce niveau de détails !
    Merci Lady Bird

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger