Comment ajouter une favicon à Shopify

L'ajout d'un favicon à Shopify est une personnalisation de thème simple. Vous pouvez télécharger une image depuis votre administrateur Shopify sans modifier le code de votre thème dans la plupart des thèmes Shopify. Dans ce didacticiel, vous apprendrez à préparer un favicon, à l'ajouter à votre boutique Shopify, à le remplacer ou à le supprimer, à vérifier qu'il fonctionne et à résoudre les cas où le favicon n'apparaît pas. Vous apprendrez également quoi faire si votre thème place le paramètre favicon à un emplacement différent.

Avant de commencer, préparez une image de favicon carrée. Shopify recommande une taille de favicon de 32 × 32 pixels, bien qu'une image de 16 × 16 pixels soit également répertoriée comme taille de favicon idéale dans la documentation de Shopify. Les images de plus de 32 × 32 pixels peuvent être réduites à 32 × 32 pixels une fois téléchargées.

Comment ajouter un Favicon à Shopify ?

Shopify fournit un paramètre de favicon via l'éditeur de thème pour les magasins éligibles. L'emplacement exact du paramètre peut varier selon la version du thème. Les instructions actuelles de Shopify le placent sous Paramètres du thème, où il peut apparaître sous forme de Favicon ou sous Logo.

1. Connectez-vous à Shopify : Connectez-vous à votre administrateur Shopify. Vous devez accéder au magasin dont vous souhaitez modifier le favicon.
2. Ouvrir la boutique en ligne > Thèmes : Depuis l'administrateur Shopify, accédez à Boutique en ligne > Thèmes. Localisez le thème que vous souhaitez modifier.
3. Ouvrez l'éditeur de thème : Cliquez Personnaliser (ou Modifier le thème) à côté du thème que vous souhaitez personnaliser. Le point important est d’ouvrir l’éditeur de thème pour le thème que vous souhaitez modifier.
4. Paramètres du thème ouvert : Dans l'éditeur de thème, cliquez sur le bouton Paramètres du thème icône (représentée par une icône d’engrenage sur le panneau de gauche).
5. Recherchez le paramètre de favicon : En fonction de la version de votre thème, cliquez sur Logo ou Icône de favori. Shopify note spécifiquement que l'emplacement peut différer selon la version du thème. Ne présumez pas que chaque thème Shopify affichera un paramètre portant le même nom au même endroit.
6. Sélectionnez votre image de favicon : Dans la section Image Favicon, cliquez sur Sélectionner une image. Vous pouvez ensuite soit sélectionner une image déjà téléchargée sur votre interface administrateur Shopify, soit cliquer sur Ajouter des images et téléchargez une image depuis votre ordinateur. Sélectionnez le favicon que vous avez préparé.
7. Cliquez sur Terminé : Après avoir sélectionné l'image, cliquez sur Terminé. Shopify vous renverra aux paramètres du favicon.
8. Ajoutez du texte alternatif lorsqu'il est disponible : Certains thèmes vous permettent d'ajouter du texte alternatif au favicon. Pour ce faire, cliquez sur Modifier dans la section Image Favicon et entrez une brève description de l’image. Shopify note que certains thèmes proposent cette option. Un exemple descriptif serait : Initiales de la marque en blanc sur fond noir.
9. Enregistrez vos modifications : Cliquez Enregistrer en haut à droite. Cela applique le favicon au thème que vous modifiez.
10. Consultez la boutique en direct : Ouvrez votre boutique Shopify publiée dans une fenêtre de navigateur normale. Regardez l'onglet du navigateur et vérifiez si votre nouveau favicon apparaît à côté du titre de la page. Ne vous fiez pas uniquement à l'aperçu dans l'éditeur de thème Shopify. Shopify note que les favicons ne s'affichent pas lors de la visualisation d'un thème via l'éditeur de thème, car l'éditeur fait partie de l'administration Shopify plutôt que de la vitrine en direct.

Où est le paramètre Favicon dans Shopify ?

Dans les instructions actuelles de Shopify, le paramètre favicon est accessible via l'éditeur de thème :

Administrateur Shopify → Boutique en ligne → Thèmes → Modifier le thème/Personnaliser → Paramètres du thème

