Comment ajouter un Shopify Favicon à votre Shopify Boutique

Apprenez les bases de ce qu'est un Shopify Favicon et comment en mettre un sur votre boutique en ligne.

Si vous vous abonnez à un service à partir d'un lien sur cette page, Reeves and Sons Limited peut gagner une commission. Voir notre déclaration éthique.

L'identité de votre boutique en ligne rassemble plusieurs éléments tels que le logo, les couleurs du site et votre du matériel de marketing. Cette identité renforce votre marque globale et crée un rappel sain pour vos clients, évoquant des sentiments de confort et de fiabilité lorsqu'ils voient les images et les couleurs de votre marque.

Bien que de petite taille, le Favicon s'inscrit également dans cette stratégie de marque. Dans ce tutoriel, nous allons vous montrer comment créer et ajouter une favicon à votre Shopify Boutique, complétant votre apparence en ligne et facilitant la reconnaissance de votre boutique lors de la visite des clients.

Qu'est ce qu'un Shopify Favicon ?

A Shopify Favicon, ou n'importe quel Favicon d'ailleurs, est une petite icône pour votre site Web qui apparaît sur l'onglet du navigateur à côté du nom de votre site Web.

La barre d'adresse du navigateur est la zone la plus courante pour afficher le site Favicon, mais elle apparaît également aux emplacements suivants:

  • Applications de la barre d'outils
  • les signets du MSEPSH
  • Résultats de l'historique
  • Barres de recherche
  • Parfois, lorsqu'il est partagé sur les réseaux sociaux

Essentiellement, chaque fois que le navigateur doit afficher un lien vers votre site Web et qu'il n'y a pas beaucoup de place pour d'autres contenus, il remplace votre logo habituel en taille réelle par le Favicon.

Shopify Exemples de favicon

Par défaut, Shopify ajoute le Shopify logo pour votre Favicon, nous devons donc changer cela.

Un bon favicon est souvent une version plus petite de votre logo, mais parfois ils varient un peu parce que vous voulez vous assurer qu'ils sont visibles, occupent tout l'espace alloué et ajoutez un peu de couleur à côté du nom de votre site Web.

Par défaut, tous les navigateurs prennent en charge les favicons de taille 32 × 32 pixels. C'est une image plutôt petite, mais avec l'aide de certains générateurs en ligne, vous pouvez créer la vôtre Shopify Favicon pour votre site Web. De plus, les images plus grandes sont de toute façon réduites, vous n'avez donc pas nécessairement besoin de les obtenir exactement à 32 × 32.

Un Favicon a un peu de sens pour les magasins en ligne sur Shopify car ils sont faciles à ajouter et il est important de renforcer l'identité de votre marque en tant que vendeur en ligne. Certains affirment également que cela aide au référencement.

Continuez à lire pour en savoir plus sur la façon d'ajouter Favicon à votre Shopify .

Comment ajouter un Favicon à votre Shopify Boutique – Guide d’étape rapide

Comme mentionné, lors de l'exécution d'un site via Shopify il ajoute automatiquement un Shopify logo comme Favicon de votre site. Il n'y a rien de mal à cela, mais il est beaucoup plus professionnel et axé sur la marque d'inclure votre propre logo. Voici les étapes à suivre :

Étape 1 : Accédez à votre Shopify Tableau de bord

Par conséquent, allez à votre Shopify tableau de bord et cliquez sur Boutique en ligne sous Canaux de vente.

Étape 2 : Accédez aux paramètres du thème

Accédez à vos thèmes et cliquez sur le bouton Personnaliser à côté de votre thème actuel. Bien que les paramètres changent d'un thème à l'autre, tous les plus récents Shopify les thèmes ont une section pour changer le Favicon.

boutique en ligne

Dans le Shopify personnalisateur, faites défiler vers le bas de la liste sur la gauche et cliquez sur Paramètres du thème.

réglage des thèmes

Étape 3 : Sélectionnez le bouton Favicon

Dans la nouvelle section, recherchez et sélectionnez le bouton Favicon.

icône de favori - Shopify Favicon

