Les méthodes :


Il y a plusieurs manières d’afficher une favicon :


 

menu :

Méthode 1 : sans code - Méthode 2 : éditer le code source de la page - Méthode 3 : par un fragment HTML

 


Méthode 1 : sans code


1. Principe :

C’est la plus simple , ça consiste à créer une image au format ico de l’appeler favicon.ico est de la mettre dans le dossier racine de votre FTP ou de votre iDisk (iDisk > Web > Sites )


2. Oui mais...

cela nécessite quelques conditions :

  1. il vous faut un nom de domaine personnalisé

  2. le nom de domaine doit être correctement paramétré : une redirection CNAME, et non une redirection par frame ou autre.


Le navigateur de vos visiteurs recherchera une favicon à l’adresse suivante :

  1. http://www.nomdedomaine.com/favicon.ico ou

  2. http://sousdomaine.nomdedomaine.com/favicon.ico


Par ex. les abonnés Free pourront donc afficher une favicon

http://nomdutilisateur.free.fr/ -----> http://utilisateur.free.fr/favicon.ico


Mais jamais votre navigateur ne recherchera de favicon à l’adresse

  1. http://www.nomdedomaine.com/nomdedossierquelconque/favicon.ico



Ce qui exclue par ex. les abonnés MobileMe et les utilisateurs d’Orange

  1. http://pageperso-orange.fr/nomdutilisateur/

  2. http://web.me.com/nomdutilisateur/

Dans ces deux cas le navigateur recherchera une favicon à l’adresse suivante

  1. http://pageperso-orange/favicon.ico

  2. http://web.me.com/favicon.ico

qui sont respectivement les favicons d’orange et d’Apple (mais en aucun cas, celle des leurs nombreux utilisateurs)


L’alternative est donc d’avoir un nom de domaine personnel pour transformer  par ex.

http://web.me.com/nomdutilisateur/ en http://www.mondomaine.com .

Dans ce le navigateur recherchera une favicon à l’adresse suivante :

http://www.mondomaine.com/favicon.ico .

Encore faut il bénéficier une redirection correcte du nom de domaine cad une redirection CNAME.


3. Comment faire ?

Faire une image de 16 px x 16 px (oui c’est petit) ou 32 px x 32 px.

Convertissez en .ico avec GraphicConverter par ex.

(Si vous n’avez pas  GraphicConverter, sauvegarder en bmp avec Aperçu et renommez cette image en favicon.ico .)




Transférez à la racine de votre site iweb favicon.ico.


A la racine de votre site, on doit retrouver

  1. une page index.html

  2. un dossier site (portant le nom du site que vous lui avez donnez dans la colonne gauche d’iWeb)

  3. favicon.ico


La voici placée sur mon FTP  (capture de mon client-FTP):




et la voici en place dans la barre de mon navigateur :





Méthode 2 : éditer le code source de la page (à oublier)


1. Une méthode à oublier :

La deuxième méthode est la plus compliquée et peut être rangée au placard. C’est laborieux et il faut recommencer à chaque modification et publication de la page par iWeb. Quant on commence à faire de telle bidouille, autant se passer d’iWeb.


2. Avantages :

  1. il n’est pas nécessaire d’avoir un nom de domaine ,

  2. la favicon peut être placée n’importe où sur le web du moment quelle a une adresse.

  3. Il n’est plus obligatoire qu’elle soit en format ICO par ex. dans le code ci-dessus l’image est en PNG.

  4. Vous pouvez afficher une favicon différente par page de site si ça vous chante.

A vous d'aménager le code selon vous besoins.


2. Principe :

Il s’agit de publier vos page est de les éditer avec un éditeur de texte conçu pour le code (ex. Smultron, éviter textedit) pour ajouter le code suivant :


  1. <link rel="shortcut icon" type="image/png" href="http://adesse_de_ma_favicon.png" />


Placer ce code sous la balises title  (qui se trouve environ à la 7e ligne). par défaut on trouve à ce niveau, ceci

avant :

  1. <title>votre titre</title>

  2. <link rel="stylesheet" type="text/css" media="screen,print" href="votre_page_files/votre_page.css" />


en plaçant le code de la favicon, on obtient ceci :

après :

  1. <title>votre titre</title>

  2. <link rel="shortcut icon" href="http://l_adresse_de_ma_favicon.ico" />

  3. <link rel="stylesheet" type="text/css" media="screen,print" href="votre_page_files/votre_page.css" />


Méthode 3 : par un widget fragment HTML


La 3e méthode est une alternative à la méthode n°2, elle ne s’utilisera donc dans les cas où la méthode 1 n’est pas suffisante.

  1. si vous n’avez pas de nom de domaine personnel (ex. adresse de site en web.me.com/votre-pseudo ou pages_perso.orange.fr)

  2. si favicon n’est pas dans le dossier racine de votre serveur.

  3. si la favicon n’a pas d’extension ICO.

  4. si vous voulez afficher une favicon différente par page de site si ça vous chante.

A vous d'aménager le code selon vos besoins.


Je l’ai trouvée grâce à Google sur le site Communauté Office live Small Business. Cette astuce, utilisant un fragment HTML, simule la méthode n°2 : en gros ce petit bout de javascript dit à votre page «je sais qu’il te manque un truc dans ton code HTML mais fais comme si tu l’avais». Par rapport au code fourni dans le lien , je vous conseille de récupérer son adresse absolue  (et non son adresse relative) par ex. :

  1. http://web.me.com/monpseudo/favicon.ico


Donc :

  1. 1.placez votre favicon sur le net : hébergeurs d’images, serveur-FTP ou MobileMe (iDisk > Web > Sites).

  2. 2.Récupérez son adresse absolue

  3. 3.placez le code suivant dans un fragment HTML


  1. <script type="text/javascript">
    var head = parent.document.getElementsByTagName("head")[0];
    var favicon = parent.document.createElement("link");
    favicon.rel = ("shortcut icon");
    favicon.href = ("http://adressedelafavicon.ico");
    head.appendChild(favicon);

  2. </script>


changer http://adressedemafavicon.ico dans le code ci-dessus.


Et en pratique ça donne quoi ? Cette 3e méthode, je l’ai appliquée pour cette page vous devriez voir une favicon différente des autres pages de ce site.




Cas particulier :


Pour les personnes qui affichent leur nom de domaine par une redirection par frame (redirection transparente), le code est légèrement différent :


  1. <script type="text/javascript">

  2. var head = parent.parent.document.getElementsByTagName("head")[0];

  3. var favicon = parent.parent.document.createElement("link");

  4. favicon.rel = ("shortcut icon");

  5. favicon.href = ("http://adressedelafavicon.ico");

  6. head.appendChild(favicon);

  7. </script>


changer http://adressedemafavicon.ico dans le code ci-dessus. Merci à Cyclosaurus pour ce code.
Le problème, c'est que souvent le utilisateurs d'iWeb utilisant une "redirection par frame" ne le savent pas.


Commentaires :

 

Commentaires   |   Accueil     Archives     Précédent     Suivant    Forum     Mon Twitter     Débuter sur Mac