Comment configurer le logo et le favicon : taille du logo, logo en chargement différé, format du favicon, onglet du navigateur, cohérence de marque, vitesse de page et liste de contrôle pour un site e-commerce

Un client arrive sur votre site depuis une publicité, une recherche ou la recommandation d'un ami, et dans les premières secondes, il regarde autre chose que les produits : est-ce un endroit digne de confiance ? Le logo fait partie des premiers petits détails qui donnent cette impression. Un logo flou, de travers ou d'une taille différente sur chaque page donne une image négligée à la boutique, aussi bon que soit le produit. La petite icône de l'onglet, le favicon, est la seule chose qui vous rappelle aux visiteurs lorsqu'ils passent d'un onglet à l'autre ; s'il manque, le navigateur affiche une icône de page vide.

Dans ce guide, nous traitons les paramètres de logo et de favicon e-commerce sur deux niveaux. Le premier : ce que l'on fait réellement dans le panneau Faprika. Le logo, le logo lazy et le favicon se téléversent depuis l'écran Configuration > Paramètres > Paramètres généraux ; les tailles recommandées, leurs multiples et l'avertissement sur le cache sont expliqués comme dans les pages de formation. Le second : les principes au-delà du panneau, à savoir la cohérence de marque, la lisibilité sur mobile, la conception d'une icône simple et la vitesse. Il y a aussi deux petits outils : un calculateur qui compare les dimensions du logo et du favicon que vous prévoyez de téléverser avec les proportions recommandées, et une liste de contrôle en huit points. Pour la vitesse et la qualité des images produit, un article distinct est consacré à l'optimisation des images produit ; ici, nous nous concentrons uniquement sur les visuels de marque.

Que sont les paramètres de logo et de favicon ?

Les paramètres de logo et de favicon déterminent à partir de quel fichier, à quelle taille et dans quelles zones les visuels de marque de votre site e-commerce sont affichés. Le logo est la marque affichée en haut de la page, le logo lazy est le logo de substitution affiché pendant le chargement des photos produit, et le favicon est la petite icône de l'onglet du navigateur.

Dans Faprika, les trois se gèrent depuis le même écran : Configuration > Paramètres > Paramètres généraux. Chacun dispose de son propre champ « Téléverser » ; vous choisissez l'image et cliquez sur Enregistrer. Le tableau ci-dessous résume la différence entre les trois images.

Nous vous recommandons de lireFormation à la gestion du logo

Pourquoi le logo et le favicon sont-ils si importants ?

Le logo et le favicon comptent parce que les clients décident souvent de faire confiance ou non à une boutique avant même de regarder les produits, et la cohérence visuelle est déterminante dans cette décision. Si la même marque a le même aspect partout, elle est perçue comme professionnelle ; si elle change partout, elle suscite des hésitations.

On peut regrouper l'effet sous trois titres.

• Confiance et reconnaissance. Lorsque les clients vous voient dans une publicité, dans un e-mail et sur le site, ils doivent voir la même marque. La cohérence est la première condition de la reconnaissance.
• Facilité de retour. Quand un client ouvre plusieurs onglets et compare des produits, les titres d'onglet raccourcissent et seul le favicon reste. La bonne icône facilite le retour vers votre onglet.
• Vitesse perçue. Le logo lazy évite que la vignette reste vide pendant le chargement des photos produit. La page paraît remplie et le client remarque moins l'attente. Pour le sujet général de la vitesse, consultez l'article pourquoi la vitesse du site est importante en e-commerce.

Aucun de ces effets ne détermine à lui seul une vente, mais tous soutiennent ou affaiblissent la décision d'un client arrivé sur la fiche produit. Le coût est également faible : on le configure correctement une fois et cela fonctionne pendant des années.

Comment téléverser un logo dans Faprika ?

Dans Faprika, le logo se téléverse dans le panneau via Configuration > Paramètres > Paramètres généraux. Sur l'écran qui s'ouvre, vous choisissez l'image dans le champ Téléverser à côté de Logo, puis vous enregistrez. Dans le thème Faprika, le logo se place en haut à gauche de la page sur l'accueil, les catégories et la fiche produit.

