Offre à durée limitée - Économisez jusqu'à 80 %

+ domaine Gratuit pour 1 an

L'offre se termine dans:

06 :

01 :

33 :

51

blog Zyro

Tous les sujets
Astuces pour PME Blog eCommerce Commerce en ligne Essentiels du web Idées de Business Inspirant Inspiration L'essentiel Marketing Réseaux sociaux

Comment créer un favicon

Il s’agit d’un petit détail qui fera ressortir votre entreprise auprès de vos clients, vous ne devez pas oublier l’humble favicon lorsque vous construisez une marque.

Créer un favicon demande un minimum d’efforts.

Vous pouvez donc lancer votre site web sans en avoir un, mais il n’y a aucune raison de ne pas inclure un favicon dans votre to-do liste de marketing.

Alors, qu’est-ce qu’un favicon ?

Les favicons sont les petites icônes affichées dans les onglets et sur les listes de favoris ou de favoris des navigateurs tels que Chrome, Mozilla et Safari.

Le mot “favicon” est une version abrégée de “favorite icon”, mais il porte aussi d’autres noms :

  • Icône de raccourci
  • Icône du site web
  • Icône de favoris
  • Toutefois, ils ont tous la même signification.

Apparus en 1999, les favicons ont été présentés aux internautes avec le lancement d’Internet Explorer 5.

Les entreprises utilisent généralement une version réduite de leur logo comme favicon, réduite à une taille de 16×16 pixels.

Elles sont utilisées comme des signifiants visuels utiles pour les utilisateurs, afin qu’ils puissent naviguer facilement sur plusieurs sites web.

Imaginons que vous achetiez de nouveaux vêtements. Imaginez que la douzaine d’onglets que vous avez ouverts sur votre navigateur représentent un centre commercial.

Ce que vous voyez est une rangée de petits logos, de sorte que lorsque vous comparez les articles et les prix, il est facile de passer d’un magasin à l’autre.

Bien sûr, il y a des méta-titres à côté de chaque favicon que vous pourriez lire, mais qui a le temps de le faire constamment ?

Comment créer un favicon

Un homme qui dessine

Maintenant que vous savez ce qu’est un favicon, vous en voudrez probablement un pour votre propre site Web.

C’est l’un des moyens les plus simples de faire en sorte que les internautes se souviennent de votre entreprise, et cela vous donnera également un aspect professionnel.

Et si vous voulez savoir comment créer un favicon, il n’y a pas grand-chose à faire.

Vous avez même le choix. Voulez-vous le faire vous-même ou demander à un générateur de favicons de faire le travail pour vous ?

Comme il s’agit d’une compétence utile à acquérir, nous allons d’abord examiner les étapes à suivre pour attribuer manuellement un favicon à votre site.

1. Creez une image

Lorsqu’il s’agit de trouver une icône appropriée pour un site web, le logo de la marque est l’endroit le plus évident à regarder.

Mais vous pouvez choisir n’importe quelle image pour représenter votre site. Veillez simplement à ce que :

  • Elle soit cohérente avec votre image de marque. Utilisez les mêmes couleurs, la même typographie et la même mise en forme.
  • Elle se distingue. Vos clients doivent pouvoir se souvenir facilement de l’image.
  • Elle ne copie pas une autre icône ou image. Elle ne doit pas être confondue avec une autre marque.

Vous pouvez concevoir une image de favicon en utilisant un éditeur comme Photoshop ou un logiciel libre comme Canva. Si le budget n’est pas un problème, vous pouvez même faire appel à un designer professionnel.

Il y a quelques éléments de conception qui doivent être complètement évités si vous voulez que votre favicon soit élégant, professionnel et mémorable.

Veillez à ne pas enfreindre ces règles de conception tacites :

Il y a quelques éléments de conception qui doivent être complètement évités si vous voulez que votre favicon soit élégant, professionnel et mémorable.

Veillez à ne pas enfreindre ces règles de conception tacites :

  • Pas de photos. À la taille que doit avoir votre favicon pour tenir dans un onglet de navigateur, aucune photo ne sera suffisamment claire pour être belle ou même mémorable.
  • Pas de mots. Vous pouvez tout à fait faire figurer une, deux ou même trois lettres dans votre favicon, surtout si elles font partie de votre logo, mais des mots entiers ? Oubliez cela.
  • Pas d’éléments de marketing. Bien qu’elle soit idéale pour l’image de marque et la cohérence de l’image, une favicon n’est pas l’endroit idéal pour les outils promotionnels tels que les bannières “nouveau” ou “vente”.

Utilisez la bonne taille

Alors que les onglets de navigateur affichent les favicons en 16×16 pixels, ils peuvent aussi être affichés sur un site en 32×32, voire 64×64 pixels.

Veillez à ce que votre favicon soit la plus belle possible, quel que soit le site sur lequel elle se trouve et créez-la dans un format plus grand. Elle peut toujours être réduite à 16×16 pixels.

Utilisez le bon format

Bien qu’auparavant les favicons devaient être enregistrés au format .ico, les fichiers .png sont désormais acceptés. Vous pouvez utiliser des outils comme faviconer.com pour convertir les fichiers au format .ico.

Cependant, si vous souhaitez que votre favicone s’affiche en tant qu’icône d’onglet épinglé dans Safari, vous devez l’enregistrer au format .svg.

Utilisez le bon style

N’oubliez pas que les favicons ne s’affichent pas uniquement dans les onglets du navigateur et dans les listes de favoris. Il sera également visible sur les appareils sans fil et les menus de raccourcis.

