SPIP et favicon
Un favicon, c'est quoi ?
Un favicon est une image symbolisant un site web, du moins c'est souvent le cas, car techniquement un même site web peut employer un favicon différent selon la page. Un navigateur web peut la récupérer automatiquement et l'afficher, mais certains ne gèrent pas ça et d'autres ne l'affichent que dans certains cas. Dans le cas où le favicon est affiché, c'est par exemple avant le titre de la page, pas dans la page elle-même mais dans ce qui la contient, comme un onglet ou une fenêtre. Cela est un élément d'identification visuelle du site web, ce qui peut être utile pour retrouver une page parmi d'autres, en particulier parmi des pages d'autres sites web (puisque le favicon est souvent unique pour toutes les pages d'un même site web).
Quel format informatique d'image pour un favicon ?
Un favicon peut être dans n'importe quel format d'image. Toutefois il est judicieux que le format soit reconnu par un maximum de navigateur web. On peut notamment citer : le JPEG, le PNG, et l'ICO. Le format WebP est plus récent, donc moins susceptible d'être géré. Le SVG est quant à lui plus ancien que le WebP, mais plus récent que les autres cités et il est complexe (d'où sa puissance), donc miser exclusivement sur lui ne maximisera vraisemblablement pas la compatibilité, mais il offre l'avantage d'avoir une qualité invariante en fonction de la taille, puisque c'est un format vectoriel.
Le format ICO a l'avantage de pouvoir encapsuler plusieurs tailles dans un même fichier, ce qui permet au navigateur web de choisir la taille qui lui parait la plus adaptée en fonction de celles disponibles (s'il y en a plusieurs), mais le prix d'encapsuler plusieurs images en une seule est évidemment d'être plus lourd qu'une seule image. Le logiciel libre et gratuit GIMP permet de créer une image ICO avec plusieurs tailles en utilisant un calque par taille.
Quelle(s) dimension(s) d'image pour un favicon ?
Il n'y a aucune règle à priori pour la dimension. Toutefois il est d'usage que la forme soit carré, donc que la hauteur et la largeur soient identiques. Pour ce qui est des tailles précises du carré, il est bon au minimum de faire du 16 par 16, voire du 32 par 32, et on peut faire des multiplications par 2 si on veut faire plusieurs tailles.
Comment le navigateur web va trouver le favicon ?
Le navigateur web fait comme il veut pour trouver le favicon,
si tant est qu'il en cherche un.
Une technique historique est de chercher
favicon.ico à la racine du site web.
Il est possible d'en faire la déclaration dans une page web
dans la balise HTML head
via la balise HTML link
.
Pour ce qui est du favicon,
3 attributs de cette balise nous intéresse :
rel
, type
et href
.
-
La valeur de
rel
doit indiquer que c'est un favicon. Il y a pour cela plusieurs valeurs possibles (ico
,icon
,favicon
,shortcut icon
, etc.) et les navigateurs web ne prennent pas nécessairement en compte les mêmes. On peut heureusement faire une baliselink
par valeur derel
, mais cela alourdit d'autant la page web. -
La valeur de
type
doit être le type MIME du format d'image. On peut proposer plusieurs types différents avec une baliselink
pour chacun, mais cela engraisse la page web. -
La valeur de
href
doit être un chemin (absolu ou relatif) vers le favicon.
Comment SPIP gère le favicon public de base ?
Par défaut, SPIP gère le favicon avec squelettes-dist/favicon.ico.html. Par défaut, il cherche un fichier favicon.ico et il se rabat sur spip.ico s'il n'a pas trouvé. On peut mettre son image dans squelettes/img/.
Si l'on veut personnaliser la manière dont est généré le HTML utilisé pour indiquer le favicon, on peut se créer un fichier squelettes/favicon.ico.html qui surchargera celui de base (duquel on peut bien sûr s'inspirer). Cela peut par exemple permettre de changer le type d'image et/ou le nom de l'image.
Utiliser un module complémentaire ?
Si l'on trouve cela trop technique ou que l'on a la flemme, on peut utiliser un module complémentaire (nommé plug-in en anglais). En effet, le favicon peut être généré automatiquement à partir de l'icône du site web.
Comment SPIP gère le favicon privé de base ?
Dans SPIP, il y a 2 favicons : celui pour les pages web publics et celui pour celles privées. Il est aussi possible de personnaliser ce dernier, même si l'intérêt est clairement moindre. C'est fait par défaut par prive/squelettes/inclure/favicon-head.html. Le chemin pour l'image mobilisée par celui-ci est le suivant : #CHEMIN{images/favicon-spip.png}. Pour surcharger juste l'icône, il faut mettre une image nommée favicon-spip.png dans squelettes/images.
Pourquoi surcharger au lieu de remplacer ?
Cela peut paraitre idiot de s'embêter à mettre une image ou un nouveau modèle HTML à un autre endroit, alors qu'on pourrait remplacer le fichier. Pourtant c'est tout à fait pertinent. En effet, quand SPIP se met à jour, il s'attend à ce que ses fichiers ne soient pas modifiés et donc il les remplace l'ancienne version par la nouvelle. Avec un remplacement du fichier au lieu d'un surchargage, une mise-à-jour peut donc supprimer les précieuses personnalisations. Il est donc hautement recommandé de surcharger.