À partir de là, le paramètre peut apparaître comme Icône de favori ou sous Logo, selon la version du thème. Cette variation est importante car un ancien didacticiel peut vous demander de cliquer immédiatement sur Favicon, tandis que votre thème peut placer la même option dans Logo. Si vous ne trouvez pas le paramètre, vérifiez le panneau complet des paramètres du thème plutôt que de rechercher uniquement une étiquette spécifique.

Shopify exige également que les thèmes soumis à sa boutique de thèmes aient un paramètre de favicon, ce qui signifie que les thèmes conçus pour l'écosystème de Shopify devraient prendre en charge cette personnalisation.

Que faire si vous ne trouvez pas de paramètre de favicon ?

Tout d’abord, confirmez que vous modifiez le bon thème. Vérifiez ensuite :

• Aller à Boutique en ligne > Thèmes.
• Ouvrez le thème que vous souhaitez réellement publier.
• Ouvert Paramètres du thème.
• Vérifiez les deux Icône de favori et Logo.
• Parcourez le panneau complet des paramètres du thème. Certains thèmes organisent leurs paramètres différemment.

Si votre thème n’expose réellement pas de paramètre de favicon, le code du thème peut constituer une alternative. Les thèmes Shopify peuvent exposer les paramètres globaux via settings_schema.json, et la documentation du développeur de Shopify montre que les paramètres des favicon peuvent être rendus via l'objet de paramètres globaux du thème. L'édition de code ne devrait pas être la première option lorsque le thème fournit déjà un paramètre de favicon.

Quelle doit être la taille d’un favicon Shopify ?

Shopify recommande 32 × 32 pixels pour un favicon. Sa documentation d'aide identifie également 16 × 16 pixels comme taille idéale de favicon et explique que les images plus grandes peuvent être réduites à 32 × 32 pixels lors du téléchargement.

La priorité pratique ne consiste pas simplement à choisir un chiffre. L'image doit rester reconnaissable après avoir été affichée à la taille d'un favicon. Par exemple, une icône de 32 × 32 pixels contenant le nom complet d’une entreprise peut techniquement convenir mais rester impossible à lire. Un symbole simple avec un fort contraste peut fonctionner bien mieux.

Comment créer un Favicon pour Shopify ?

Vous disposez de plusieurs options en fonction des atouts de marque que vous possédez déjà.

Créez une favicon à partir de votre logo

Commencez par la partie la plus reconnaissable de votre logo. Un logo horizontal contenant un symbole et un long nom d'entreprise doit généralement être simplifié plutôt que réduit proportionnellement jusqu'à ce que le texte devienne illisible. Utilisez le symbole seul ou combinez une ou deux initiales reconnaissables.

Créer un favicon à partir des initiales

Si votre entreprise n'a pas d'icône distincte, créez un simple favicon utilisant une ou deux lettres. Par exemple, N.-É. pourrait représenter une marque appelée North Star. Utilisez une police claire, un espacement suffisant et un contraste fort.

Convertir un PNG existant en favicon

Si vous disposez déjà d’une image PNG carrée, vous pouvez la convertir en illustration prête pour les favicon avant de la télécharger. Un outil tel que PNGversFavicon.com peut convertir un PNG en favicon, ce qui est utile lorsque vous avez déjà une image de marque mais que vous avez besoin d'une version favicon dédiée.

Après la conversion, inspectez l'icône résultante en petite taille avant de la télécharger sur Shopify.

Créez un favicon spécifiquement pour l'affichage sur petit écran

Ne vous contentez pas de réduire votre logo en taille réelle sans vérifier le résultat. Supprimez les éléments inutiles, augmentez le contraste si nécessaire et assurez-vous que la partie importante de l'icône reste visible. Le favicon est réussi lorsqu'un visiteur peut identifier votre marque à partir de la petite icône sans avoir besoin de zoomer.

Comment vérifier si votre Favicon Shopify fonctionne ?

Après avoir enregistré le favicon, vérifiez-le sur la vitrine en direct.

