Favicons

Les favicons de Joomla!

Les favicons sont les petites icônes qui apparaissent dans l'onglet du navigateur à côté du nom de votre site. Près du début du fichier index.php du template se trouvent trois instructions pour charger les favicons dans la page :

    // Browsers support SVG favicons
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
    $this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

Pour le template Cassiopeia, Joomla recherchera les favicons aux emplacements suivants :

1. media/templates/site/cassiopeia/images - ils ne s'y trouvent pas, donc Joomla recherchera à l'emplacement suivant.
2. media/system/images - ils s'y trouvent, donc Joomla les utilisera à partir de là.

Si vous souhaitez utiliser vos propres favicons plutôt que les favicons de Joomla, téléversez-les au premier emplacement : media/templates/site/cassiopeia/images. Vous pouvez le faire via le formulaire Templates : Personnaliser. Ils ne seront pas affectés par une mise à jour du template Cassiopeia.

Les favicons sont parfois utilisées à des tailles plus grandes et dans des endroits autres que l'onglet du navigateur. Par exemple, voici une capture d'écran d'une partie d'une page de démarrage Firefox montrant certains emplacements favoris de l'utilisateur :

Tous les navigateurs modernes prennent en charge les icônes SVG, vous devriez donc faire de la création d'une icône SVG une priorité.

À propos du SVG

SVG est un acronyme pour Scalable Vector Graphics. Un fichier SVG contient du texte dans un format qui définit les emplacements et les formes des lignes avec les couleurs de ligne, les couleurs de remplissage, etc. La capture d'écran suivante montre le fichier joomla-favicon.svg ouvert dans un éditeur de texte. Les numéros de ligne sont créés par l'éditeur de texte. Ils ne sont pas présents dans le fichier. Les longues lignes représentent des courbes et sont tronquées ici à des fins d'affichage.

Pour créer un fichier SVG, vous devez utiliser une application appropriée telle qu'Inkscape. Les applications de graphisme matriciel telles que Photoshop ou The GIMP ne conviennent pas. Si vous préférez concevoir une icône dans une application de graphisme matriciel, ou si vous disposez déjà d'un logo matriciel pouvant être adapté en icône, vous pouvez importer le fichier PNG résultant dans Inkscape et y effectuer une vectorisation pour produire un fichier SVG. L'image vectorisée doit être supprimée après la vectorisation!

La création proprement dite d'un favicon SVG dépasse le cadre de cet article. La création d'un fichier favicon.ico standard à partir d'un fichier joomla-favicon.svg est très simple -- de nombreux sites le font en ligne gratuitement.

Comment créer des favicons

Si vous souhaitez créer vos propres favicons, la meilleure façon de procéder est de créer un favicon SVG puis d'utiliser un outil en ligne pour générer tous les autres formats à partir de celui-ci. Dans cet exemple, une icône est nécessaire pour un template enfant nommé Cassiopeia Green. Une icône doit être carrée et pas trop élaborée, car la taille d'affichage minimale est de 16x16 pixels. Certains appareils ont besoin de résolutions plus élevées, comme 32x32 ou 180x180, et Google recommande des multiples de 48x48 pixels. Si vous partez d'un SVG, vous n'avez pas à vous en préoccuper - créez simplement une image presque carrée avec un dessin adapté. Dans cet exemple, le favicon sera les lettres J4 en vert foncé.

Inkscape

Inkscape est une application gratuite, Open Source, multiplateforme, de graphisme vectoriel utilisée pour travailler avec des fichiers SVG. Elle fonctionne sous Linux, Mac et Windows. Rendez-vous sur le site Inkscape (inkscape.org) pour télécharger une copie adaptée à votre plateforme. Les illustrations suivantes montrent l'écran d'Inkscape à mi-parcours des instructions ci-dessous.

Créer un SVG

1. Démarrer Inkscape et ajuster la fenêtre à une taille confortable : sélectionner Affichage / Zoom / Zoom page
2. Sélectionner l'outil Texte, marqué de la lettre A dans la barre d'outils de gauche
3. Sélectionner Arial, Normal, 48 et px
4. Faire glisser pour définir une zone n'importe où sur la page
5. Saisir le texte : J4
6. Sélectionner Affichage / Zoom sur la sélection
7. Sélectionner Chemin / Objet en chemin - aucun changement visible mais le texte n'est plus du texte éditable
8. Sélectionner Fichier / Propriétés du document
9. Sélectionner Redimensionner au contenu
10. Dézoomer pour une meilleure vue - mais s'assurer que toutes les lettres sont toujours sélectionnées
11. Régler la hauteur à la même valeur que la largeur. Saisir la valeur !
12. Fermer la boîte de dialogue Propriétés du document
13. Affichage / Zoom page à nouveau - les caractères doivent être centrés
14. Édition / Tout sélectionner
15. Objets / Aligner et distribuer
16. Déplacer la sélection en tant que groupe / Relatif à la page / Centrer sur l'axe horizontal - vous devriez voir J4 se déplacer vers le point médian vertical
17. Sélectionner le panneau Remplissage et contour à droite - le panneau de droite comporte une liste déroulante marquée d'un chevron vers le bas
18. Dans le panneau Remplissage et contour, sélectionner Remplissage et le premier carré rempli
19. Dans le panneau RGB, saisir 006400ff dans le champ RGBA en bas à droite - le code pour le style CSS darkgreen
20. Fichier / Enregistrer
21. Dans la boîte de dialogue Enregistrer, saisir un nom de fichier approprié, par exemple green-favicon-j4.svg
22. Sélectionner un emplacement approprié, par exemple ~/Documents/joomla-dev/svgs
23. Sélectionner SVG optimisé (.svg) dans la liste déroulante en bas du formulaire.
24. Sélectionner Enregistrer
25. Sélectionner OK pour toutes les valeurs par défaut du formulaire Optimised SVG Output
26. Fermer le SVG sur lequel vous travaillez - il est possible d'enregistrer l'image au format Inkscape, mais ce n'est pas vraiment nécessaire.

