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 reconnaître votre écureuil favori (Histoires de LOGO) :
est devenu depuis SPIP 3.2
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 ne se généralise...
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.
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 [3] 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 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
Et l’espace privé SPIP 2 ?
Avez-vous remarqué, quand vous passez dans l’espace privé, 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 [4].
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 [5].
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 24 janvier, et actualisé en janvier 2024 .
Répondre à cet article