Astuces blog #1: Changer l'icône de son blog

Il y a de cela quelques semaines, vous avez peut-être remarqué que j'ai modifié le design de mon blog, alléluia
A la base je voulais simplement ajouter des catégories sur la droite du blog afin de le rendre plus complet et plus clair de navigation.

Après de nombreuses heures à essayer de parler le langage HTML, à re-découvrir l'intérêt de Paint, .... j'ai enfin réussi à arriver à ce que je voulais sans m'arracher trop de cheveux jusqu'à ce que tombe sur un HIC !


Quelque chose qui peut paraître sans importance pour certaines mais qui m'a fais psychoter durant pas mal de jours: le petit logo / image à gauche du titre de votre page.

Cette chose s'appelle plus précisément un Flavicon (moment culture bonjour).

Ça peut paraître sans importance, mais dans ma barre de favoris je vois souvent des sites ou des blogs avec de jolies icônes (une cerise par exemple pour le blog de ma Cerise, ....) et ça moi ce n'était pas mon cas, tristesse bonjour.
Etant sur Blogger, j'avais le droit à mon logo orange avec un B, avouons le, peu flatteur et surtout commun à pas mal de blog.
J'ai donc décidé  de me pencher sur la question et d'avoir mon propre petite icône pour le blog !

Donc si toi aussi tu veux avoir une icône pour ton blog qui sors du "B orange" générique de blogger, que tu commences à blogguer ou tout simplement que tu en assez du logo générique , lis la suite c'est hypra simple !

 1- On commence par trouver ou se déroule tout le bric à brac ....


C'est très simple à trouver, une fois qu'on a trifouillé son blog de tous les côtés, moins lorsque l'on prend le template proposé par Blogger.
Il vous suffit d'aller dans la page de garde de Blogger, là ou vous rédiger vos articles mais dans la catégorie (à gauche) "Mise en Page".

Une fois dans cette catégorie, vous apercevez le squelette de votre blog, avec l'emplacement des articles, les catégories, vos réseaux sociaux, ....
Regardez en haut à gauche, le graal est la : l'emplacement "Favicon"
Cliquer sur modifier ......

2- Jusque là, honnêtement, ça va hein c'est maintenant que c'est le plus intéressant.


Après avoir cliqué sur modifier, une petite fenêtre s'ouvre en vous demandant de "configurer la favicon" (mais oui viens chercher bonheurrrrr).

 
Donc ici, on a deux solutions :

- A : la fille concernée qui est prête à passer des plombes à faire son propre icône personnalisée.

Ouvrez un éditeur d'images (Paint est devenu mon meilleur ami ici) , et commencez par faire un carré blanc de 16 pixels sur 16 (dans les champs largeur et hauteur indiquez 16 )
Puis dans ce carré, faites votre dessin : un coeur, un rond, une étoile, ...
Une fois que vous avez un résultat qui vous plait, enregistrez sous : favicon.ico !

En principe je m'arrêterai là, sauf si après plusieurs jours de prise de tête ou mon résultat final ne ressemble à rien, on passe donc à la solution 2:

- B: la fille qui pète un plomb / ou maline qui veut un joli résultat directement!

On profite des sites et communautés spécialisées dans le domaine qui propose gratuitement des icônes tout faites et assez poussées mine de rien.
Mon site favori --> ICI
C'est en anglais mais c'est assez simple, à gauche vous pouvez soit faire une recherche personnalisé, sois voir différentes rubriques "Latest favicons" (derniers favicons ajoutés sur le site) ou encore "Top rated favicons" (favicon les mieux notés).
Vous avez les résultats qui s'affichent à droite, il vous suffit de cliquer sur le favicon en question puis à droite cliquer sur "Download favicon".

Une fois le favicon de votre choix enregistré, revenez sur votre fenêtre "configurer la favicon".
  Cliquer sur parcourir et sélectionner l’icône que vous avez précédemment enregistrée.

N.B: N'oubliez pas de cliquer sur enregistrer, la fenêtre de dialogue va se fermer toute seule et vous pouvez voir que votre flavicon à changé (dans mon cas c'est à présent une plume )
 

3 - On enregistre le tout et on tape dans ses mains.

Alors oui un petit détail futile dont peu font attention mais qui est très rapide et simple à faire.
Une fois votre favicone enregistré n'oublier pas d' "enregistrer la disposition" afin que vos modifications au squelette du blog s'applique bien.
 

