[RÉGLÉ] Cassiopeia et favicon

[RobertG]

Bonjour,

Je bute se nouveau sur un problème simple : le changement de favicon sur un site en J4 utilisant Cassiopeia. Ce site est migré depuis J3 et le favicon était à la racine. Malgré ça, c'est celui par défaut qui s'affiche.
Après recherches, je l'ai placé dans le dossier media/templates/cassiopeia/images (il est aussi à la racine dans le dossier templates/cassiopeia) et j'ai toujours celui de Joomla!
Dans le code-source de la page, j'ai 3 lignes :

<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/media/templates/site/cassiopeia/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
<link href="/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">

Que faire pour avoir "le bon" ?

[woluweb]

Tu as regardé mon toto Cassiopeia sur slides.woluweb.be ?

[RobertG]

Merci Marc, mais il faut convenir qu'il n'est absolument pas naturel de devoir convertir et renommer deux fois le fichier favicon.ico pour que ça fonctionne !

[RobertG]

Non, pas de cache, mais je n'ai pas (encore) converti le favicon...

[Five_Phil]

Bonsoir, moi j’ai fini par faire les 3 avec mon logo. Sinon au début, je renommais le fichier xxx-pinned.svg, je crois, celle qui fait 150x150px, mais les 2 autres étaient converti avec mon logo..
Et pi il faudra les re-placer après une mise à jour... ça c'est relou

[RobertG]

C'est vraiment aberrant comme conception !

[daneel]

Bonsoir,

Désolé, je n'ai rien compris à votre discussion (la fatigue sans doute...)

Par défaut, les images de favicon de joomla 4 sont définis avec 2 svg et un .ico du fait des différents supports et résolutions différentes et sont stockés dans /media/system/images/

• joomla-favicon.svg
• favicon.ico
• joomla-favicon-pinned.svg

On ne touche pas à ces fichiers car cela fait partie du système.

Pour personnaliser, on va imposer nos propres fichiers personnalisés dans le repertoire images du template qui est désormais dans media depuis Joomla 4.1.
Cela nous donne donc les mêmes noms de fichiers mais dans un répertoire différent : media/templates/site/cassiopeia/images

• joomla-favicon.svg
• favicon.ico
• joomla-favicon-pinned.svg

Dans le code source, on voit bien que le chemin est modifié et l'affichage montre les nouvelles icônes.
En cas de mises à jour de Joomla, les fichiers créés ne seront pas écrasés vu qu'ils sont comme substitutions des favicons d'origine.
C'était expliqué ainsi par Dimitris. La méthode n'est pas géniale mais elle fonctionne, y compris avec les templates enfants.

Il n'y a rien de "relou", pas d'obligation après une mise à jour, pas de doublon et pas de template enfant obligatoire.
Je me trompe peut être mais dans ce cas, il faut que l'on m'explique pourquoi cela fonctionne.

La méthode manque également de convivialité et ce serait mieux de gérer cela par un paramétrage en backend (via un plugin ) mais la gestion des favicons est plus complexe que l'on ne pourrait imaginer. Voici un des guides complets sur le sujet réalisé en 2021 intitulé officieusement "La gestion du favicon est cauchemardesque, voici comment rester sain d'esprit" ou sobrement "Édition définitive de Comment créer un favicon en 2021". : https://dev.to/masakudamatsu/favicon...in-sanity-3al7
Cela n'a pas changé en 2022, Apple refuse toujours de prendre en compte les favicon en svg pour safari et toujours autant de problèmes (rien à voir avec joomla).

Pour ma part, je me limite à la définition de 5/6 fichiers incluant svg/ico + manifest quand c'est un template sur mesure (je gère le mode sombre, y compris dans la favicon) mais on peut très bien se contenter de la méthode de base évoquée ci-dessus.

[RobertG]

Ce qui est relou, c'est que le favicon.ico ne sert à rien puisque sur mon PC, c'est un des autres fichiers qui sert d'icone de l'onglet, et que donc il faut, y compris pour les anciens sites, régénérer ces fichiers avec notre propre image (ici, je ne l'ai pas et il va falloir que la propriétaire du site la retrouve pour qu'on puisse la traiter).

Sur d'autres sites avec des templates Astroid, le simple positionnement de l'ancien favicon à la racine du site l'affiche dans l'onglet. Pourquoi Cassiopeia ne saurait-il pas faire pareil, si d'autres le savent ?

[daneel]

Sur Astroid, c'est une favicon en png de 96x96 et non en .ico avec l'option d'une image pour l'apple touch et un fichier manifest, ce qui revient à définir les autres formats. Pour des questions de résolutions, le png est préférable au .ico cependant combien de tailles à définir alors qu'une version vectorielle peut s'adapter à tous les formats ?

Si on avait laissé uniquement le .ico, ce serait revenir en arrière. Le template par défaut doit servir de référence donc effectivement en choisissant le svg en plus du .ico, Joomla conserve une compatibilité tout en entrant dans la modernité sans pour autant devoir générer 36 fichiers...

Ce n'est pas simple aujourd'hui de satisfaire tout le monde. Vu que tu peux créer un template enfant, tu est parfaitement libre de choisir au final ce qui te semble le meilleur choix.

[RobertG]

Sur les sites où j'utilise Astroid, je n'ai pas défini de favicon dans le style, mais simplement laissé ou placé le favicon à la racine du site, et ça fonctionne.

[RobertG]

Bonjour,

J'ai l'impression d'avancer à reculons !
Le favicon original étant trop petit pour un résultat correct en conversion svg, il a été recréé par un graphiste. Il a été renommé et placé dans le dossier media du template, mais le résultat n'était pas satisfaisant, trop fin et pâle, il a donc été modifié et visualisé seul, le fichier correspond apparemment à ce qui est espéré.
Mais curieusement, après remplacement sur le serveur, l'onglet est vide de favicon !
Qui aurait une idée de la cause ? Merci de votre aide !

[RobertG]

Bonjour,

Si j'ai pu créer moi-même les trois fichiers pour un site (et en faire créer pour un autre), en couleur bien entendu, Joomla! m'affiche systématiquement les images en noir, comme sur les sites de démo ou les sites à peine installés.
Sur l'un je me suis aperçu que la conversion d'un jpg avait donné des svg en noir, effectivement, en utilisant un des premiers sites renvoyés par la recherche sur les termes "jpg to svg". J'ai changé de site de traitement, et ouf, mon svg est bien en couleur.

Comme je le disais, ce n'est pas simple ! Où est-il le temps où des novices complets (comme moi à l'époque) pouvaient sans énormes efforts créer et personnaliser leur site ?

[daneel]

Comme je le disais, ce n'est pas simple ! Où est-il le temps où des novices complets (comme moi à l'époque) pouvaient sans énormes efforts créer et personnaliser leur site ?

Bonjour,

Tu peux également utiliser les services de https://realfavicongenerator.net/ pour simplifier les choses. Il y a des extensions comme https://www.brainforge.co.uk/shop/do...y-brainforgeuk pour effectuer l'intégration dans Joomla.

C'est assez simple, soit tu te contente d'une favicon en png ou ico mais tu passe à côté de la compatibilité avec les supports les plus modernes qui demandent plus de résolutions ou tu le fais suivant les explications ou tu le sous-traite à un services web ou une extension tierce...

[RobertG]

Merci Yann,

J'ai finalement réussi à avoir de bons svg avec https://onlineconvertfree.com/fr/