Taille de logo recommandée

La taille de logo recommandée est 135×35 et ses multiples. Si vous téléversez un multiple, vous pouvez régler la taille avec les champs « Largeur maximale du logo » et « Hauteur maximale du logo » en conservant les proportions. Autrement dit, vous pouvez téléverser un grand fichier préparé aux proportions 135×35 et limiter la place qu'il occupe sur la page grâce à ces deux champs.

Le résultat pratique est le suivant : préparer le logo une ou plusieurs fois plus grand, aux proportions 135×35, garantit une image nette à l'écran et un bon ajustement dans la zone en haut à gauche. Un fichier qui déforme les proportions peut paraître comprimé ou écrasé même si les champs de taille sont modifiés. L'outil ci-dessous vous permet de vérifier les dimensions de votre propre fichier par rapport à ce ratio.

Points d'attention lors de la préparation du logo

• Choisissez les proportions dès le départ. Plutôt que de recadrer le fichier ensuite, concevez-le dans un espace de travail aux proportions 135×35.
• Laissez une marge sur les bords, mais sans excès. Un espace vide inutile autour du logo le fait paraître plus petit qu'il ne l'est dans le coin supérieur gauche.
• Pensez au fond. Le logo doit rester lisible sur la couleur de fond sur laquelle il se trouvera. Un fichier à fond transparent facilite l'adaptation à différents fonds.
• N'alourdissez pas le fichier plus que nécessaire. Le logo se charge sur chaque page ; garder sa taille réduite joue en faveur de la vitesse.

Vérifiez les caractéristiques de votre logo avec l'outil ci-dessous

L'outil compare la largeur et la hauteur du logo avec le ratio recommandé de 135×35 et indique combien de fois il est plus grand ainsi que la hauteur attendue. Il vérifie aussi si le côté du favicon est un multiple de 16. Les dimensions saisies sont celles de votre fichier ; l'outil se contente de comparer le ratio et ne juge ni la qualité ni le format.

Qu'est-ce qu'un logo lazy et pourquoi le téléverser ?

Le logo lazy est le logo affiché en arrière-plan des vignettes produit pendant le chargement des photos produit à l'ouverture de votre page. Quand la photo est chargée, l'image du produit remplace le logo ; entre-temps, la vignette affiche votre marque au lieu d'une boîte vide.

Le nom ne signifie pas « lent » ni « paresseux » ; ici, « lazy » vient de la logique consistant à charger les images au fur et à mesure des besoins. Sur une page catégorie avec une longue liste de produits, les photos n'arrivent pas toutes en même temps, elles apparaissent l'une après l'autre. Ce que le client voit à l'écran pendant ce bref instant avant l'arrivée de la photo, c'est le logo lazy qui le détermine : un vide gris ou votre marque.

Dans Faprika, le logo lazy se choisit lui aussi sur l'écran Configuration > Paramètres > Paramètres généraux, avec le bouton Téléverser sous Logo lazy, puis se termine par Enregistrer. Deux principes concernant un bon logo lazy vous seront utiles :

• Restez simple. Il tient la place de la photo produit pendant un court instant ; une marque épurée rend mieux qu'un dessin détaillé.
• Restez cohérent avec le logo principal. Si les deux logos sont très différents, le client a l'impression de voir deux marques distinctes sur la page.

Nous vous recommandons de lireFormation à la gestion du logo lazy

Qu'est-ce qu'un favicon et comment le téléverser dans Faprika ?

Le favicon est l'icône située à gauche de l'onglet dans votre navigateur. Quand un visiteur ouvre de nombreux onglets, les titres raccourcissent et le moyen le plus simple de distinguer les onglets est l'icône ; un favicon manquant fait ressembler votre site à une page vide ordinaire.

Dans Faprika, le favicon se choisit sur l'écran Configuration > Paramètres > Paramètres généraux avec le bouton Téléverser à côté de Favicon, puis vous cliquez sur Enregistrer ; il est ajouté à votre site peu après. Le point sur lequel la formation insiste est la taille et le format : l'image doit être téléversée en 16×16 ou en multiples de 16 (comme 32, 64) et avec l'extension .ico.

