Favicon

  L’image miniature dans votre onglet de navigation !


Pour faciliter l’identification visuelle de votre site dans l’écran de vos visiteurs, les navigateurs ont généralisé l’usage de cette icône, affichée au début de la barre d’adresse d’URL ou de l’onglet montrant votre site sur les écrans utilisateurs.
Les "favicon" des principaux sites SPIP
Cette image BMP est chargée à partir d’un lien spécifique que vous devez déclarer dans votre site, d’ailleurs SPIP vous fournit une image, que vous pouvez surcharger...

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Quand vous venez d’installer votre SPIP, vous remarquerez assez vite l’apparition d’une petite image (comme ci-dessus) au début de votre URL [1], et vous ne serez pas surpris d’y reconnaitre votre écureuil favori (Histoires de LOGO). spip ico

C’est ce qu’on appelle la favicon, qui permet de renforcer l’image visuelle de votre site..
Déjà les anciennes versions d’Internet Explorer -navigateur historique de Windows- récupéraient et montraient automatiquement une petite image nommée favicon.ico conventionnellement déposée à la racine du site Web, avant que cette innovation soit développée...

Comment se fait-ce ? Votre navigateur favori -et les autres- affiche cette image qu’il va récupérer sur votre site, en suivant le lien trouvé en <head> de votre page HTML.
spip favicons500 1

Dans les squelettes de Squelettes de la "dist" SPIP, il existe une noisette générique dédiée :

#HTTP_HEADER{Content-Type: image/x-icon}[(#INCLURE{favicon.ico}
                                |sinon{#INCLURE{spip.ico}})]

qui va tâcher de récupérer un fichier bien nommé favicon.ico [2] dans les chemins dédiés de votre arborescence de squelettes, et sinon prendre l’écureuil standard (voir ci-dessous pour le privé).

 Modifier le favicon

Plusieures solutions vont vous démonter la genèse du système :
Il vous suffit donc de créer un tel fichier icone, à partir d’une image que vous fournirez par exemple à un site de conversion en ligne (comme http://favicon.cc ), pour obtenir une miniature au bon format : fichier BMP, en 16x16 ou 32x32, que vous placerez à la racine de votre site (ou dans votre dossier ./squelettes pour un affichage automatique.

Depuis la normalisation HTML W3C, des liens spécifiques ont été standardisés en HTML, accepter d’autres formats de fichiers image, et pour préciser un nom d’image à utiliser :
- <link rel="icon" type="image/png" href="favicon.png" />
- <link rel="shortcut icon" type="image/gif" href="imageanim.gif" />
Donc, pour définir ou modifier votre favicon, ce "marqueur visuel" icône de favoris de votre site, vous pourrez rajouter une ligne comme ci-dessus au squelette ./squelettes/inclure/head.html de votre personnalisation...
L’autre solution est de recopier et surcharger la noisette favicon.ico.html précédente, à la racine de votre dossier de squelettes.
Enfin, un nouveau plugin Favicon facilite ces manipulations à partir du logo déclaré pour votre site ; ou bien inspirez-vous du code visible ici.

Pour voir l’intérêt, et l’usage qui peut en être fait si vous n’êtes pas convaincu :
spip favicons500 2

 Et l’espace privé ?

Avez-vous remarqué, quand vous passez dans l’espace privé, que l’icône change en spip ico -comme le titre de votre onglet- (si bien sûr vous avez personnalisé votre icône favorite) ?
- d’une part, l’espace privé de SPIP affiche un titre (avec la balise HTML <title> dans le <HEAD>) qu’il génère avec le nom du site et de la page, mais en le préfixant par un [ pour vous faciliter l’identification des pages privées en-cours de modification [3].
- d’autre part, SPIP prend dans ce cas directement le logo nommé spip.ico, (par [<link rel="shortcut icon" href="(#CHEMIN{spip.ico}|url_absolue)" type="image/x-icon" />] dans ./prive/squelettes/inclure/head.html), icône de logo SPIP également fournie dans les Squelettes de la "dist"..
Mais rien ne vous empêche de le surcharger, en rajoutant une icône dans votre dossier principal de squelettes : regardez bien les premiers écureuils de notre site favori SPN ; même l’espace privé affiche un écureuil qui ressemble au premier, mais l’image utilisée est complétée d’un mot en titre bas [4].

Ah oui, si votre icône n’apparait pas, penser à vider le cache des images SPIP.


Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Quoique FF ait récemment déplacé celle-ci dans le seul onglet !

[2Favicon est le nom-valise standard de ce fichier, qui était automatiquement recherché par IE directement à la racine de l’URL reçue, sans attendre d’avoir un lien indicatif !

[3Cela peut vous aider pour éviter de fermer brutalement un onglet en-cours de saisie ; voyez aussi le plugin Protection des formulaires.

[4En plus, il y a eu une erreur, car le logo original était retourné.....on corrigera à la prochaine mise-à-jour ! Du coup, c’est un autre logo stylisé de SPIP qui a été récupéré : merci Izo...


Liens visibles seulement pour les inscrits.

Article publié le 5 septembre 2013, et actualisé en août 2016 .

Répondre à cet article