(version simplifiée pour SPIP4 : consulter aussi [->art872])

Favicon

  personnaliser l’icone dê site dans l’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.

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

(version simplifiée pour SPIP4 : consulter aussi favicon (avant SPIP 4))

Article publié le 5 septembre 2013, et actualisé en janvier 2024

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Quand vous utilisez l’interface privée de SPIP, vous remarquerez assez vite l’apparition d’une petite image (comme ci-dessus) au début du titre de votre onglet, la favicon [1], et vous ne serez pas surpris d’y reconnaître votre écureuil favori (Histoires de LOGO) depuis SPIP 3.2

Cela permet de renforcer l’image visuelle de votre site, et facilite le retour à son onglet dans une liste de navigations ..

Les navigateurs récupèrent automatiquement cette image,
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.

Dans les Squelettes de la "dist" SPIP 3, il existe une noisette générique .\favicon.ico.html [2] 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 dans les chemins dédiés de votre arborescence de squelettes, et sinon prendre l’écureuil standard (voir ci-dessous pour le privé).

 Modifier votre ’favicon’ publique

Plusieurs solutions vont vous démonter la genèse du système :
Il vous suffit donc de créer un tel fichier icône, à partir d’une image que vous fournirez par exemple à un site de conversion en ligne (comme https://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.

 Le plugin Favicon

Enfin, vous pouvez vous intéresser au nouveau plugin Favicon, qui facilite ces manipulations à partir du logo déclaré pour votre site ; ou bien inspirez-vous du code visible ici.
Petite précaution, votre logo de site doit être carré, de 200 pixels de côté minimum. Sinon, déposer une image nommée favicon.png à la racine de votre dossier ./squelettes.

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

Les icônes identifiants quelques sites SPIP favoris

 une Favicon privée personnelle ?

Quand vous passez dans l’espace privé, SPIP affiche l’icone 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.

 Depuis SPIP 3.2

Il faut d’abord noter que l’espace privé de SPIP est passé sous forme de squelettes SPIP : le mode de surcharge est donc facile à utiliser ; ainsi, dès la version 3.1 (et même avant !) vous pouviez simplement surcharger spip.ico dans votre dossier de squelettes...
La nouvelle version 3.2 s’est accompagné d’une refonte graphique, et donc du nouveau logo
En l’occurrence, une noisette dédiée est prévue pour recharger le favicon du privé : c’est ./prive/squelettes/inclure/favicon-head.html qui charge par défaut ce logo #CHEMIN{images/favicon-spip.png} ; il vous suffit donc de créer dans votre dossier de squelettes, dans un dossier ./squelettes/images, un fichier favicon-spip.png qui sera votre nouvelle icone du privé...


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Favicon 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 !

[2Appelée par ./inclure/head.html dans les versions SPIP 3, pour générer la favicon automatiquement dans les Squelettes de la "dist" !

[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 A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 5 septembre 2013, et actualisé en janvier 2024 .

Répondre à cet article