Les favicons sont un élément important du marketing numérique. Ils aident à identifier visuellement votre entreprise dans le vaste espace Internet. L'expérience utilisateur sur votre site Web peut être améliorée et la reconnaissance de la marque peut être augmentée par ces éléments minuscules mais puissants. Dans cet article, vous en apprendrez plus sur ce qu'est l'icône d'image favicon, y compris leur taille, comment en créer une pour votre site Web à l'aide d'un générateur, comment elles affectent le référencement et comment en ajouter une en utilisant HTML.
Qu'est-ce qu'un favicon?
Un favicon est une petite icône d'image de 16 × 16 pixels qui sert de marque à votre site Web. Son objectif majeur est de permettre aux utilisateurs de trouver plus facilement votre page lorsqu'ils ont plusieurs onglets ouverts.
Un favicon fonctionne mieux comme une image simple ou un à trois caractères de texte en raison de sa petite taille. Les favicons et les logos sont parfois identiques mais il ne faut pas les confondre. Le favicon peut devoir être encore plus petit ou faire partie du logo original d'une entreprise en raison de sa petite taille et de sa faible résolution.
Où pouvez-vous voir l'icône de l'image Favicon ?
Le favicon de votre site Web peut être situé à côté de tout élément d'identification. Cela inclut les barres de recherche, les résultats de l'historique, les applications de la barre d'outils, les signets et les onglets.
Les favicons peuvent être trouvés sur :
- La barre de recherche.
- Historique des recherches.
- Applications de la barre d'outils.
- Signets.
- Recommandations pour votre barre de recherche.
- Le menu déroulant de vos signets.
En en utilisant un, vous pouvez vous assurer que les gens peuvent rapidement reconnaître votre site Web. Ces favicons peuvent aider les visiteurs en ligne à identifier immédiatement les pages qu'ils ont visitées.
Pourquoi l'icône Favicon est-elle importante ?
Une étape simple mais cruciale dans la création d'un site Web d'entreprise consiste à créer une icône favicon. Cela donne à votre site Web plus d'autorité et améliore à la fois votre réputation sur Internet et la confiance des clients potentiels.
Ils servent de premier repère visuel pour le site Web, permettant une identification rapide et facile pour les internautes et rassemblant tous les différents éléments du navigateur pour créer une expérience de navigation unifiée et bien marquée.
Créer un favicon
Lors de la création et de la conception d'une icône favicon pour votre site Web, plusieurs facteurs doivent être pris en compte. Bien que minuscule et simple, il peut (et devrait) avoir un impact significatif. Étant donné que les visiteurs associeront votre marque à votre favicon, il est crucial de créer la meilleure version de cette image. Pour créer votre icône d'image favicon, gardez à l'esprit ce qui suit :
#1. Utiliser l'espace à bon escient
Parfois, un favicon ne peut pas être simplement une réplique réduite du logo de votre entreprise. La taille entière de votre favicon doit être prise en compte. Vous devez vous en tenir à 16px puisque tous les navigateurs le permettent.
#2. Simplicité
Même si le favicon de votre marque sert de logo, vous devez essayer de garder votre conception aussi simple que possible. Les favicons les plus simples fonctionnent le mieux. En raison de la petite taille du favicon et de l'utilisation de designs simples, les couleurs sont essentielles pour attirer l'attention des clients potentiels et se démarquer. Le favicon n'apparaîtra encombré et désorganisé que s'il y a trop de détails.
#3. Identité de marque
Votre favicon doit transmettre visuellement aux utilisateurs ce que représente votre entreprise puisqu'il s'agit de la représentation visuelle de votre marque. Cela leur explique immédiatement ce qu'est votre marque et ce qu'elle accomplit.
Essayez d'être inventif, même s'il est difficile de le faire avec un design aussi petit et simple.
#4. Abréger
Trouver l'image idéale n'est peut-être pas faisable pour ce que fait votre entreprise. L'utilisation de la première lettre du nom de votre entreprise ou des acronymes est une solution typique pour cela. Vous pouvez également décider de raccourcir le nom de votre entreprise. Essayez différentes variantes et choisissez celle qui correspond le mieux à vos besoins.
#5. Coordination des couleurs
Le choix des couleurs doit également être pris en compte. Les couleurs contrastées permettent à l'œil de distinguer facilement les formes et la caractéristique principale de votre favicon. Parce que les favicons sont si peu nombreux, vous devez représenter votre entreprise auprès de l'utilisateur, et le choix des couleurs peut être important. N'oubliez pas que chaque navigateur diffère légèrement l'un de l'autre. Certains, par exemple, ont un fond gris, noir ou blanc qui sera recouvert par votre favicon.
Générateur de Favicon
Les meilleurs générateurs de favicons sur Internet sont répertoriés ci-dessous. Vous venez de télécharger votre image favicon en utilisant les fonctionnalités disponibles pour le générateur de favicon. L'image est ensuite convertie par le logiciel générateur dans les formats favicon appropriés et rendue accessible au téléchargement. Cela ne prendra pas longtemps pour ce processus.
ICO et PNG sont les formats de fichiers acceptés pour les favicons.
- Tous les navigateurs, y compris Internet Explorer, sont compatibles avec ICO.
- Un autre format populaire est le PNG. Le principal inconvénient est qu'un fichier PNG ne sera pas pris en charge par Internet Explorer.
Idéalement, vous devriez pouvoir obtenir votre favicon dans les deux formats à partir du générateur que vous sélectionnez.
#1. Favikon
Il est simple de créer un favicon dans Favikon. Pour créer une icône, téléchargez simplement une image, recadrez-la et obtenez-la au format ICO ou PNG. Favikon n'autorise qu'une seule taille, qui est de 16 × 16 pixels, ce qui est un inconvénient.
#2. Favicon.io
Vous pouvez créer un favicon avec Favicon.io à partir de zéro, une image, un logo ou un emoji. Avant de le télécharger, vous pouvez le visualiser en trois tailles différentes. Le résultat est disponible en téléchargement aux formats ICO et PNG dans une variété de tailles.
#3. Favicon.ico & Générateur d'icônes d'application
Vous pouvez télécharger une image PNG ou JPG et utiliser cette application gratuite pour la convertir aux formats ICO et PNG dans une variété de tailles. Vous enregistrerez votre favicon dans le répertoire racine de votre site Web une fois que vous l'aurez généré dans le format souhaité. Le favicon peut ensuite être ajouté à votre site Web en créant un lien HTML pointant vers le fichier.
Cela s'applique aux propriétaires de sites Web, qu'ils aient utilisé un cadre de développement comme Bootstrap CSS ou développé leur site à partir de zéro, il est crucial de le noter. La procédure sera très différente selon que vous utilisiez un constructeur de site Web ou un CMS comme WordPress ou des alternatives WordPress.
Taille des favoris
Un favicon doit avoir une taille de 16 × 16 pixels. Ils s'affichent ainsi dans les barres d'adresse, les listes de signets et les onglets du navigateur. Créez votre favicon en plusieurs tailles, idéalement. Sur les écrans plus grands, vous verrez des versions correctement mises à l'échelle plutôt que la version allongée 16 × 16.
Les tailles de favicon les plus populaires et leurs utilisations spéciales sont présentées ci-dessous.
- 16×16 : La taille des favicons du navigateur.
- 32×32 : La taille des icônes de raccourci de la barre des tâches.
- 96×96 : La taille des icônes de raccourcis sur le bureau.
- 180×180 : La taille des icônes tactiles Apple.
- 300×300 : La taille requise par Squarespace.
- 512×512 : La taille requise par WordPress.
Les favicons sont-ils importants pour le référencement ?
Bien que les favicons ne soient pas directement responsables de votre référencement, ils sont indirectement responsables et constituent une technique cruciale pour augmenter votre position dans les moteurs de recherche. Voici quelques exemples de la façon dont l'utilisation d'un favicon peut améliorer votre référencement :
#1. Les sites Web conviviaux entraînent une utilisation accrue
La convivialité de votre site Web augmente indirectement ses rangs dans les moteurs de recherche. En rendant votre site Web facile à identifier et à naviguer, un favicon sur les onglets de votre navigateur, les signets, les archives d'historique et d'autres endroits permet à vos utilisateurs de gagner du temps et augmente la possibilité qu'ils interagissent avec votre site Web.
En conséquence, plus de personnes visiteront votre site Web pendant de plus longues périodes, ce qui augmentera le trafic et stimulera votre référencement.
#2. Signets
Vous avez un avantage sur les sites Web sans favicons. Pour les sites Web qui ont été mis en signet en ligne, le navigateur Google Chrome prend en compte certains facteurs de classement de recherche. Sans favicon, votre site Web peut ne pas avoir la possibilité d'être mis en signet sur le navigateur Chrome, ce qui serait l'un des nombreux signaux indirects utilisés pour déterminer le classement de recherche.
De plus, avoir votre site Web mis en signet puis se démarquer visuellement dans cette liste de signets grâce à votre favicon augmente la probabilité que les utilisateurs y reviennent. Tout cela améliore le référencement et les visiteurs de votre site Web.
#3. Image de marque et visibilité
Les utilisateurs associeront votre marque à votre favicon car il s'agit d'une représentation visuelle de votre site Web et de votre entreprise. Le référencement est une question de marketing et d'image de marque, et plus les visiteurs peuvent voir votre site Web et se souvenir de vous, plus il est probable qu'ils cliqueront dessus.
Comment ajouter un favicon en HTML
Une fois votre favicon créé, vous devez indiquer aux navigateurs et autres applications Web où le trouver. Vous devez y parvenir en incluant une ligne de code dans le zone pertinente de votre fichier HTML.
Par exemple, supposons que vous ayez enregistré votre fichier PNG sous le nom "favicon.ico". Ensuite, insérez l'extrait de code suivant entre chacun de vos r </head> balises :
Veuillez noter que, bien qu'il soit d'usage, votre favicon n'a pas besoin d'être situé dans le répertoire racine du site. Assurez-vous simplement que la propriété href est correcte si vous l'avez enregistrée ailleurs. Vous taperiez dans si vous l'avez enregistré dans le sous-dossier "images".
Imaginons que vous produisiez différentes tailles de favicon. En incluant une ligne de code pour chaque taille dans le zone pertinente de votre fichier HTML, vous pouvez tous les charger sur votre site Web.
Par exemple, vous ajouteriez la ligne de code suivante pour créer une version 16×16, 32×32, 48×48 et 180×180 :
Quels formats dois-je utiliser pour un favicon ?
Il existe maintenant quelques autres options de formatage, par opposition à la précédente lorsqu'un favicon devait être au format Windows ICO. Voici un aperçu de chacun d'eux :
- ICO Windows : L'ICO est de loin le type de fichier le plus couramment pris en charge. L'avantage de l'ICO est qu'il peut prendre en charge différentes profondeurs de bits et résolutions, ce qui fonctionne parfaitement et est particulièrement utile pour Windows. De plus, ICO fournit une icône de 32 pixels pour la barre des tâches de Windows 7 qui fonctionne avec Internet Explorer. De plus, c'est le seul format qui ignore l'élément.
- PNG : Il existe plusieurs utilisations du format PNG. Un fichier PNG peut être créé sans logiciel supplémentaire, ce qui le rend incroyablement convivial. La taille de fichier la plus courte est fournie et la transparence alpha est prise en charge. Cependant, un inconvénient important de cette conception est qu'Internet Explorer ne prend en charge que les fichiers ICO et n'ouvrira pas les fichiers PNG.
- SVG : Ce format peut être utilisé et est pris en charge par les navigateurs Opera.
- GIF : Hormis la compatibilité avec les anciens navigateurs, ce format n'a aucun avantage. Bien qu'ils rendent les utilisateurs plus visibles, ils ont également tendance à agacer, et la croyance écrasante est qu'ils ne sont pas du tout avantageux.
- JPG : Bien que JPG puisse être utilisé, il est moins populaire et n'offre pas le même niveau de qualité de résolution que PNG. Le JPEG perd également tous ses avantages en raison de la taille modeste du favicon.
- APNG : Il s'agit d'une variante animée de PNG, et bien que Firefox et Opera puissent la prendre en charge, elle présente les mêmes inconvénients que le GIF animé en termes de détournement des téléspectateurs de leur interface.
Comment puis-je obtenir un favicon ?
Pour ajouter un favicon à votre site Web, enregistrez l'image soit dans le répertoire racine de votre serveur Web, soit dans un nouveau dossier nommé images que vous créez dans le répertoire racine. "favicon.ico" est un nom typique pour une image favicon.
A quoi sert un favicon ?
Améliorer l'expérience utilisateur. La principale fonction d'un favicon est de permettre aux utilisateurs de reconnaître instantanément une page lorsqu'ils ont plusieurs onglets ouverts dans la même fenêtre de navigateur. Les utilisateurs peuvent rapidement reconnaître et accéder à votre site Web si vous en créez un avec un favicon.
Un favicon est-il identique à un logo ?
Par rapport aux logos, les favicons sont sensiblement minuscules. En tant que favicons, certaines entreprises utilisent une version réduite de leur logo, mais cela n'est pas toujours efficace. La majorité des logos utilisent des images et du texte, mais les favicons sont trop petits pour les accueillir.
Qu'est-ce qu'un exemple de favicon ?
Notre favicon est le P fantaisie qui peut être vu sur l'onglet à gauche de la barre d'URL sur le site Web de ProCreator.
Puis-je utiliser mon logo comme favicon ?
Oui. En tant que favicons, la plupart des sites Web utilisent souvent leur logo. Vous pouvez facilement créer un logo pour votre site Web avec le créateur de logo gratuit s'il n'en a pas déjà un.
Quelles sont les règles du favicon ?
Lignes directrices pour créer des favicons fantastiques :
- Assurer la simplicité.
- Gardez la familiarité.
- Utilisez le moins de texte ou de lettres possible.
- Considérez la couleur.
Conclusion
Malgré leur petite taille, les favicons ont un impact important. Les favicons sont essentiels au succès de votre entreprise dans le monde numérique en évolution rapide d'aujourd'hui, car ils fournissent à votre site Web une identité visuelle en ligne et aident à créer la meilleure expérience utilisateur possible. La bonne partie est que la création de favicons est simple.
Articles Relatifs
- COMMENT METTRE EN SIGNET : les moyens les plus simples et les plus rapides de créer un signet sur n'importe quelle page
- 2 façons rapides de mettre à jour vos anciens fichiers PDF
- BANNIÈRES PUBLICITAIRES : Comment ça marche avec des exemples
- LOGO LINKEDIN : Signification, histoire, police et influences du design
Bibliographie
