Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

« Rejoignez notre groupe Facebook ! | Page d'accueil | La FIAC sur les blogs Hautetfort »

mardi, 21 octobre 2008

Créer un favicon pour son blog

Si à l'image de Patricia, du blog www.macuisinerouge.com, vous souhaitez que figure une petite image (appelée Favicon)  dans la barre de navigation, à côté de l'adresse de votre blog, suivez les conseils ci-dessous.

 

Image1.png

 

Image2.png

 

Vous verrez c'est très simple ;)

 

 


 

 

L'opération va se passer en deux temps :

  1. La sélection et la création du fichier image favicon
  2. L'intégration à votre blog

 

1. Création du favicon

 

Pour l'exemple, je vous propose d'utiliser l'image ci-dessous :

 

Casserole.jpg

 

Cette image figure telle quelle dans mes documents. Le problème est qu'elle n'a pas le format adapté pour devenir mon favicon.

Pour remédier à ce souci, il suffit de se rendre sur ce site magique : Le générateur de Favicon.

En quelques clics, nous allons pouvoir créer notre favicon à partir de n'importe quelle image de notre bibliothèque.

 

favicon.ico Generator_1224592257743.png

Dans le pavé en haut à gauche, cliquez sur "Import Image".

 

favicon.ico Generator_1224592279589.png

Allez chercher votre image dans vos dossiers en cliquant sur Parcourir.

 

favicon.ico Generator_1224592298876.png

Téléchargez le favicon.

 

Et voilà ! Pour la création du favicon, c'est déjà terminé !

 

2. Intégrer le favicon à son blog

 

En premier lieu, enregistrer votre favicon au sein des fichiers rattachés à votre blog.

Dans l'onglet Tableau de bord, cliquez sur Fichiers puis sur le dossier Images.

Enregistrez votre favicon.

 

Hautetfort_1224593562386.png

 

C'est en cliquant sur son libellé que vous vous trouverez sur l'adresse de votre favicon.

Et c'est cette adresse qu'il vous faut copier pour modifier vos templates.

 

Pas de souci, là aussi c'est très simple :

 

Rendez vous dans l'onglet PRESENTATION, puis Configuration avancée.

Il va vous falloir modifier le template de chaque ligne commençant par "Modèle de la page ...". Cliquez sur Modifier le template.

 

Hautetfort_1224595279086.png

 

Une page pleine de code indigeste s'ouvre :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$blog.language}" lang="{$blog.language}">
<head>
<link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
<title>{$blog.title}</title>
<meta name="description" content="{$blog.description|htmlspecialchars}" />
<meta name="keywords" content="{$blog.keywords|htmlspecialchars}" />
<meta name="abstract" content="{$blog.description|htmlspecialchars}" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="publisher" content="http://www.blogspirit.com/" />

 

Ajoutez également, juste en dessous, la ligne :

<link rel="shortcut icon"{$platform.url}graphics/favicon.ico"/>


Remplacez alors la partie surlignée en bleu par l'adresse de votre favicon, soigneusement récupérée auparavant, lors de l'enregistrement de votre image au sein des fichiers.

La ligne que vous allez rajouter vous permettra d'afficher votre favicon sous Internet Explorer.

 

Et pour éviter les mauvaises surprises, ATTENTION A NE PAS TOUCHER AUX AUTRES LIGNES DE CODE.

 

Et voilà, normalement votre favicon s'affiche automatiquement à côté de l'adresse de votre blog ;)

Et pour les questions, les commentaires n'attendent que vous.

Commentaires

Bonjour Alexandra, merci pour la note du jour ;)

Je viens de créer un favicon en suivant toutes les étapes, j'ai collé l'adresse de l'image au bon endroit mais il ne s'affiche pas.
Pourriez-vous m'aider ?

Merci d'avance,
Bon mardi ;)

Écrit par : Pierre, du blog Plusbell3lavie.hautetfort.com | mardi, 21 octobre 2008

Répondre à ce commentaire

Pour ma part, je n'ai pas le lien du favicon quand je clique sur le libellé... Pouvez vous m'aider également ?

Écrit par : Rose | mardi, 21 octobre 2008

Répondre à ce commentaire

Ah j'ai réussi ^_^ ! Même si ça ne fonctionne pas sur la page "à propos" mais c'est pas grave, en tout cas c'est super !!! merci pour ce post :)

Écrit par : Rose | mardi, 21 octobre 2008

Répondre à ce commentaire

Oui Rose, il faut faire clic de droite "Copier l'adresse du lien".

Écrit par : Alexandra | mardi, 21 octobre 2008

Répondre à ce commentaire

