MV- Favicon perso (Add-on)

Guide Favicon et animation d'onglet — e-Vend Studio 🖼️ Guide — Favicon et animation d'onglet Votre propre icône dans l'onglet du navigateur, et une animation qui fait revenir les clients qui sont partis voir ailleurs 🏢 Gestionnaires ⏱️ 5 minutes Novembre 2026 — v1.0 📖 C'est quoi ? 🚀 Pourquoi l'activer 🎨 Préparer l'image ⚙️ Le configurer ✨ Animation d'onglet 👀 Où il apparaît 📲 Avec l'App installable ⚠️ Bon à savoir 🔧 Dépannage ⚠️ Ce guide est fourni à titre informatif. Pour toute question, contactez l'équipe e-Vend Studio. 📖 C'est quoi, un favicon ? La toute petite icône à côté du nom de votre boutique Regardez en haut de votre navigateur : à gauche du titre de chaque onglet, il y a une minuscule image. C'est le favicon . Il apparaît aussi dans les favoris , dans l' historique et dans la liste des onglets ouverts. Par défaut, toutes les boutiques d'une marketplace affichent le favicon de la plateforme. Avec l'option « Favicon personnalisé », votre boutique affiche le vôtre . L'option comprend aussi une animation d'onglet : quand un client quitte votre boutique pour regarder un autre onglet, le titre et l'icône de votre onglet s'animent pour le faire revenir . C'est expliqué plus bas. M Ma boutique G Google ▶ Vidéos 🔒 maboutique.e-vendstudio.ca Votre icône (à gauche, en bleu) se distingue des autres onglets ouverts. 💡 Le principe en une phrase Une image à téléverser pour avoir votre propre identité dans le navigateur, et une animation d'onglet pour rappeler à vos clients qu'ils ont laissé quelque chose chez vous. 🚀 Pourquoi l'activer ? Petit détail, grand effet Un client qui magasine a souvent une dizaine d'onglets ouverts . Sans favicon personnalisé, votre onglet ressemble à n'importe quel autre site. Avec le vôtre, il se repère d'un coup d'œil. 😕 Sans favicon personnalisé Votre boutique porte l'icône de la plateforme, la même que toutes les autres. Dans une pile d'onglets, votre client doit lire les titres pour vous retrouver. 😍 Avec favicon personnalisé Votre logo est visible dans l'onglet, dans les favoris et dans l'historique. Votre client vous reconnaît immédiatement et revient plus facilement. Avantage Pourquoi c'est important 🎯 Une image de marque complète Votre nom, votre logo, vos couleurs… et maintenant votre icône. Une boutique sérieuse est cohérente jusque dans les moindres détails. 🔎 On vous retrouve plus vite Parmi les onglets ouverts, dans les favoris ou l'historique, votre icône attire l'œil. 🤝 Plus de confiance Un site avec sa propre icône inspire plus confiance qu'un site qui affiche celle d'un autre. C'est un signe de professionnalisme. 🔔 Vos clients reviennent Un client qui hésite ouvre souvent un autre onglet pour comparer. Avec l'animation, votre onglet attire de nouveau son attention au bon moment, sans fenêtre contextuelle qui dérange. 🛒 Un rappel pour les paniers Vous pouvez limiter l'animation aux clients qui ont des articles dans leur panier, et même afficher combien il y en a. ⚡ Ultra simple Une image à téléverser, c'est tout. Aucun code, aucune manipulation technique. 🏪 Une icône par boutique Chacune de vos boutiques a la sienne, sans limite de nombre. Elle fonctionne aussi avec un domaine personnalisé. 🎨 Préparer votre image Le plus important : une image simple et bien choisie 📐 Les exigences Critère Ce qui est demandé Format PNG (les autres formats, comme JPG ou ICO, sont refusés) Forme Carrée : même largeur et même hauteur Taille en pixels Entre 192 × 192 et 1024 × 1024 Poids 2 Mo maximum Pas besoin d'une image minuscule : le navigateur la réduit tout seul. Une image 256 × 256 ou 512 × 512 est idéale. ✅ Ce qui fonctionne bien Votre logo simplifié, ou juste une lettre ou un symbole Des formes simples et des couleurs franches Un bon contraste avec le fond Un fond transparent ou uni Un peu de marge autour du dessin ❌ Ce qu'il vaut mieux éviter Un logo avec beaucoup de texte (illisible quand c'est petit) Une photo ou une image chargée Des détails fins Des couleurs pâles sur fond blanc Un dessin qui touche les bords 🔍 Le test du petit format Votre favicon sera affiché à environ 16 × 16 pixels , soit plus petit qu'un timbre. Avant de téléverser, réduisez votre image à cette taille sur votre écran : si on ne reconnaît plus rien, simplifiez-la. Souvent, la première lettre de votre nom ou le symbole de votre logo fait un excellent favicon. 💡 Comment faire un PNG carré ? Si votre logo est rectangulaire, ouvrez-le dans un éditeur d'images (Canva, Photoshop, Paint, Photopea…), créez un carré de 512 × 512, placez-y votre logo (ou seulement son symbole), puis exportez en PNG . ⚙️ Le configurer Deux minutes, une seule fois 🔒 Une option payante, activée par vous Le menu « Favicon » n'apparaît que si l'option « Favicon personnalisé » est activée pour votre marketplace. Si vous ne le voyez pas, vérifiez dans Mes services / Mon plan . Menu › MULTI-VENDEUR › 🖼️ Favicon 1 Ouvrez la page « Favicon » Dans le menu MULTI-VENDEUR, cliquez sur « Favicon ». Vous voyez l'image actuelle (ou « Aucun » si vous n'en avez pas encore). 2 Cliquez sur « Téléverser le favicon » Choisissez votre image PNG sur votre ordinateur. Si elle ne respecte pas les exigences, un message vous dit exactement quoi corriger (pas carrée, trop petite, trop grande, mauvais format). 3 Vérifiez l'aperçu La page affiche votre image et un aperçu dans un onglet , avec le nom « Ma boutique ». Si ce n'est pas lisible, essayez une version plus simple. 4 Ouvrez votre boutique Ouvrez l'adresse de votre boutique dans un nouvel onglet. Votre icône doit apparaître à côté du titre. Il n'y a rien d'autre à faire : c'est automatique. 🔄 Changer ou retirer l'image Cliquez sur « Changer le favicon » pour la remplacer, ou sur « Retirer » pour revenir au favicon de la plateforme. Vous pouvez le faire aussi souvent que vous voulez. ✨ L'animation d'onglet Faites revenir les clients qui sont partis voir ailleurs Quand un client quitte votre boutique pour consulter un autre onglet, votre onglet change de titre et d'icône pour lui rappeler que vous êtes là. Dès qu'il revient, tout redevient normal. Rien ne s'affiche sur la page : tout se passe dans l'onglet. G Google 🛒 3 article(s) vous attendent ▶ Vidéos Le client est sur « Google » : votre onglet l'appelle. Menu › MULTI-VENDEUR › 🖼️ Favicon › ✨ Animation d'onglet 1 Cochez « Activer l'animation d'onglet » L'animation est désactivée tant que vous ne l'activez pas. Vous pouvez la régler à l'avance et l'activer plus tard. 2 Choisissez quand elle démarre Voir le tableau ci-dessous. 3 Choisissez le style du texte Clignotant : le message alterne avec le titre normal de votre boutique. Machine à écrire : le message s'écrit lettre par lettre, puis recommence. 4 Choisissez si le favicon clignote aussi La case « Faire aussi clignoter le favicon avec un émoji » est cochée par défaut : l'émoji alterne alors avec votre favicon dans l'onglet. Choisissez parmi plus de 100 suggestions classées par thème (magasinage 🛒, attirer l'attention 💡, urgence ⏰, sympathique 👋, Noël 🎅, Pâques 🥚, Halloween 👻, été 🏖️, autres fêtes 🎂) ou tapez la vôtre. Pratique pour changer l'émoji au fil des saisons. Décochez-la si vous voulez que seul le texte clignote et que votre favicon reste toujours le même . 5 Écrivez vos messages Jusqu'à 5 messages de 60 lettres maximum. Ils défilent l'un après l'autre. Un aperçu de l'onglet s'affiche sous les messages. 6 Enregistrez l'animation Cliquez sur « Enregistrer l'animation ». Pour la voir, ouvrez votre boutique, puis passez quelques secondes sur un autre onglet. ⏱️ Les trois déclencheurs Choix Quand l'animation démarre Idéal pour Quand le client change d'onglet Dès que le client quitte l'onglet de votre boutique Un rappel général, pour tous vos visiteurs Seulement s'il a des articles dans son panier Quand le client a quitté l'onglet et qu'il a au moins un article dans son panier Récupérer les paniers abandonnés, sans déranger les simples visiteurs En permanence Dès le chargement de la page, même si le client reste dessus Une promotion ou une vente éclair (à utiliser avec modération) 🛒 À propos du déclencheur « panier » Il fonctionne pour les clients connectés à leur compte , car c'est le panier de leur compte qui est consulté. Un visiteur qui n'est pas connecté ne déclenche pas l'animation avec ce choix. ✍️ Bien écrire vos messages 💡 Le nombre d'articles du panier avec {n} Écrivez {n} dans un message et il sera remplacé par le nombre d'articles du panier du client. Exemple : « {n} article(s) vous attendent 🛒 » devient « 3 article(s) vous attendent 🛒 ». ✅ Des messages qui fonctionnent Courts et clairs (le titre d'un onglet est très petit) « Votre panier vous attend 🛒 » « Ne partez pas, il en reste peu ! » « Revenez, on vous garde ça au chaud 🔥 » Plusieurs messages différents pour varier ❌ À éviter De longs textes, coupés dans l'onglet Des promesses fausses ou des fausses urgences Des MAJUSCULES et des points d'exclamation partout Le déclencheur « en permanence » pour un message toujours pareil 📊 Les clients revenus En bas de la page, une carte compte les clients revenus grâce à l'animation : chaque fois qu'un client revient sur votre onglet après avoir vu l'animation pendant plus de 2 secondes. Vous voyez le nombre pour aujourd'hui, la semaine, le mois et le total, dont ceux qui avaient un panier. ℹ️ Ce que ce compteur dit… et ne dit pas Il compte les retours sur l'onglet , pas les ventes. Un client qui revient n'achète pas forcément, et un retour n'est pas un achat « récupéré ». Prenez-le comme un indicateur d'efficacité de vos messages : essayez-en un, comparez les chiffres, puis ajustez. 👀 Où votre favicon apparaît Partout où le nom de votre boutique est affiché Endroit Ce que vos clients voient L'onglet du navigateur Votre icône à gauche du titre de la page Les favoris Votre icône à côté du nom de votre boutique L'historique Votre icône dans la liste des sites visités L'écran d'accueil de l'iPhone Quand un client ajoute votre boutique à son écran d'accueil, votre image sert d'icône ℹ️ À propos de Google Google peut afficher le favicon d'un site dans ses résultats de recherche sur téléphone. S'il le fait pour votre boutique, c'est lui qui décide quand et après combien de temps : cela peut prendre plusieurs jours, voire plus, et ce n'est pas garanti. 📲 Avec l'option « App installable » Deux options qui se complètent Si vous avez aussi l'option App installable (PWA) , les deux fonctionnent ensemble sans se gêner : Option Ce qu'elle gère 🖼️ Favicon personnalisé La petite icône de l' onglet du navigateur 📲 App installable L'icône de l' app sur l'écran d'accueil du téléphone (image plus grande, 512 × 512 minimum), son nom et ses couleurs Vous pouvez avoir l'une sans l'autre . Si vous avez les deux, l'onglet affiche votre favicon et l'écran d'accueil de l'iPhone affiche l'icône de l'app . Vous pouvez utiliser la même image pour les deux, ou une version plus simple pour le favicon. ⚠️ Bon à savoir Ce que le favicon personnalisé fait, et ne fait pas ✅ Ce que ça fait Votre icône sur votre boutique Une animation d'onglet pour faire revenir les clients Un compteur de clients revenus Fonctionne avec un sous-domaine ou un domaine personnalisé Une icône par boutique, sans limite Changement ou retrait à volonté ❌ Ce que ça ne fait pas Ne change pas le favicon de la plateforme e-vendstudio.ca Ne change pas le logo ni le nom affichés dans votre boutique N'accepte que le format PNG N'est pas garanti dans les résultats de Google Ne compte pas les ventes, seulement les retours sur l'onglet Ne s'anime pas si le client a demandé moins d'animations sur son appareil Les navigateurs gardent les favicons longtemps en mémoire. Après un changement, il peut falloir quelques minutes, parfois plus, avant de le voir partout. Si vous retirez votre image ou si l'option est désactivée, votre boutique reprend le favicon de la plateforme. Les clients voient la version la plus récente de votre favicon dès que leur navigateur le recharge. L' animation fonctionne indépendamment du favicon : vous pouvez avoir l'un sans l'autre. Sans favicon personnalisé, l'émoji alterne avec le favicon de la plateforme. Si vous décochez l'émoji, le favicon ne bouge pas du tout. Quand l'onglet est en arrière-plan, les navigateurs ralentissent les animations pour économiser la batterie. Après quelques minutes, l'animation peut devenir plus lente. C'est normal. Quand le client revient, le titre normal et l'icône de votre boutique sont rétablis tout de suite. Une animation ne doit pas devenir lassante : gardez des messages courts et variés. 🔧 Dépannage Si quelque chose ne va pas ❌ Je ne vois pas le menu « Favicon » L'option n'est pas activée pour votre marketplace. Activez-la dans votre plan / vos services. ❌ Mon image est refusée Lisez le message affiché : il indique le problème. Les causes habituelles : l'image n'est pas un PNG (un JPG renommé en .png sera refusé), elle n'est pas carrée , elle fait moins de 192 × 192 ou plus de 1024 × 1024 pixels, ou elle pèse plus de 2 Mo. ❌ Je vois toujours l'ancienne icône dans mon onglet Attendez quelques minutes, puis rechargez la page avec Ctrl + F5 . Fermez l'onglet et rouvrez votre boutique. Videz le cache du navigateur, ou essayez en navigation privée : les navigateurs gardent les favicons plus longtemps que le reste. Vérifiez que vous regardez bien l'adresse de votre boutique et non e-vendstudio.ca, qui garde toujours son propre favicon. ❌ Mon favicon est flou ou illisible Il est affiché très petit. Choisissez un dessin plus simple (un symbole ou une lettre), avec moins de détails et un meilleur contraste, puis téléversez-le de nouveau. ❌ L'animation ne démarre pas Avez-vous bien coché « Activer l'animation d'onglet » et cliqué sur « Enregistrer l'animation » ? Il faut au moins un message. Regardez bien l'onglet de votre boutique pendant que vous êtes sur un autre onglet, et attendez quelques secondes. Avec le déclencheur « panier » , vous devez être connecté à un compte client et avoir au moins un article dans votre panier. Si votre ordinateur ou téléphone est réglé pour réduire les animations , elle ne s'affiche pas. Rechargez la boutique avec Ctrl + F5 après l'enregistrement. ❌ Le compteur de clients revenus reste à zéro Il ne compte que les clients qui reviennent après avoir vu l'animation plus de 2 secondes . Si vous testez vous-même, restez au moins 3 secondes sur un autre onglet avant de revenir. Les visites rapides ne comptent pas. ❌ Mon favicon n'apparaît pas dans Google Google décide lui-même de l'afficher ou non, et peut prendre plusieurs jours. Ce n'est pas un problème de configuration. 📋 L'essentiel à retenir Le favicon est la petite icône de l'onglet, des favoris et de l'historique : elle rend votre boutique plus reconnaissable et plus professionnelle. Une seule image à téléverser : PNG carré, entre 192 × 192 et 1024 × 1024, 2 Mo max. Choisissez simple : un symbole ou une lettre, bon contraste, un peu de marge. Elle sera affichée toute petite. Menu : MULTI-VENDEUR › Favicon. Seule votre boutique est touchée : la plateforme e-vendstudio.ca garde son propre favicon. Un changement peut prendre quelques minutes à apparaître : Ctrl + F5, ou navigation privée pour vérifier. L'animation d'onglet fait revenir les clients qui sont partis voir ailleurs : choisissez le déclencheur, le style, jusqu'à 5 messages courts et, si vous le voulez, un émoji qui fait clignoter le favicon (ou gardez votre favicon fixe). Le déclencheur « panier » cible les clients connectés qui ont des articles dans leur panier. Écrivez {n} pour afficher leur nombre. Le compteur montre les clients revenus sur l'onglet (pas les ventes). Utilisez-le pour comparer vos messages. Complémentaire à l'option « App installable » : le favicon pour l'onglet, l'icône de l'app pour l'écran d'accueil. e-Vend Studio — Guide Favicon et animation d'onglet — Novembre 2026 v1.1 Ce guide est fourni à titre informatif. Pour toute question, contactez l'équipe e-Vend Studio.