Joomla: Mettre en place une favicon

Mise à jour le Mercredi, 02 Février 2011 20:51 Écrit par Tr@nquille Dimanche, 06 Juillet 2008 09:55

13841 lecteurs

Note des utilisateurs: / 34
MauvaisTrès bien 

Votez!
C'est le seul retour qu'on a des internautes qui visitent les sites...

Comment mettre une favicon lorsqu'on crée un template pour joomla 1.5?

prérequis:

connaitre l'arborescence minimum d'un template (Template Joomla Arborescence minimum)

connaitre le rôle des fichiers de base d'un template: index.php notamment (lien sur index.php expliqué)

savoir insérer le module "head" dans un fichier index.php (lien)

taille de la favicon: 16x16px

extension: .ico

(attention, il ne suffit pas de renommer un fchier.jpg, il faut créé un type de fichier ico (lien explication/méthode)

l'icone créée doit obligatoirement s'appeler:

favicon.ico

déposer cette icone dans le répertoire racine du template créé.

joomla détecte automatiquement cette image comme la favicon et rajoute alors une ligne dans le head de la page html construite à partir du index.php de la racine du template :

<link href="/templates/tranquille/favicon.ico" rel="shortcut icon" type="image/x-icon" />

et voilà.

Pour la voir dans Internet Explorer (parfois ça n'est pas instantané), mettre la page dans les favoris, apparemment ça l'aide
sinon, appuyez sur la touche CTRL+F5 pour recharger plus que la page en cours...

Si l'on souhaite mettre une favicon à la main (pour utiliser un fichier .png par exemple à la place d'un .ico, afin d'avoir une favicon transparente:

Tout d'abord il faut savoir que Internet Explorer (6 au moins, pour le 7 et 8 je ne sais pas encore) ne sait pas interpréter un favicon.png, il continuera donc à utiliser le favicon mis en place par défaut par joomla, il faut donc laisser le favicon.ico à la racine du template.

Déposez votre nouvelle favicon.png à la racine de votre template, à côté de la précédente.

Ensuite, pour donner une favicon différente pour opera et ff qui savent interpréter les fichiers.png en tant que favicon, rajouter cette ligne en plus:

ATTENTION, dans l'instruction suivante, il y a un slash / de trop au début, juste après href="/

c'est un bug de mon éditeur que je ne peux pas encore corriger.

en fait l'instruction commence par link href égal "<?php etc et pas de /

<link rel="icon" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.png" type="image/png" />

ainsi, on peut avoir une belle favicon avec de la transparence, ce que ne sait pas faire IE.

l'instruction php:

<?php echo $this->baseurl ?>

permet à joomla de retrouver l'icone au bon endroit à tous les coups, elle donne le chemin au répertoire racine des templates.

et celle-ci:

<?php echo $this->template ?>

lui permet de récupérer le nom du template utilisé.
Ainsi joomla se construit l'url d'accès à la favicon tout seul.

Enfin, une petite astuce pour mettre une favicon à l'interface d'administration (backend) à la place de celle de joomla:

mettez votre favicon.ico dans le dossier:

/administrator/template/khepri (si vous utilisez khepri comme template d'admin) à la place de la favicon joomla par défaut.