Comment insérer un favicon dans la barre d'adresse ?
From Amen Wiki
Contents |
[edit] Introduction
Un favicon est une image de petite taille qui se situe à côté de la barre d'adresse du navigateur et permettant de personnaliser un peu plus la navigation et la présentation de votre boutique E-Commerce.
Bien que la boutique E-Commerce ne dispose pas d'une interface dédiée à la mise en place de cette option, il est possible de configurer la mise en place d'un favicon avec quelques lignes de code.
Attention La mise ne place du favicon nécessite de pouvoir créer des éléments HTML. Ce faisant, seuls les packs E-Commerce Premium sont concernés et peuvent installer des favicons suivant la procédure détaillée ci-dessous.
[edit] Créer l'image du favicon
Il faut d'abord créer ou récupérer l'image du favicon qui sera affiché. Pour fonctionner correctement, cette image doit être d'une taille de 16 x 16 pixels ou 32 × 32 pixels et d'une résolution de 256 couleurs. Si ces paramètres ne sont pas respectés, le favicon n'apparaitra pas.
Une fois l'image crée, enregistrez-la au format .png ou .ico.
[edit] navigation dans la boutique
Vous devez ensuite mettre cette image au sein de la boutique.
Pour cela, rendez-vous dans l'interface d'administration:
Puis cliquez sur l'onglet 
Dans le menu gauche, cliquez sur le lien page d'accueil 
[edit] Insérer le favicon dans la boutique
Cliquez ensuite sur le bouton 
pour afficher le menu de configuration du texte:
Cliquez sur le bouton 
pour ouvrir l'interface de mise en ligne d'images:
cliquez sur le bouton 
pour sélectionner l'image du favicon sur votre ordinateur puis cliquez sur le bouton 
Votre image est désormais sur le serveur et est présentée dans l'interface:
En cliquant sur le nom de l'image nouvellement importée, vous pouvez en visualiser l'aperçu graphique mais aussi le chemin réel sur le serveur:
sélectionnez l'intégralité de ce chemin et copiez-le afin que nous l'utilisions dans le code d'insertion du favicon.
[edit] Mise en place
A ce stade, le favicon est crée et mis en place sur le serveur, il ne reste plus qu'à créer un élément HTML contenant le code d'appel du favicon sur la boutique.
Pour cela, cliquez sur l'onglet 
La page des styles actuellement associés à votre boutique est affichée:
cliquez sur le lien Modifier les éléments de navigation situé à droite de l'image du style de votre choix.
La nouvelle page vous présente les différentes options de navigation associé à la structure de votre boutique E-Commerce:
La partie supérieure de votre boutique vous présente les différentes sections sous forme du schéma suivant:
En cliquant, sur les différentes parties de l'image, le tableau est mis à jour avec les éléments de navigation présent dans la section choisie.
Vous pouvez donc choisir l'endroit où votre nouveau lien HTML sera mis en place sur votre boutique.
Une fois la section choisie, dans le tableau des composants, cliquez 
Sous le tableau une nouvelle section est affichée:
Vous pouvez y choisir l'ensemble des composants de navigation disponible avec votre boutique E-Commerce.
Enfin, cliquez sur le bouton 
Le nouvel élément HTML est ajouté. Cliquez dessus pour en définir le contenu:
Remplissez le contenu de l'élément HTML avec le code suivant:
<HEAD> <LINK REL="SHORTCUT ICON" href="ADRESSE DE l'IMAGE"> </HEAD>
La mention ADRESSE DE L'IMAGE doit être remplacée par l'adresse de votre favicon que nous avons sauvegardé un peu plus tôt dans ce manuel.
afin d'obtenir le résultat suivant:
Cliquez sur le bouton
Le favicon est désormais visible sur toutes les pages de la boutique.
