BlogTuto

Tuto pour blog et assistance blogueur. Dépannage des blogueurs, passage en mode avancé accompagné, relooking blog, bannière pour blog

Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :

http://www.blogtuto.org/

dimanche 06 juillet

Favicon : insérer un logo dans l'adresse URL de votre blog

Peut-être avez-vous remarqué que certains sites ou blogs, comme ici sur BlogTuto, ont sur leur adresse dans la barre de navigation un petit logo à la place de celui de leur hébergeur, inutile certes, mais ô combien mimi!!!.

Grâce à Mattchry ce tuto fonctionne enfin sous IE et sous firefox! Youpi!

1. Il vous faudra avoir une version miniature de votre logo de 16 x 16 pixels ou 32 x 32 pixels maximum. Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint qui se trouve dans Démarrer - Tous les programmes - Accessoires pour diminuer la taille de votre image, en prenant soin de la sauvegarder sous un autre document pour ne pas perdre votre fichier original. Sinon, vous pouvez, utiliser des outils offerts en ligne et spécialement conçus pour créer ce genre d'icône. Photofiltre est une bonne alternative...

2. Rendez-vous sur le site HTML Kit, à la page FavIcon from PICS. Suivez la procédure pour générer votre icône. C'est-à-dire, parcourez votre disque dur pour sélectionner votre image, puis cliquez sur Generate FavIcon.ico. L'outil en ligne se chargera d'en créer une version "icône". Vous aurez le choix entre une icône fixe (normale) et une icône animée à télécharger sur votre ordinateur.

3. Une fois votre icône sauvegardée dans votre ordinateur, (pour canalblog) chargez-la sur votre blog dans un message en choisissant de charger un fichier en cliquant sur cette image Image_1 . Une fois chargée cliquez sur Image_3 et prenez l'adresse qui va se présenter comme ceci :

http://p5.storage.canalblog.com/56/97/249516/24175599.ico

C'est cette adresse (en rose) dont vous allez avoir besoin ensuite. (inutile d'enregistrer le billet où vous avez chargé l'icône)

4. À partir d'ici, il vous faut absolument être en mode avancé pour continuer... Vous êtes toujours là? Donc, cliquez sur Apparence, puis Éditer les fichiers de ce modèle. Ensuite, pour chacune des pages accessibles dans le menu déroulant (Page d'accueil, Archives, Index des archives, Page d'un message et Profil d'un auteur), SAUF la page Feuille de style générale, avant la balise </head> :

Insérez la ligne suivante:
<link rel="shortcut icon"http://votre adresse.ico" type="image/x-icon"/>
<link rel="icon" href="http://votre adresse.ico" type="image/x-icon"/>

7. Maintenant Valider pour chacune des insertions dans vos pages et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.

Ce tuto vous est offert par Nel. Merci à elle!

Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!

N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!


Tags : ,
Posté par Lavande à 16:35 - Commentaires [5] - Permalien [#]



Commentaires

    Yes !! Ca marche !!

    Posté par damouredo, dimanche 06 avril à 18:37
  • HEUUUUUUUUUUUUUU pour ICI je vois le C !! c'est normal m'dam ???

    Posté par MIMOUNETTE, lundi 07 juillet à 09:38
  • salut juste un détail ; j'ai bien le favicon mais je pense que je ne l'ai pas collé a tous les endroits nécessaires pour notamment qu'il apparaisse dans les favoris ou à toutes les pages ouvertes sur le blog.De plus tout étant en anglais en avancé j'avoue être un peu aux fraises pour repérer les endroits stratégiques ... peux tu m'aider ?

    Posté par the frenchkiss, mercredi 20 août à 02:03
  • MERCI!

    Merci pour ces explications qui ont l'IMMENSE mérite d'être claires, même pour la débutante confirmée que je suis!
    Je pense être venue à peu près à bout de ce GROS challenge pour moi que l'installation d'un petit favicon de rien du tout! J'ai juste " type="image/x-icon"/> " type="image/x-icon"/> marqué en haut de ma page d'accueil, mais bon... c'est pas trop mal pour une 1ère manip, non??!
    Merci beaucoup!

    Posté par 2C&1P, mardi 19 avril à 20:38
  • Bonjour, merci pour cet intéressant tuto mais depuis, y aurait-il une astuce pour insérer le code html dans le "head" d'une page en mode NORMAL ??? Merci !!!

    Posté par Ctresfacilafaire, jeudi 13 novembre à 17:20

Poster un commentaire







Haut de Page