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 
-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é...
Article publié le 5 septembre 2013, et actualisé en janvier 2024 .
Répondre à cet article