Cela révèle un bouton pour sélectionner une image ou explorer des images gratuites. Je ne peux pas imaginer qu'ils aient des images gratuites qui correspondent à votre logo, il est donc préférable de cliquer sur Sélectionner une image pour télécharger une image personnalisée à partir de votre ordinateur.

sélectionner l'image

Étape 4 : Téléchargez votre favicon

Choisissez le fichier Favicon et téléchargez-le sur Shopify.

Après cela, vous verrez un aperçu de votre icône Favicon. Pour rendre les modifications permanentes, sélectionnez le bouton Enregistrer dans Shopify.

bouton Enregistrer

Pour voir votre Shopify favicon en action, allez sur le frontend de votre site Web et regardez l'onglet actuel du navigateur. Vous devriez voir le Favicon à côté du titre de votre site.

exemple Shopify Favicon

Conseils pour créer votre favicon

Bien qu'il semble facile de générer une petite icône, il est important de bien faire les choses, étant donné que les clients voient le Favicon chaque fois qu'ils visitent votre site. Il est également facile de créer un Favicon flou ou qui ne remplit pas tout l'espace, ce qui va à l'encontre de l'objectif du Favicon puisqu'il n'est pas si visible à l'œil nu.

Pour résoudre tout problème, voici quelques conseils pour créer votre Shopify Icône de favori :

  • Commencez votre conception au-delà de 32 × 32 et réduisez-la si nécessaire. Vous aurez forcément une image plus floue si vous essayez d'étirer une image plus petite dans l'espace. Par exemple, prendre une image 32×32 de Hatchful et essayer de l'étirer pour se débarrasser de la partie écrite du logo peut causer des problèmes.
  • Vous ne pouvez généralement pas simplement prendre votre logo actuel et vous attendre à ce qu'il fonctionne parfaitement en tant que Favicon.
  • Les favicons ont fière allure lorsque vous couvrez chaque pixel de l'espace fourni. Vous n'avez pas beaucoup de place, vous devriez donc profiter de chaque square pixel dans l'espace 32 × 32.
  • Supprimez tout le texte, car il est difficile à lire dans un favicon. L'exception est si votre élément de logo principal est une grande lettre.
  • Choisissez des couleurs unies et plus vives. Les logos simples et caricaturaux fonctionnent le mieux.
  • Regardez les Favicons de vos marques préférées. Qu'ont-ils fait pour s'assurer que leur image en ligne passe avec un favicon?
  • Envisagez de remplir tout l'espace avec un arrière-plan de couleur unie ou de créer un arrière-plan transparent avec l'élément de premier plan étiré de sorte qu'il touche juste les bords. Vous remarquerez que de nombreuses grandes marques ont des arrière-plans transparents pour leurs favicons.
  • Le dossier ICO format fonctionne bien pour les petites images. Si vous n'êtes pas familier, utilisez un PNG pour les arrière-plans transparents ou un JPG pour les favicons haute résolution avec des arrière-plans solides.

Comment générer un Favicon pour votre Shopify Boutique

Vous avez la possibilité de concevoir un Favicon dans n'importe quel logiciel de conception de votre choix. Si vous préférez Photoshop, allez-y. Si vous préférez un logiciel gratuit comme GIMP ou Pixlr, tous fonctionnent tant que vous respectez les dimensions requises de 32 × 32.

Vous avez également la possibilité de créer un Favicon avec Shopify's Hatchful Logo et Free Favicon Generator. Voir notre guide complet en utilisant Éclos pour créer un logo.

télécharger le logo

Une fois que le créateur de logo a fait son travail, il vous fournit un fichier rempli de plusieurs logos formats, dont l'un est un Favicon.

Shopify Fichier Favicon

Gardez à l'esprit que de nombreux logos que vous créez avec Éclos (lisez notre Examen hachuré) utilisez un espace blanc autour du logo, vous devrez donc peut-être l'ajuster pour que le graphique couvre la majeure partie de l'espace. En général, j'ai trouvé que vous ne devriez utiliser le favicon Hatchful fourni que s'il a déjà l'air bien (il remplit la majeure partie de l'espace et n'a pas de petits éléments comme du texte).

