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.
Dans cet article
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 a besoin d'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.
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 minuscule, 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 réduites de toute façon, 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 votre identité de marque en tant que vendeur en ligne. Certains affirment également que cela aide avec le 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.
Dans le Shopify personnalisateur, faites défiler vers le bas de la liste sur la gauche et cliquez sur Paramètres du thème.
Étape 3 : Sélectionnez le bouton Favicon
Dans la nouvelle section, recherchez et sélectionnez le bouton 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.
É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.
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.
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 viennent sur 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 du but du Favicon car il n'est pas si visible à l'œil.
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 poser 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 sont superbes lorsque vous couvrez chaque pixel de l'espace fourni. Vous n'avez pas beaucoup de place, vous devez donc tirer parti de chaque pixel carré 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é pour qu'il touche juste les bords. Vous remarquerez que de nombreuses grandes marques ont des arrière-plans transparents pour leurs Favicons.
- Le format de fichier ICO fonctionne bien pour les images de petite taille. Si vous ne le connaissez pas, utilisez un PNG pour les arrière-plans transparents ou un JPG pour les favicons haute résolution avec des arrière-plans unis.
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, ils fonctionnent tous tant que vous vous en tenez aux dimensions requises de 32 × 32.
Vous avez également la possibilité de créer un Favicon avec ShopifyLogo Hatchful et générateur de favicon gratuit. Voir notre guide complet en utilisant Éclos pour créer un logo.
Une fois que le créateur de logo a terminé son travail, il vous fournit un fichier rempli de plusieurs formats de logo, dont un 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 ne contient 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.
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 du Favicon afin de m'assurer qu'il s'adapte correctement au carré. C'est flou, mais je sais que ce sera beaucoup plus joli lorsque je dézoomerai.
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 solide et supprimé tous les signes de texte plus petit.
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 afin qu'il soit aussi net que possible. Et cela ne me dérange pas d'avoir un arrière-plan avec une couleur unie.
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.
Encore une fois, le principal moyen de tester et d'afficher votre Favicon consiste simplement à ouvrir un onglet avec l'URL de votre site Web. Comme vous pouvez le voir, le Favicon apparaît bien et est en fait un peu meilleur que mon Favicon précédent, vu que celui-ci ne remplissait pas tout l'espace 32 × 32 fourni.
En conclusion
A Shopify Favicon ne prend que quelques minutes à concevoir et à ajouter à votre site, mais il fournit un merveilleux rappel à vos visiteurs sur le site Web sur lequel ils se trouvent. En outre, cela peut permettre aux internautes de trouver votre site Web dans leurs signets et dans l'historique de leur navigateur, étant donné qu'ils recherchent probablement dans une longue liste d'autres sites lorsqu'ils parcourent ces sections.
Gardez à l'esprit que vous ne devez pas vous contenter d'une image floue ou illisible Shopify Image Favicon. Si vous trouvez que le premier Favicon ne semble pas tout à fait correct, ou si vous souhaitez découper du texte ou ajouter un arrière-plan transparent, revenez au début et faites les choses correctement. 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 un peu ridicule.
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.
Description Réponses 0