L’icône classique est un fichier ICO de 16 x 16 pixels, avec des couleurs 16 ou 24 bits et une prise en charge de la transparence. Bien plus tard, certains navigateurs ont adopté une taille 32 x 32 pixels, mais les anciens la réduisent toujours à 16 x 16 pixels.
Pourquoi en avez-vous impérativement besoin ? Aujourd’hui, la favicon est un composant important de l’interface d’un site Web, qui joue également un rôle fondamental dans les applications Web avancées.
Favicon Checker Vérifiez si votre site Web a favicon et comment il est affiché dans différents navigateurs
Quel est son rôle ?
Évidemment, la favicon facilite grandement la recherche dans les signets ou favoris. Il est beaucoup plus simple de chercher une icône bien connue que de lire les noms de tous les sites Web. Son rôle principal est de faciliter la navigation de l’utilisateur. C’est sa principale raison d’être. Aujourd’hui, ce composant répandu est présent sur tous les sites web modernes et populaires et dans les onglets des navigateurs. Les sociétés Internet mondiales ont toutes des icônes facilement reconnaissables qui leur permettent de se distinguer du reste des ressources Web (et constituent des bons exemples d’inspiration pour votre favicon). Sans aucun doute, il s’agit d’un outil très utile pour les sites Web de tout acabit. Les favicons ont été créées pour pouvoir effectuer une recherche visuelle rapide afin de trouver le site Web dont vous avez besoin des milliers de favoris sur Internet. De cette manière l’audience que vous ciblez pourra vous trouver plus rapidement et simplement.
Un site Web sans icône personnalisée adoptera le symbole générique du navigateur. Il s’agit d’un outil indispensable si vous tenez à développer votre marque sur le net.
Comment créer la Favicon d’un site web ?
Vous pouvez le faire par vous-même ou utiliser de l’aide en ligne. Il n’est pas nécessaire d’utiliser le moindre générateur en ligne dédié pour en créer une, mais il s’agit de la voie la plus simple et pratique. Voici quelques exemples de sites Web qui peuvent vous venir en aide :
- Favicon Generator;
- Favicon Generator ORG;
- Dynamic Drive Favicon Tool;
- Favigen;
- Gen Favicon;
- Degraeve Favicon;
Il est évident que vous n’avez même pas besoin d’un designer graphique pour y parvenir. Toutefois, si vous avez l’intention de lancer une marque dans le monde entier, vous devriez vous tourner vers un designer professionnel afin de disposer d’un concept unique qui corresponde à votre marque. Toutefois, si vous décidez de la créer vous-même, les icônes simples ne nécessiteront que 10 minutes pour leur conception. Vous n’avez qu’à envoyer le logo du site Web sur l’un des sites ci-dessus et à télécharger le fichier généré. C’est aussi simple que ça !
Vous pouvez explorer ces sites pour trouver des idées originales de favicons :
Consultez le site Web pour les erreurs de référencement Aucun favicon ne nuit à la convivialité du site Web, mais l'absence de balises Title et Description peut entraîner une perte de trafic.
Comment ajouter une Favicon sur son site ?
Une fois que votre fichier est prêt, il n’est pas difficile de le placer en place sur le serveur. Vous devez tout d’abord obtenir l’accès à un éditeur de texte et au dossier racine de votre site Web pour modifier le code HTML de celui-ci. Voici un guide étape par étape :
1. Envoyez le fichier sur votre serveur. Saisissez l’adresse de votre serveur FTP dans la barre d’adresse de votre navigateur. Appuyez sur la touche « Entrée », connectez-vous et envoyez le fichier dans le dossier racine.
2. Vous devez ensuite changer le code HTML de votre site Web. Cherchez et téléchargez le fichier « header.php » ou « index.html » depuis le serveur. Si votre site est développé en HTML pur, vous devrez insérer le code suivant dans la section « head » du fichier « index.html » :
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">Si vous travaillez avec WordPress, insérez le code suivant dans la section « head » du fichier « header.php » :
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">Et c’est tout ! Vous serez surpris par la facilité de la procédure.
Créer une icône dans Photoshop
Photoshop est un programme idéal pour travailler avec les images ! C’est un outil bien pratique qui vous viendra en aide dans de nombreuses situations et vous permettra même de créer une icône personnalisée pour votre site Web. Bien évidemment, si vous êtes designer, l’application Photoshop est la meilleure solution. Si ce n’est pas le cas, vous pouvez toujours utiliser certains des sites Web que nous avons mentionnés ci-dessus pour gagner du temps. Le problème est que Photoshop ne prend pas en charge les fichiers « ico ». Vous devrez télécharger et installer ce module externe développé par Telegraphics.
Dans le menu FICHIER, créez un nouveau fichier d’une taille de 64 x 64 pixels (il est plus simple de travailler avec une taille plus grande), collez votre logo sur le document et effectuez tous les changements nécessaires.
Après cela, dans le menu IMAGE, choisissez TAILLE DE L’IMAGE et modifiez celle-ci en 16 x 16 pixels. Assurez-vous que votre icône ne soit pas floutée en cochant RÉÉCHANTILLONAGE et BICUBIQUE PLUS NET. Une fois que les résultats sont satisfaisants, cliquez sur le menu FICHIER puis ENREGISTRER SOUS.
Conclusion
Ce composant est une sorte de carte de visite, vous devriez le concevoir dans le même style que votre site. Plus le thème du site et de l’icône seront proches, plus l’utilisateur s’y retrouvera facilement. L’icône doit s’associer facilement au site, c’est sa fonction principale. Il faut aussi la faire adaptée et claire : l’utilisateur doit comprendre immédiatement ce qui est dessiné dessus et s’en souvenir facilement.
Une icône bien faite donnera une apparence plus professionnelle à votre site Web. Si vous souhaitez développer l’image de votre marque, vous devriez consacrer du temps à la conception d’une favicon.
