Inserer une Icone (favicon) dans un blog ou un site internet
Alors, contrairement à la celèbre devise, pour cet article, on va y aller par quatre chemins...
L'astuce consiste à inserer une petite icone juste avant l'adresse URL de la page que vous ouvrez avec votre navigateur comme dans l'exemple ci-dessous.
Cette petite icone est appellée "favicon" et si la manipulation pour l'afficher peut paraitre simple a n'importe quelle bidouilleur de HTML ou de CSS, pour les autres, ce n'est pas aussi evident...
Aussi, n'ayant trouvé nulle par une explication claire pour y arriver, je vais essayer de la décrire aussi précisemment que possible.
Etape 1: Créer la favicon:
C'est a vous de le faire, à partir de n'importe quelle image, certes, mais en respectant quelques consignes.
-Celle ci doit mesurer au final 16 pixels par 16 pixels etre au format .PNG et disposer d'un nom pas trop long, du style "icon.PNG", le nom "favicon.PNG" n'etant pas obligatoire.
L'idéal pour y arriver, est de faire appel à http://www.html-kit.com/favicon/ qui propose de transformer une image en favicon, en lui indiquant l'image source sur votre disque dur, en faisant "Generate FavIcon.ico" et en faisant "Download Favicon" une fois l'operation terminée.
Attention cependant, ce generateur produit plusieurs choses, une icone.ICO en 32x32 pixels inutilisable et un dossier "extra" comprenant un .GIF inutilisable aussi.
Le fichier exploitable est celui appelé "preview", car il est en 16x16 pixels et en .PNG
Ou, de se servir d'un redimensionneur d'images comme cette merveille qu'est "IrfanView", de passer manuellement l'image désirée en 16x16 pixels et de l'enregistrer au format .PNG
Etape 2: Telecharger cette favicon:
Une fois votre favicon crée, uploadez la dans la categorie "fichier/photo/charger une image" comme vous le feriez pour n'importe quelle autre image affichée sur votre blog.
Etape 3: Reperer la favicon:
Meme si cette favicon est desormais placée parmi vos autres photos, comme elle ne sera pas affichée au même endroit, il convient de la reperer. Aussi, dans votre page de photos, cliquez sur votre favicon et faites "clic droit et proprietés" et vous devriez vous retrouver avec une petite fenêtre comme celle ci:
Copiez la partie surlignée de la categorie "emplacement" comme ici.
Etape 4: Inserer la favicon:
Ouvrez maintenant la partie "Modules" de votre blog et cliquez sur celle qui represente l'en-tête de votre blog ou il doit y avoir marqué "Cliquez ici pour modifier l'en-tête de votre blog"
Une fois dans cette partie, cliquez sur "Source" qui va afficher le code source de votre en-tête en mode HTML.
Pour inserer la favicon, il faut ecrire en haut de la case si elle est vide, ou au début du texte, si il y en a un:
<link rel="SHORTCUT ICON" href="l'adresse de votre image.PNG" /> comme dans l'exemple
Bien sur, il ne s'agit pas de taper "l'adresse de votre image.PNG" en toute lettres, mais bien l'adresse que vous avez copier dans les proprietés de votre image entre ces deux guillemets, en laissant les guillemets, mais sans rajouter d'espaces.
Sur mon blog, cela donne la partie surlignée en noir tout en haut du texte de la fenêtre "source" qui régit l'esthétique de cet en-tête.
Une fois cette ligne de texte inserée, n'oubliez pas de valider en faisant "ok".
Rendez vous ensuite sur n'importe quelle page de votre blog et actualisez.
Votre favicon devrait s'y afficher et y rester, quelque soit la page visitée.
L'astuce consiste à inserer une petite icone juste avant l'adresse URL de la page que vous ouvrez avec votre navigateur comme dans l'exemple ci-dessous.
Cette petite icone est appellée "favicon" et si la manipulation pour l'afficher peut paraitre simple a n'importe quelle bidouilleur de HTML ou de CSS, pour les autres, ce n'est pas aussi evident...
Aussi, n'ayant trouvé nulle par une explication claire pour y arriver, je vais essayer de la décrire aussi précisemment que possible.
Etape 1: Créer la favicon:
C'est a vous de le faire, à partir de n'importe quelle image, certes, mais en respectant quelques consignes.
-Celle ci doit mesurer au final 16 pixels par 16 pixels etre au format .PNG et disposer d'un nom pas trop long, du style "icon.PNG", le nom "favicon.PNG" n'etant pas obligatoire.
L'idéal pour y arriver, est de faire appel à http://www.html-kit.com/favicon/ qui propose de transformer une image en favicon, en lui indiquant l'image source sur votre disque dur, en faisant "Generate FavIcon.ico" et en faisant "Download Favicon" une fois l'operation terminée.
Attention cependant, ce generateur produit plusieurs choses, une icone.ICO en 32x32 pixels inutilisable et un dossier "extra" comprenant un .GIF inutilisable aussi.
Le fichier exploitable est celui appelé "preview", car il est en 16x16 pixels et en .PNG
Ou, de se servir d'un redimensionneur d'images comme cette merveille qu'est "IrfanView", de passer manuellement l'image désirée en 16x16 pixels et de l'enregistrer au format .PNG
Etape 2: Telecharger cette favicon:
Une fois votre favicon crée, uploadez la dans la categorie "fichier/photo/charger une image" comme vous le feriez pour n'importe quelle autre image affichée sur votre blog.
Etape 3: Reperer la favicon:
Meme si cette favicon est desormais placée parmi vos autres photos, comme elle ne sera pas affichée au même endroit, il convient de la reperer. Aussi, dans votre page de photos, cliquez sur votre favicon et faites "clic droit et proprietés" et vous devriez vous retrouver avec une petite fenêtre comme celle ci:
Copiez la partie surlignée de la categorie "emplacement" comme ici.
Etape 4: Inserer la favicon:
Ouvrez maintenant la partie "Modules" de votre blog et cliquez sur celle qui represente l'en-tête de votre blog ou il doit y avoir marqué "Cliquez ici pour modifier l'en-tête de votre blog"
Une fois dans cette partie, cliquez sur "Source" qui va afficher le code source de votre en-tête en mode HTML.
Pour inserer la favicon, il faut ecrire en haut de la case si elle est vide, ou au début du texte, si il y en a un:
<link rel="SHORTCUT ICON" href="l'adresse de votre image.PNG" /> comme dans l'exemple
Bien sur, il ne s'agit pas de taper "l'adresse de votre image.PNG" en toute lettres, mais bien l'adresse que vous avez copier dans les proprietés de votre image entre ces deux guillemets, en laissant les guillemets, mais sans rajouter d'espaces.
Sur mon blog, cela donne la partie surlignée en noir tout en haut du texte de la fenêtre "source" qui régit l'esthétique de cet en-tête.
Une fois cette ligne de texte inserée, n'oubliez pas de valider en faisant "ok".
Rendez vous ensuite sur n'importe quelle page de votre blog et actualisez.
Votre favicon devrait s'y afficher et y rester, quelque soit la page visitée.
Publicité