• Vérifiez l'onglet du navigateur : Ouvrez la boutique publiée et regardez à côté du titre de la page dans l'onglet de votre navigateur. Shopify identifie l'onglet du navigateur comme l'un des principaux endroits où apparaît une favicon.
• Vérifiez l'historique du navigateur : Visitez une autre page, revenez à votre boutique et vérifiez les entrées de l'historique du navigateur. Shopify répertorie l'historique du navigateur comme un autre emplacement où une favicon peut apparaître.
• Vérifiez un favori : Ajoutez le magasin à vos favoris et vérifiez si le favicon apparaît à côté du signet. Shopify identifie spécifiquement les magasins mis en signet comme un autre emplacement où le favicon peut s'afficher.
• Testez une fenêtre privée ou incognito : Si l'ancien favicon est toujours visible dans votre navigateur habituel, ouvrez une fenêtre privée ou incognito et visitez la boutique en direct. Cela permet de distinguer un problème de cache du navigateur d'un problème de configuration Shopify.
• Testez un autre navigateur : Ouvrez la boutique dans un autre navigateur de bureau. Si la nouvelle icône apparaît dans un navigateur mais pas dans un autre, la mise en cache du navigateur ou le comportement spécifique au navigateur est une explication plus probable qu'un échec de téléchargement Shopify.
• Vérifiez le comportement mobile : Ne présumez pas que les navigateurs de bureau et mobiles afficheront le favicon de la même manière. Plus important encore, distinguez la vitrine en direct des interfaces d'administration de Shopify. Shopify indique que les favicons n'apparaissent pas dans l'aperçu de l'éditeur de thème lui-même.

Pourquoi mon favori Shopify ne s'affiche-t-il pas ?

Plusieurs problèmes différents peuvent produire le même symptôme.

Comment réparer une favicon Shopify qui ne se met pas à jour ?

Effectuez ces vérifications dans l’ordre :

1. Ouvert Boutique en ligne > Thèmes.
2. Confirmez que vous modifiez le bon thème.
3. Ouvert Paramètres du thème.
4. Vérifiez le Icône de favori ou Logo réglage.
5. Confirmez que la bonne image est sélectionnée.
6. Cliquez Enregistrer.
7. Ouvrez la vitrine publiée, pas l'éditeur de thème.
8. Testez le site dans une fenêtre de navigateur privée ou incognito.
9. Testez un autre navigateur.
10. Vérifiez à nouveau le favicon dans l'onglet du navigateur.

Cette séquence permet d'identifier si le problème vient des paramètres Shopify, du thème sélectionné ou de la mise en cache du navigateur.

Comment modifier ou remplacer un favicon Shopify ?

Le remplacement d'un favicon utilise les mêmes paramètres de thème que le téléchargement initial.

• Connectez-vous à votre interface administrateur Shopify.
• Accédez à Boutique en ligne > Thèmes.
• Recherchez le thème que vous souhaitez mettre à jour.
• Cliquez sur Modifier le thème/Personnaliser.
• Ouvrez les paramètres du thème.
• Cliquez sur Logo ou Favicon, selon votre thème.
• Dans la section Image Favicon, cliquez sur Sélectionner une image.
• Choisissez le favicon de remplacement ou téléchargez une nouvelle image.
• Cliquez sur Terminé.
• Cliquez sur Enregistrer.
• Ouvrez la boutique en direct et vérifiez la nouvelle icône.

La documentation actuelle de Shopify confirme ce flux de travail et la variation Logo/Favicon dépendante du thème.

Comment supprimer un favicon Shopify ?

Le processus de suppression dépend des contrôles exposés par votre thème.

Ouvert :

Boutique en ligne → Thèmes → Modifier le thème/Personnaliser → Paramètres du thème

Ouvrez ensuite la zone Favicon ou Logo et recherchez le contrôle associé à l'image favicon actuellement sélectionnée.

Si votre thème propose une option de suppression ou d'effacement, utilisez-la et enregistrez le thème. N'ajoutez pas de code personnalisé simplement pour supprimer un favicon lorsque votre thème propose déjà un paramètre pour le gérer.

Pouvez-vous ajouter une favicon Shopify avec un code personnalisé ?

Oui, mais la plupart des magasins doivent d'abord utiliser le paramètre de thème intégré.