Vous voyez à présent lorsque j'ouvre ou que vous ouvrez mon blog, une petite plume s'affiche avant le nom du blog comme je le souhaite.

C'est un peu l'identité mémo du blog, facebook à son "f en bleu" tandis que twitter à son oiseau, Gmail son G ou encore Blogger son b orange.

Rien de plus simple cela prend 5 minutes à tout casser et tout le monde peut le faire !
Plus d'excuses pour ne pas travailler sur le design de votre blog ;)



Sonia Urlittlefeather
Sonia Urlittlefeather

J'espère que cet article te plairas ! N'hésites pas à me le dire en commentaires (normalement ça remarche ... )

15 commentaires:

  1. Wow! Je suis impressionnée, comme toujours en informatique!
    En tout cas j'aime beaucoup le rendu de ton blog et la petite icône!

    RépondreSupprimer
    Réponses
    1. Oh merci beaucoup ma belle, c'est pas mal de compréhension l'informatique mais une fois qu'on comprend la langue ça va mieux ;)

      Supprimer
  2. J'ai essayé, je vois bien la petite icone que j'ai choisi quand je suis sur la page de mise en page mais quand j'enregistre et que je vais sur mon blog, j'ai toujours le petit B de Blogger, j'ai du oublié de faire un truc je sais pas ^^

    RépondreSupprimer
    Réponses
    1. D'après mes souvenirs, je crois que ça peut mettre du temps à être effectif.

      Supprimer
    2. Ah je trouve ça étrange j'ai ré-essayé ce matin sur mon blog, en mettant un noeud ça a marché directement :/
      As tu bien enregistré le modèle après avoir téléchargé ton favicon ?

      Supprimer
    3. J'ai téléchargé une petite image sur le site que tu as donné et ensuite elle s'est mis directement dans mes fichiers, j'ai peut être cliqué sur le mauvais truc sur le site mais je vois pas comment l'enregister du coup ça doit être ça que j'ai loupé :p

      Supprimer
    4. Du coup, j'ai crée le mien sur paint, je sais pas trop si on voit ce que c'est vu la taille mais sur mon ordi je vois toujours le petit B alors que sur celui de mon chéri on voit bien l'icone :p Merci pour les explications, j'en ai profité pour refaire toute la déco de mon blog x)
      Par contre, moi je vois plus ta petit plume alors que tout à l'heure oui.

      Supprimer
    5. La mienne y est toujours, c'est parce que j'ai re-tenté l'expérience avec tes commentaires histoire d'être re-sure-sure , mais la normalement c'est bon !
      Par contre le tiens est hypra jolie avec ton poudrier beige et bleu, c'est toi qui la fais sur Paint ???

      Supprimer
    6. Non non, j'ai une image avec plein plein de dessin d'accessoires beauté, j'ai juste découpé celui qui me plaisait le plus et j'ai redimensionné, j'aurais jamais réussi à faire un truc pareil :p Du coup, tant qu'à tout changer, j'ai voulu tenter de faire le mien de A à Z finalement grâce au site que tu as donné, dans la rubrique pour créer le sien, c'était plutôt facile, il est moins joli mais je suis fière de moi quand même :)

      Supprimer
  3. Il y a très très longtemps, j'ai mis mon petit chat bleu pris dans la liste que proposais Natacha Birds à l'époque. Je vais aller faire un tour sur le lien que tu mets dans ton article =)

    RépondreSupprimer
    Réponses
    1. Ah natacha Birds a crée ses petit favicôn ? Je vais chercher ça de suite! Bisous ma belle ;)

      Supprimer
  4. Finalement j'ai sauté le pas (c'est mon coté aventurière^^) et j'ai changer cette fameuse petite icone.
    Grâce à tes explications, c'était trop facile, sauf que ça a mis quelques jours à se mettre en place sur le blog. Mais j'aime tellement le résultat!
    Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Ah merci Eva, tu viens de me faire ma journée ! C'est très gentil de ta part ! Je modifierai l'article alors pour bien indiqué qu'il faut attendre un peu dans ce cas !
      Ton petit logo noir est trop mignon, ah je suis contente !
      Des bisous ma belle

      Supprimer
  5. Merci !!! J'avais toujours eu la flemme de créer mon logo, il est super le site que tu nous as donné là :)

    RépondreSupprimer
    Réponses
    1. De rien ma belle, contente qu'il ai pu t'aider ! Des bisous ma belle <3

      Supprimer

Merci pour vos petits mots ...