Comment concevoir un bon favicon ?

Le favicon apparaît souvent dans une case dont le côté ne dépasse pas quelques dizaines de pixels. Il ne vous faut donc pas une version réduite de votre logo, mais une icône simple qui en est dérivée.

• Évitez le texte. Un long nom de marque n'est pas lisible à cette taille ; l'initiale du nom de la marque ou la forme la plus distinctive du logo suffit.
• Utilisez une ou deux couleurs. Plus il y a de détails, plus l'icône devient floue.
• Gardez un contraste élevé. L'onglet du navigateur peut être clair ou sombre ; l'icône doit se distinguer sur les deux fonds.
• Conservez la couleur principale de votre logo. Pour la cohérence, le favicon doit puiser dans l'univers de couleurs du logo.

Nous vous recommandons de lireFormation à la gestion du favicon

Que faire si le logo ne change pas ? Le piège du cache

Si l’ancienne version continue de s’afficher après l’import d’un logo ou d’un favicon, l’import n’a généralement pas échoué : le navigateur conserve encore l’ancien fichier. Pour que le logo ne soit pas rechargé à chaque affichage de page, Faprika conserve les logos dans un cookie ; c’est pourquoi votre logo change dès que vous videz les cookies et le cache.

L’avertissement explicite du tutoriel est le suivant : si votre logo ne change pas après remplacement, ne le réimportez pas sans cesse. Un nouvel import ne résout pas le problème et ne fait que faire perdre du temps. Voici le bon ordre :

1. Importez le logo, le logo lazy ou le favicon, puis cliquez sur Enregistrer.
2. Videz les cookies et le cache de votre navigateur.
3. Rouvrez le site et vérifiez la modification.
4. Si l’ancienne version s’affiche encore, essayez avec un autre navigateur ou une fenêtre privée.

Le cache a aussi un effet secondaire qui concerne vos clients : lorsque le logo change, certains visiteurs peuvent voir l’ancien logo pendant un certain temps. Si vous menez une refonte de marque importante, tenez compte de cette période de transition et évitez de faire le changement juste avant un jour de campagne important. Pour l’effet des cookies sur la santé du site, çerezler e-ticaret sitenizin sağlığı için iyi mi kötü mü propose un cadre général.

À lire aussiComment vider le cache et les cookies du navigateur

À quoi doivent ressembler le logo et le favicon sur mobile ?

Sur mobile, le logo doit s’afficher sans être rogné et à une taille lisible sur un écran étroit ; le favicon n’apparaît souvent pas du tout dans les navigateurs mobiles, c’est donc le logo qui porte l’essentiel. Lorsque la majorité des visiteurs viennent d’un téléphone, l’apparence du logo sur téléphone compte plus que sur ordinateur.

• Ouvrez le site sur votre propre téléphone. Vérifiez que le logo ne remplit pas l’écran, ne repousse pas les boutons du menu et se place correctement dans le coin supérieur gauche.
• Attention aux logos larges et allongés. Un logo très large rétrécit sur mobile et son texte devient illisible. Au besoin, préparez une version plus compacte.
• Utilisez les champs de largeur et de hauteur maximales. Comme Faprika permet de limiter la taille avec ces deux champs, vous pouvez corriger un logo qui déborde sur mobile sans le réimporter.
• Ne réduisez pas la zone de toucher. Le logo est généralement un lien vers la page d’accueil ; si son environnement est encombré, les erreurs de toucher augmentent.

Pour les principes généraux de compatibilité mobile, consultez l’article e-ticaret sitesinde mobil uyumun önemi . Comme les favicons s’affichent rarement sur téléphone, leur rôle principal est de représenter votre marque dans les onglets de bureau et les favoris du navigateur.

Cohérence de marque : le logo est-il identique partout ?

La cohérence de marque signifie que le même logo, les mêmes couleurs et le même symbole apparaissent comme une identité unique sur le site, dans les e-mails, sur les factures et les documents joints aux colis, dans les publicités et sur les réseaux sociaux. Le logo importé depuis le panneau n’est qu’une partie de cette identité.