Par conséquent, créez deux versions de votre favicon : une en remplissage plein et une autre transparente. De cette façon, vous pouvez être sûr qu’elle sera belle partout où elle sera affichée.

2. Téléversez votre image sur votre site

Un homme qui travaille sur un ordinateur avec son chien

Une fois l’icône prête, l’étape suivante est relativement simple.

Il suffit de renommer votre fichier image .png ou .ico en “favicon” et de téléverser le fichier dans le répertoire racine de votre site web.

Si vous avez créé un fichier .png, vous devrez probablement téléverser plusieurs fichiers pour répondre à toutes les exigences de taille.

C’est là que la conversion de votre favicon au format .ico est utile. Un fichier .ico peut contenir plus d’une icône, ce qui signifie que vos différentes tailles peuvent être téléversées sur votre site en une seule fois.

3. Ajoutez un code HTML de base

Il est fort probable que vous n’ayez pas besoin d’ajouter de code pour aider les navigateurs modernes à trouver votre favicon. La plupart d’entre eux détecteront automatiquement favicon.png ou favicon.ico et le définiront comme votre icône.

Cela dit, il vaut la peine d’ajouter un code de base pour s’assurer que l’icône est visible depuis n’importe quel navigateur.

Vous pouvez mettre en place un code HTML “link rel= shortcut icon” en ouvrant le fichier header.php et en le tapant sous ou après la balise :

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

N’oubliez pas de changer le type d’extension de fichier en fonction du format sous lequel vous avez enregistré votre favicon.

4. Rendez-le polyvalent

Logo d'Apple

Un nombre croissant de transactions de commerce électronique s’effectue sur des appareils mobiles. Si vous pouvez optimiser votre site pour une utilisation sans fil, vous devez absolument le faire.

Bien que tout le monde ne possède pas un appareil Apple, vous devrez créer une icône Apple Touch si vous voulez que votre favicon fonctionne correctement pour ces utilisateurs.

Les icônes Apple Touch représentent les sites web qui ont été enregistrés sur l’écran d’accueil d’un téléphone ou d’une tablette Apple.

Tous les sites n’ont pas optimisé leurs favicons pour l’utilisation d’Apple Touch. Dans ce cas, lorsqu’un utilisateur enregistre l’URL du site sur son écran d’accueil, une version miniature de la page de destination s’affiche.

Mais si vous voulez avoir l’air super chic, vous pouvez créer et téléverser un fichier d’icône spécialement conçu pour être utilisé sur un appareil Apple Touch.

Pour commencer, le fichier doit être fourni au format .png. Il est également préférable de créer l’icône à une taille maximale de 180×180 pixels, afin qu’elle soit parfaite sur toutes les tailles d’écran.

Enfin, il est utile d’ajouter un code HTML distinct à votre site web pour vos icônes Apple Touch. Le codage devrait ressembler à ceci :

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Comment rendre ça encore plus facile

J’espère que vous vous souvenez de la partie de cet article qui mentionnait deux options pour créer des favicons pour votre propre site.

Et vous vous demandez peut-être comment la deuxième option pourrait être plus simple que la première – après tout, celle-ci était déja assez simple.

C’est là que pourrait intervenir le ‘ créateur de sites web.

Conçu pour vous faciliter la vie à tous égards, du moins lorsqu’il s’agit de créer un site web réussi, un créateur de sites web convenable est en général accompagné d’un générateur de favicons.

Avec un outil comme le générateur de favicons de Zyro, vous disposez de toutes les informations dont vous avez besoin pour savoir comment créer un favicon sans avoir à passer par les étapes supplémentaires du codage, de la conversion et de la recherche d’un designer pour faire la partie la plus amusante du travail.

Passons donc en revue les étapes de la création et du téléversement d’un favicon sur votre site à l’aide d’un générateur, en prenant Zyro comme exemple.

Favicon generator home screenshot Zyro

1. Choisissez un Template

Vous pouvez choisir l’un des modèles prédéfinis de Zyro ou téléverser votre propre image personnalisée.

2. Personnalisez à la perfection

Utilisez les outils à votre disposition pour modifier la couleur, la disposition et le texte de l’image ou du modèle.

3.Téléchargez-le et lancez-vous

Vous avez terminé – il est temps de télécharger votre favicon sous forme de fichier .png ou .ico et de le publier sur votre site.

Pour téléverser votre favicon généré sur votre site Zyro, il n’y a aucun travail de codage, aucune conversion nécessaire et vous pouvez donc le faire avec seulement quelques clics.

Il suffit de se rendre dans l’éditeur Zyro. Si vous avez plusieurs sites web, choisissez le site sur lequel vous souhaitez téléverser un favicon.

Sélectionnez Paramètres généraux dans le menu déroulant des paramètres, localisez Favicon et élargissez les options qui vous sont proposées.

Cliquez sur Parcourir les fichiers pour trouver l’image de favicon que vous avez générée avec l’outil de Zyro, et double-cliquez pour la téléverser.

Ensuite, regardez l’aperçu de la façon dont votre icône apparaîtra sur les navigateurs.

Si vous êtes satisfait, cliquez sur Enregistrer les modifications et votre favicon est chargé.

Écrit par

L'avatar de l'auteur

Roua

Passionnée par l'écriture et les affaires, Roua a décidé de fusionner les deux dans ce qu'elle fait. Lorsqu'elle n'écrit pas de billets de blog sur le commerce électronique et les affaires, elle aime faire du yoga et apprendre de nouvelles langues.

Rejoignez la conversation

Votre adresse mail ne sera pas publié. Tous les champs sont requis.