Insérer un favicon

Publié le par blogtuto

Peut-être avez-vous remarquez 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!!!.
 

 

Vous pouvez échanger le logo de H&F... pour le personnaliser et mettre votre propre logo.

Cette manip est réservé au mode avancé.

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 6.png

 

 

 

Une fois chargée cliquez sur 

Image 5.png

 

et prenez l'adresse qui va se présenter comme ceci :

 http://blogtuto.hautetfort.com/media/02/01/1343671746.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 presentation, puis Configuration avancée. Sur le modèle de la page d'accueil, avant la balise </head> insérer cette ligne

<link rel="shortcut icon"http://votre adresse.ico" type="image/x-icon"/>
<link rel="icon" href="http://votre adresse.ico" type="image/x-icon"/>

5. 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.

Publié dans Haut et fort

Commenter cet article

mindalicious 23/11/2009 23:26


zut le site générateur de favicon est hs. Je suis bien curieuse de voir ce que donne le favicon animé... en tous cas il est grand temps que je m' y mette.
et encore merci pour tous tes tutos :) :) :*


bphanou 25/10/2008 15:48

Donc voici le lien:

Lavande 27/10/2008 08:32


ton code ne passe pas. Peut être peux tu l'envoyer en passant par la case "contact"?


bphanou 25/10/2008 15:39

Bonjour Lavande,

D'abord, je voudrais te remercier pour tous ces tutos que tu nous fournis; ces derniers temps, je m'en suis pas mal servi, tu m'as aidé à me trouver une nouvelle passion lol Je n'arrête pas de bidouiller mon blog maintenant lol
Evidemment, tout ce travail est énorme et je ne t'oublierais pas mais j'attends juste la fin du mois cad lundi car les bons plans coûtent chers quelquefois lol
Si je peux me permettre, j'ai passé beaucoup de temps pour pouvoir insérer le favicon et j'ai dû bidouiller car il y a quelques petites choses que je ne captais pas!
Voici donc le code exact qui m'a permis de l'insérer sur canalblog à l'endroit que tu nous a indiqué :

lavande 31/08/2008 09:15

non il n'y a pas de soucis à part que l'étape 7 est la 5. je corrige! Merci de me l'avoir signaler.

lily411 30/08/2008 21:48

desolé mais je pense qu'il y a un souci, il manque l'étape 5 et 6 je pense car je n'y arrive pas
merci d'avance