L'architecture de thème de Shopify prend en charge les paramètres globaux via settings_schema.json. Un thème peut définir un paramètre d'image favicon et accéder à sa valeur via l'objet Paramètres Liquid. La documentation du développeur de Shopify comprend un exemple qui restitue un favicon PNG à partir de settings.favicon.

Pour un thème personnalisé, le code peut donc faire partie de l'implémentation. Cependant, pour une boutique Shopify normale, il n'est pas nécessaire de modifier Liquid uniquement pour ajouter un favicon lorsque le thème fournit déjà le paramètre.

Quand devriez-vous utiliser les paramètres du thème au lieu du code ?

Utilisez le paramètre de thème intégré lorsqu'il est disponible. Il est plus facile à gérer, moins susceptible d'introduire des erreurs de thème et peut être modifié ultérieurement sans modifier les fichiers Liquid.

Que devez-vous vérifier avant de modifier le code du thème ?

Si vous devez modifier le code, identifiez d'abord le thème publié, l'implémentation du favicon du thème, le fichier de mise en page pertinent, si un paramètre de favicon global existe déjà et si le thème est mis à jour ou géré par un autre développeur. Ne collez pas le code de favicon dans un fichier de thème aléatoire sans comprendre comment le thème gère les paramètres globaux.

Erreurs courantes de Shopify Favicon à éviter

• En utilisant l'intégralité de votre logo : Un logo long peut devenir illisible lorsqu'il est réduit aux dimensions d'un favicon.
• Utiliser un petit texte : Une ou deux initiales peuvent fonctionner. Un slogan complet ne le sera généralement pas.
• Utiliser une image compliquée : Une simple marque de marque est plus facile à reconnaître qu’une illustration détaillée.
• Utiliser une image non carrée : Commencez par une illustration carrée afin que le favicon ne repose pas sur un recadrage ou une mise à l'échelle agressive.
• Utiliser une source de mauvaise qualité : Une image source floue produira un mauvais favicon même après le redimensionnement.
• Oublier de sauvegarder : Sélectionner une image ne suffit pas. Enregistrez les modifications du thème.
• En cochant uniquement l'éditeur de thème : Le favicon peut ne pas apparaître dans l'aperçu de l'éditeur de thème de Shopify. Testez plutôt la vitrine publiée.
• Vérification d'un seul navigateur : Un favicon obsolète dans un navigateur ne signifie pas automatiquement que la configuration de Shopify est erronée.
• Tester un thème inédit : Vous pouvez personnaliser un thème qui n'est pas actuellement en ligne, mais cela ne modifie pas le favicon que les visiteurs voient sur votre vitrine publiée.
• Modification du code inutilement : Si le thème dispose déjà d'un paramètre de favicon, utilisez-le au lieu de modifier Liquid.

FAQ sur les favicon Shopify

Comment créer un favicon avant de le télécharger sur Shopify

Si vous n'avez pas encore de favicon, utilisez ce flux de travail simple :

1. Commencez par votre logo, votre symbole de marque ou vos initiales.
2. Créez une version carrée du motif.
3. Supprimez les détails qui disparaîtront dans les petites tailles.
4. Utilisez un fort contraste entre l'icône et l'arrière-plan.
5. Préparez l'image autour de la taille de pixel recommandée par Shopify de 32 × 32 ou utilisez une source propre et plus grande que Shopify peut réduire.
6. Convertissez un PNG existant avec un outil favicon si nécessaire.
7. Téléchargez l'image terminée via les paramètres du thème.
8. Enregistrez le thème.
9. Testez le favicon sur la vitrine en direct.

Conclusion

L'ajout d'un favicon à Shopify est avant tout une tâche d'éditeur de thème. Ouvrez la boutique en ligne > Thèmes, modifiez le thème concerné, ouvrez les paramètres du thème, recherchez Favicon ou Logo, sélectionnez votre image et enregistrez le thème. Utilisez une simple icône carrée qui reste reconnaissable à une très petite taille. Lorsque le nouveau favicon n'apparaît pas immédiatement, vérifiez la boutique publiée dans une fenêtre privée ou un autre navigateur avant de modifier à nouveau les paramètres Shopify. La mise en cache du navigateur peut faire apparaître inchangée une favicon mise à jour avec succès.