On dirait que ça ne fonctionne pas avec tous les navigateurs. Pour le Blog de Rose, je ne le vois pas en passant par le navigateur Orange :/

Écrit par : Ferocias, du blog Les Peuples du Soleil . hautetfort.com | mardi, 21 octobre 2008

Répondre à ce commentaire

Super simple, merci beaucoup pour l'astuce!

Écrit par : lady | mardi, 21 octobre 2008

Répondre à ce commentaire

Comme on m'adit de ne plus toucher à la configuration avancée, je n'ose pas...

Écrit par : laura | mercredi, 22 octobre 2008

Répondre à ce commentaire

Voilà une astuce bien sympathique ! Merci je vais m'y essayer !

Écrit par : Ana | mercredi, 22 octobre 2008

Répondre à ce commentaire

Ravie que la note vous plaise ;)

Laura : Si vous suivez exactement les instructions, il ne devrait pas y avoir de souci. Mais surtout ne cliquez pas sur "Restaurez la version originale".

Écrit par : Alexandra | mercredi, 22 octobre 2008

Répondre à ce commentaire

Bonjour Alexandra,
Le favicon marche t-il sur internet explorer ?
Merci ;)

Écrit par : Pierre, du blog Plusbell3lavie.hautetfort.com | mercredi, 22 octobre 2008

Répondre à ce commentaire

Ah mince, ça dépend donc du navigateur ??

En tout cas, sur Firefox y a pas de problèmes...

Écrit par : Rose | mercredi, 22 octobre 2008

Répondre à ce commentaire

Merci encore, Alexandra.

Écrit par : Patricia | mercredi, 22 octobre 2008

Répondre à ce commentaire

Bon alors, j'ai essayé.... mais je suis restée bloquée à cette phrase "C'est en cliquant sur son libellé que vous vous trouverez sur l'adresse de votre favicon.

Et c'est cette adresse qu'il vous faut copier pour modifier vos templates."

Lorsque je clique sur le libellé j'arrive sur une page qui me demande avec quoi je veux ouvrir le fichier.....

C'est grave ou je suis vraiment nulle :-)))))))))))))))))))

Écrit par : Ana | mercredi, 22 octobre 2008

Répondre à ce commentaire

Décidément tenir un blog c'est un peu comme remplir sa chambre d'adolescent avec moult petits colifichets chatoyant. Un véritable arbre de Noël avant l'heure. Mais le fond alors ? Le fond, il faut un peu se pencher pour y voir et parfois il n'y a pas de fond. Comme quand Alice chute dans le puit sous l'effet des psychotropes de sa tendre innocence. aller, la vie est ailleurs !

Écrit par : Lephauste | jeudi, 23 octobre 2008

Répondre à ce commentaire

Ana >>>>>> moi aussi j'avais pas compris ^^' en fait tu fait CLIQUE DROIT puis COPIER L'ADRESSE DU LIEN ! :) voilà ! là tu auras le lien ;)

Écrit par : Rose | jeudi, 23 octobre 2008

Répondre à ce commentaire

Merci Rose ! çà marche ! ^^^^

Écrit par : Ana | jeudi, 23 octobre 2008

Répondre à ce commentaire

Hey Alex...andra,
rien vu, suis-je bigleux ou rien n'a été fait..; comme promis ;-(
bonne fin de semaine - d'ici mardi je regarderais à nouveau...
ciao
Doume

Écrit par : Doume | vendredi, 24 octobre 2008

Répondre à ce commentaire

un autre tuto pour insérer un favicon sur blogtuto ;-) http://www.blogtuto.org/article-22267026.html

Écrit par : lavande | vendredi, 24 octobre 2008

Répondre à ce commentaire

Doume : C'est en cours justement ;)

Lavande : J'ai cherché cette note sans succès, merci !

Écrit par : Alexandra, du blog Hautetfort | vendredi, 24 octobre 2008

Répondre à ce commentaire

Bonjour .
J'ai fait exactement la manip , mais rien ne se passe , je suis donc revenu à la version originale , si quelqu'un peut m'aider .
D'avance merci .

Écrit par : François VERRIELE | vendredi, 24 octobre 2008

Répondre à ce commentaire

Excusez-moi, j'avais mal lu .
Je pensais que cela permettait de modifier le bandeau de présentation , pas ajouter une image à coté de l'adresse des pages concernées .
Encore mille excuses.

Écrit par : François VERRIELE | vendredi, 24 octobre 2008

Répondre à ce commentaire

MERCI ALEXANDRA !
MERCI ALEXANDRA !
MERCI ALEXANDRA !
MERCI ALEXANDRA !
MERCI ALEXANDRA !
;-)
I love you
;-)