Si ce n'est pas le cas, utilisez un logiciel d'édition tiers comme Photoshop ou Pixlr pour supprimer certains des éléments inutiles.

Important: Vous devez utiliser une version plus grande de l'image si vous prévoyez de l'étirer sur une toile pour découper du texte et des espaces blancs. Pour cela, j'ai utilisé Hatchful pour générer des logos, mais j'ai en fait pris l'un des grands logos (pas le fichier Favicon fourni) car je ne veux pas que le flou se produise lorsque je l'étire sur la toile 32 × 32.

Dans votre logiciel d'édition, choisissez un nouveau canevas avec la largeur et la hauteur réglées à 32.

32 par 32

Créez un calque pour la nouvelle image et assurez-vous que l'image est plus grande que le canevas 32 × 32, car vous pourriez l'étirer. Ensuite, téléchargez ou placez l'image dans le canevas.

Dans la capture d'écran suivante, j'ai agrandi le design Favicon afin de m'assurer qu'il correspond au square correctement. C'est flou, mais je sais que ça ira beaucoup mieux quand je ferai un zoom arrière.

grande version

Comme vous pouvez le voir, la version agrandie du Favicon dans le concepteur Pixlr a l'air bien. J'ai couvert la majeure partie de l'espace alloué, opté pour une icône de couleur vive et unie et supprimé tous les signes de texte plus petit.

version plus petite

La dernière étape consiste à télécharger le fichier. Vous pouvez choisir d'en faire un PNG transparent à ce stade. Mais pour ce tutoriel, je m'en tiens à un JPG haute résolution pour qu'il soit aussi net que possible. Et cela ne me dérange pas d'avoir un arrière-plan avec une couleur unie.

Télécharger - Shopify Favicon

Retournez à votre Shopify tableau de bord. Cliquez sur Boutique en ligne> Thèmes> Personnaliser.

Ensuite, allez dans Paramètres du thème> Favicon.

Téléchargez ce nouveau Favicon et cliquez sur le bouton Enregistrer dans le Shopify éditeur.

aperçu de l'image

Encore une fois, la principale façon de tester et d'afficher votre Favicon consiste simplement à ouvrir un onglet avec l'URL de votre site Web de page d'accueil. Comme vous pouvez le voir, le Favicon s'affiche bien et est en fait un peu meilleur que mon précédent Favicon, vu que celui-ci n'a pas rempli tout l'espace 32 × 32 fourni.

le produit final - Shopify Favicon

En conclusion

A Shopify Favicon ne prend pas plus de quelques minutes à concevoir et à ajouter à votre site, mais il fournit un merveilleux rappel à vos visiteurs sur quel site Web ils se trouvent. En outre, cela peut permettre aux internautes de trouver votre site Web dans leurs favoris et leurs historiques de navigation, étant donné qu'ils recherchent très probablement dans une longue liste d'autres sites lorsqu'ils parcourent ces sections.

Gardez à l'esprit qu'il ne faut pas se contenter d'une image floue ou illisible Shopify Image favorite. Si vous trouvez que le premier Favicon n'a pas l'air tout à fait correct, ou si vous souhaitez découper du texte ou ajouter un arrière-plan transparent, revenez au début et faites le bon choix. Bien que ce ne soit pas une bonne idée de ne pas avoir de favicon du tout, un favicon flou ou difficile à voir donne à votre marque un aspect non professionnel et quelque peu idiot.

Si vous avez des questions sur l'ajout de Favicons à Shopifyou faire le vôtre Shopify Favicon, faites-le nous savoir dans la section commentaires ci-dessous.

Joe Warnimont

Joe Warnimont est un écrivain basé à Chicago qui se concentre sur les outils de commerce électronique, WordPress et les médias sociaux. Lorsqu'il ne pêche pas ou ne pratique pas le yoga, il collectionne des timbres dans les parcs nationaux (même si c'est principalement pour les enfants). Découvrez le portfolio de Joe pour le contacter et voir les travaux passés.

Commentaires Réponses 0

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *

Note *

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..