Modifier le SVG avec un éditeur de texte

Démarrez votre éditeur de texte favori pour effectuer certaines modifications qui n'étaient pas possibles dans Inkscape.

1. Ouvrir votre fichier SVG nouvellement créé - remarquez que la première ligne est une spécification XML
2. Vous pouvez supprimer la deuxième ligne - un commentaire contenant Created with Inkscape
3. Si elle est présente, vous pouvez supprimer la ligne ne contenant aucun texte
4. Ouvrir le fichier original joomla-favicon.svg - il se trouve dans joomla_root/media/system/images
5. Copier le bloc de style et le coller dans votre SVG sur la ligne suivant l'instruction SVG
6. Fermer le fichier original joomla-favicon-svg pour éviter toute modification accidentelle
7. Dans le bloc de style de votre propre fichier SVG, remplacer path {fill: #000;} par path {fill: #006400;}, la valeur dans la ligne
8. Supprimer fill="#006400" de la ligne
9. Enregistrer
10. Ouvrir l'image dans votre navigateur. Pour Firefox, c'est Fichier / Ouvrir un fichier...

Vous devriez voir l'image dans votre navigateur. L'exemple montre J4 à 47 pixels carrés. L'étape suivante consiste à créer les autres types d'icônes dont vous avez besoin en utilisant votre SVG nouvellement créé comme modèle.

Traitement en ligne

Rendez-vous sur le site Real Favicon Generator. D'autres sites sont disponibles, mais celui-ci semble particulièrement complet.

1. Sélectionner le bouton intitulé Select your Favicon image
2. Le site affichera votre image maîtresse. Il indique également Your picture is not square (688x512). We can fix this by adding transparent margins
3. Sélectionner le bouton Continue with this picture sous l'image maîtresse.
4. Il y a des sous-formulaires avec un fond bleu pâle pour plusieurs types d'icônes - remplir chacun d'eux en vérifiant que l'aperçu vous convient.
5. Mieux vaut conserver les paramètres par défaut de Favicon Generator, sauf si vous savez mieux faire. Sauf :
6. Path, sélectionner l'option I cannot ... et saisir : media/templates/site/cassiopeia-green/images
7. Sélectionner le bouton Generate your Favicons and HTML Code
8. Après un court délai, un nouveau formulaire s'affiche, sélectionner le bouton Download your package : pack Favicon
9. Enregistrer le téléchargement ...
10. Sélectionner et copier le bloc de liens pour le sauvegarder quelque part.
11. Fermer le site de traitement en ligne

Le téléchargement est un fichier zip contenant 10 éléments : favicon.ico, safari-pinned-tab.svg, six fichiers PNG, browserconfig.xml et site.webmanifest.

Déploiement

Pour utiliser l'ensemble standard de favicons Joomla, vous devez renommer et déplacer les icônes vers joomla_root/media/templates/site/yourtemplate/images :

• Votre image SVG maîtresse, green-favicon-j4.svg, doit être renommée en joomla-favicon.svg
• Le fichier téléchargé safari-pinned-tab.svg doit être renommé en joomla-favicon-pinned.svg
• Le fichier téléchargé favicon.ico doit simplement être déplacé

Le bloc de liens

Le bloc de liens copié précédemment contient :

<link rel="apple-touch-icon" sizes="180x180" href="/media/templates/site/cassiopeia-green/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/media/templates/site/cassiopeia-green/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/templates/site/cassiopeia-green/images/favicon-16x16.png">
<link rel="manifest" href="/media/templates/site/cassiopeia-green/images/site.webmanifest">
<link rel="mask-icon" href="/media/templates/site/cassiopeia-green/images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/media/templates/site/cassiopeia-green/images/favicon.ico">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-config" content="media/templates/site/cassiopeia-green/images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Vous n'avez probablement pas besoin de l'utiliser !