Écrit par : Doume | samedi, 25 octobre 2008

Répondre à ce commentaire

Impeccable, mon avatar fétiche est désormais en favicon.
Merci pour le détail de la manipulation.

http://bgr.hautetfort.com

A noter que pour certaines pages, il existe DEUX lignes comportant la description du favicon.

Écrit par : BGR | samedi, 25 octobre 2008

Répondre à ce commentaire

J'aimerais savoir si vous pouvez faire un post pour 'comment changer la couleur des commentaires postés par l'auteur' ??

Merci ^^

Écrit par : Rose | dimanche, 26 octobre 2008

Répondre à ce commentaire

Pas de réponse... ?

Écrit par : Rose | lundi, 27 octobre 2008

Répondre à ce commentaire

Bonjour Rose,
Cette fonction n'est pas encore disponible. Elle sera bientôt disponible. Pour le moment, les commentaires postés par l'auteur sont les mêmes que les commentaires postés par les visiteurs du blog.
L'équipe Hautetfort prépare actuellement cette nouvelle fonctionnalité.

à bientôt ;)

Écrit par : Pierre, du site plusbell3lavie.hautetfort.com | lundi, 27 octobre 2008

Répondre à ce commentaire

D'accord ^_^ merci pour la réponse !

Écrit par : Rose | lundi, 27 octobre 2008

Répondre à ce commentaire

D'accord ^_^ merci pour la réponse ! Je suis impatiente d'avoir cette fonction :)

Écrit par : Rose | lundi, 27 octobre 2008

Répondre à ce commentaire

Mais de rien Rose.
Comme le dirait Alexandra, c'est bien dans les tuyaux... ;)

Écrit par : Pierre, du blog Plusbell3lavie.hautetfort.com | lundi, 27 octobre 2008

Répondre à ce commentaire

Bonjour,

Je n'arrive pas à intégrer de favicon. Lorsque je copie l'adresse dans le premier template celame dit que mes information n'ont PAS été prises en compte.
Pouvez-vous m'aidez SVP??

Écrit par : Alice | lundi, 09 août 2010

Répondre à ce commentaire

Rebonjour,

Avec un peu de persévérances, j'ai réussi à installer mon favicon. Malheureusement, bien que j'ai fait attention de choisir un favicon 16x16 et format ico, il n'apparait pas sur mon internet explorer 8.

J'espère que vous me répondrez.
Merci

Écrit par : Alice | lundi, 09 août 2010

Répondre à ce commentaire

Voila qui est bien vrai, une partie de code est manquante dans le tuto, et je vais mettre cela à jour immédiatement.

Pour que votre Favicon soit visible sous IE, il faut ajouter le code:

< link rel="shortcut icon" href="http://URL/favicon.ico"/ >

Validez et Hop ! le Favicon apparaît sous IE. Je l'ai fait pour votre blog.

Écrit par : Julien | lundi, 09 août 2010

Répondre à ce commentaire

Merci merci merci!! Ca marche!!!!

Écrit par : Alice | lundi, 09 août 2010

Répondre à ce commentaire

LE FAVICON EN EXTENSION PNG CA MARCHE AUSSI !
En ce qui me concerne, impossible d'insérer un fichier ico dans le blog donc je suis passée par une méthode plus simple et voyez sur le blog http://femmesliberees.hautetfort.com/ ça fonctionne très bien.
LA MANIP :
1. Retailler l'image en 20*20 pixels et sauver en png.
2. La télécharger dans votre blog dans "tableau de bord/fichiers/images
3. Ouvrir l'image dans libellés et copier avec un clic droit, sur l'image, l'url de l'image
4. Se rendre dans la présentation/configuration avancée du modèle de la page d'accueil et le modifier
5. Dans le lien < link rel="icon" href="{$platform.url} graphics/favicon.ico " type=" image/x-icon " /> remplacer {$platform.url}graphics/favicon.ico en collant l'url de votre image
6. Toujours dans ce lien changer le type de l'image, c'est à dire qu'au lieu de voir "ico" écrire png comme ceci type="image/x-png"
7. Enregistrer le nouveau code html de votre page d'accueil. Attention de conserver chaque petit sigle même les " ou / ou > < = par exemple href="http://....votre image.png" ou par exemple type="image/x-png"
8. Rafraîchir la page de votre blog.
Et voilà !

Je n'ai pas essayé jpg !

Écrit par : Vie d'artiste | jeudi, 19 septembre 2013

Répondre à ce commentaire

Les commentaires sont fermés.