En pratique, ces vérifications sont utiles :

• Évitez la confusion entre versions. Si d’anciennes et de nouvelles versions du logo circulent dans différents dossiers, quelqu’un finira par importer l’ancienne. Gardez un seul dossier « logo actuel ».
• Fixez vos couleurs. Le logo, le logo lazy et le favicon doivent provenir du même univers de couleurs.
• Vérifiez aussi les autres endroits du site. Si les pages de marque, les modèles d’e-mail et les factures imprimées utilisent le logo, mettez-les à jour aussi. Pour les pages de marque, l’article comment créer une page de marque est utile.
• Quand le logo change, changez tout ensemble. Renouveler le logo en laissant l’ancien favicon fait apparaître une autre marque dans l’onglet du navigateur.

Le logo et le favicon influencent-ils la vitesse ?

Oui, c’est possible : le logo est une image chargée sur chaque page, et un fichier inutilement lourd ralentit chaque affichage. Le favicon est un petit fichier mais il est demandé sur chaque page ; il suffit de le garder simple et léger.

Les principes pratiques pour la vitesse sont :

• N’importez pas le logo à une taille bien supérieure à la zone où il est utilisé. Des multiples de la taille recommandée suffisent pour une bonne netteté à l’écran ; un fichier beaucoup plus grand ne fait qu’alourdir.
• Débarrassez le fichier des détails inutiles. Les ombres marquées et les dégradés augmentent la taille du fichier.
• Profitez de l’avantage du logo conservé dans un cookie. Faprika conserve les logos dans un cookie pour qu’ils ne soient pas rechargés à chaque affichage de page ; ne changez pas sans cesse de logo, ce qui romprait ce fonctionnement.
• Gardez le logo lazy léger. Comme c’est la première chose visible à l’ouverture de la page, plus il est simple, plus il paraît rapide.

Ces principes ne sont qu’une petite partie de la gestion globale de la vitesse. Pour les images produits et le poids des pages, l’article optimisation des images produits traite les éléments les plus lourds ; le logo et le favicon sont les éléments « petits mais présents sur chaque page ».

Erreurs les plus fréquentes dans les réglages du logo et du favicon

Les erreurs les plus fréquentes dans les réglages du logo et du favicon sont : fausser les proportions, choisir le mauvais format de favicon, ne pas voir la modification à cause du cache et réimporter sans cesse, et gérer les trois images indépendamment les unes des autres. La plupart ne viennent pas du réglage lui-même mais de l’absence de test du résultat sur différents appareils.

Importer un fichier qui fausse les proportions

Un logo carré ou très haut rétrécit dans la zone prévue pour le ratio 135×35 et paraît à l’étroit. Préparez dès le départ le fichier selon le ratio recommandé.

Importer le favicon dans un format autre que .ico

Le tutoriel exige l’extension .ico. Plutôt que de vous débattre avec un fichier d’une autre extension, préparez l’icône dès le départ dans le bon format.

Réduire le logo allongé et l’utiliser comme favicon

Un logo avec du texte est illisible dans une zone de 16×16 ou 32×32. Utilisez une initiale ou un symbole simple.

Réimporter sans cesse parce que rien n’a changé

Le plus souvent, le problème vient du cache, pas de l’import. Videz d’abord les cookies et le cache.

Ne jamais importer le logo lazy

Un logo lazy non importé signifie que les zones d’image des produits restent vides jusqu’à l’arrivée de la photo. L’importer une fois et le laisser suffit.

Ne pas tester sur mobile

Un logo qui s’affiche correctement sur ordinateur peut déborder sur téléphone. Vérifiez sur votre téléphone après chaque modification.

Gérer les trois images indépendamment

Le logo a été renouvelé, le favicon est resté ancien. La cohérence de marque est rompue et cela peut mettre des mois à se remarquer.

Okumanızı öneririzE-Ticaret Sitesinde Mobil Uyumun Önemi

Liste de contrôle du logo et du favicon

La liste de contrôle du logo et du favicon réunit les huit points que les visuels de marque doivent valider avant la mise en ligne et après chaque changement de marque. L’image et l’outil ci-dessous sont des présentations différentes des mêmes points ; le tableau donne la même information sous forme de texte.

Quand revoir le logo et le favicon ?

Les réglages du logo et du favicon doivent être revus lorsque votre identité de marque change, lorsque votre thème ou votre palette de couleurs est renouvelé, avant une campagne, ou lorsque des clients vous signalent par exemple « le logo semble flou ». Plutôt que d’y voir un import ponctuel, considérez-le comme un réglage mis à jour en même temps que votre marque.

Avant une grande campagne ou une période de forte activité, un court tour suffit : ouvrez le logo, le logo lazy et le favicon sur ordinateur comme sur téléphone et jetez-y un œil. Corriger une erreur avant le début de la campagne est bien plus simple que de la corriger pendant que le trafic arrive. Les visuels de marque doivent aussi être en phase avec la qualité générale des pages produits ; pour cela, tenez compte ensemble des principes de l’article optimisation des images produits.

Gestion du logo et du favicon avec Faprika

Dans Faprika, le logo, le logo lazy et le favicon sont réunis sur un seul écran : Configuration > Paramètres > Paramètres généraux. Il y a des champs d’import distincts pour les trois images et des réglages de largeur et de hauteur maximales pour le logo ; les tailles recommandées et l’avertissement sur le cache sont expliqués en détail dans les pages du tutoriel. Comme vous pouvez importer et contrôler vous-même les visuels de marque, vous n’avez pas besoin d’attendre l’aide d’un graphiste ou d’un développeur.

Pour voir tout ce que vous pouvez faire dans une boutique créée avec Faprika et quelles fonctionnalités figurent dans quelle offre, vous pouvez consulter nos offres ou demander une démo.

Questions fréquentes

Comment configurer le logo et le favicon sur un site e-commerce ?

Dans Faprika, le logo, le logo lazy et le favicon se téléversent dans le panneau via Configuration, Paramètres, Paramètres généraux. Chacun dispose de son propre champ de téléversement : vous choisissez l'image et cliquez sur Enregistrer. Nous recommandons 135×35 et ses multiples pour le logo, et 16×16 et ses multiples avec l'extension .ico pour le favicon.

Favicon : qu'est-ce que c'est ?

Le favicon est la petite icône affichée à gauche de l'onglet dans le navigateur. Il aide à repérer votre site quand de nombreux onglets sont ouverts ; il doit être simple, très contrasté et cohérent avec votre marque.

Quelle taille doit avoir le logo ?

La taille de logo recommandée dans Faprika est 135×35 et ses multiples. Si vous téléversez un multiple, vous pouvez ajuster la taille en conservant les proportions grâce aux champs « Largeur maximale du logo » et « Hauteur maximale du logo ».

Qu'est-ce qu'un logo lazy ?

Le logo lazy est le logo affiché en arrière-plan des vignettes produit pendant le chargement des photos à l'ouverture de la page. Il évite que la vignette reste vide jusqu'à l'arrivée de la photo. Il se téléverse depuis le champ Logo lazy de l'écran Configuration, Paramètres, Paramètres généraux.

J'ai téléversé un logo mais l'ancien s'affiche toujours. Que faire ?

Les logos sont conservés dans les cookies pour ne pas être rechargés à chaque ouverture de page. Au lieu de téléverser encore et encore, videz donc les cookies et le cache de votre navigateur ; après le premier chargement, vous verrez votre nouveau logo.

Quel format et quelle taille pour le favicon ?

Le favicon doit mesurer 16×16 ou un multiple de 16 (comme 32 ou 64) et porter l'extension .ico. Une icône simple, lisible en petit, fonctionne mieux qu'un long texte de logo.

Articles qui peuvent vous intéresser

• Optimisation des images produits
• E-Ticaret Sitesinde Mobil Uyumun Önemi
• Pourquoi la vitesse du site est-elle importante en e-commerce ?
• Comment créer une page de marque