Les favicons sont de petites images carrées généralement de 16 × 16 pixels qui sont utilisées par les navigateurs Web pour afficher une représentation graphique du site visité à gauche de la barre d’adresse du navigateur. Vous avez probablement déjà vu beaucoup de favicons auparavant, même si vous ne savez pas ce qu’ils sont. En cas de doute, l’image ci-dessous vous aidera.
Si vous souhaitez comprendre un élément de l’histoire d’Internet, voici un fait intéressant:
Le mot favicon est un portamentau composé des mots «favori» et «icône». Il a été nommé en tant que tel car il a été pris en charge pour la première fois par Microsoft Internet Explorer 5 et, au cas où vous n’utiliseriez pas IE, cette fonctionnalité de bookmarking de navigateur. s’appelle les favoris.
Quel est le but d’un favicon?
À ses débuts sur Internet, des outils tels que Google Analytics n’étaient que des rêves dans l’esprit de quelques internautes. Aussi étrange que cela puisse paraître, cela a semblé étrange. À l’époque, les favicons étaient utilisés pour estimer le trafic des sites Web. compter le nombre de visiteurs qui ont ajouté la page à vos favoris. (C’est un autre extrait intéressant de l’histoire d’Internet!)
Mis à part des faits intéressants, la raison principale pour avoir des favicons de nos jours est d’améliorer l’expérience utilisateur. Les favicons sont utilisés dans tous les navigateurs modernes dans la barre d’adresse, dans la barre de liens, dans la zone de partage de signets et dans ses onglets de navigation. En outre, quelques navigateurs affichent également des favoris lorsque vous créez un lien de raccourci pour le site Web correspondant sur votre bureau et sur votre appareil mobile.
La principale raison d’avoir un favicon est l’amélioration évidente de l’expérience utilisateur. Un site Web sans site affichera un symbole de navigateur générique sur tous les points d’interaction mentionnés ci-dessus, et si vous vous souciez de votre expérience d’utilisateur, vous devez vous soucier de vos favicons.
exemples de favicons
Mais je ne peux m’empêcher de voir les choses sous l’angle de la stratégie de marque, mon domaine d’expertise, donc je pense que les favicons sont encore plus pertinentes du point de vue de la stratégie de marque. Encore une fois, avec autant de points d’interaction, ne pas les utiliser pour accroître la notoriété de la marque est un crime. La vérité est que trouver des moyens créatifs d’améliorer votre image de marque en ligne est toujours une tâche difficile, et disposer d’un favicon est un moyen simple et efficace de le faire. Alors procurez-vous-en un mon ami!
Comment créer un favicon?
Créer un favicon est simple comme bonjour. En fait, vous n’avez même pas besoin d’être un designer pour le faire. Cela vous aidera sûrement, car vous pouvez mettre vos compétences à profit et créer quelque chose qui se démarque vraiment, mais même les moins férus de technologie peuvent le faire en environ 5 minutes ou moins, en utilisant les bons outils.
Les sites Web dans la liste ci-dessous vous permettent de créer un favicon simplement en téléchargeant une image préexistante. Donc, si vous voulez créer un favicon pour votre marque, il vous suffit de télécharger votre logo sur l’un des sites suivants et de télécharger le fichier favicon. Peasy facile, squeezy de citron.
Voici la liste de générateurs Favicon que vous recherchez:
- Favicon CC
- Générateur de favicon
- Outil Favicon Drive dynamique
- Service Chami Favicon
- Favicon Generator ORG
- Favicon UK
- Degraeve Favicon
- Anti-favicon
- Gen Favicon
- Favigen
Les sites Web ci-dessus varient beaucoup en termes de fichier résultant; en particulier en termes de taille de fichier et d’extension. Si vous souhaitez obtenir le fichier le plus compatible possible, je vous recommande fortement de télécharger une image de la taille de 16 × 16 pixels au format «ico».
Si vous avez besoin d’inspiration, essayez les galeries de favicon ci-dessous:
- Belles Icônes
- La galerie Favicon
- Delta Tango Bravo
- Favicons frais
Comment utiliser votre favicon?
Une fois votre favicon conçu avec soin, son installation sur votre serveur ne devrait pas prendre plus de deux minutes en deux étapes simples. Pour cela, vous devez accéder au dossier racine de votre site Web et à un outil d’édition de texte pour modifier le code HTML de votre site Web.
ÉTAPE 1
Vous devrez télécharger le fichier «favicon.ico» sur votre serveur. Pour ce faire, pointez la barre d’adresse de votre navigateur sur votre serveur FTP; votre URL devrait ressembler à ceci:
ftp://username@yourwebsite.comAppuyez sur Entrée et le navigateur vous demandera un nom d’utilisateur et un mot de passe avant d’accorder l’accès au serveur de fichiers. Une fois que vous y êtes, téléchargez le fichier «favicon.ico» dans le dossier racine et vous avez terminé.
ÉTAPE 2
Vous devez maintenant modifier la page HTML de votre site Web pour aider les navigateurs à trouver votre image favicon. Gardez votre fenêtre FTP ouverte, recherchez et téléchargez le fichier “index.html” ou “header.php” de votre serveur et suivez les étapes ci-dessous en fonction du fichier que vous obtenez:
Si votre site Web est composé de HTML simple, insérez le code ci-dessous dans la zone HEAD du fichier «index.html» et n’oubliez pas de remplacer «yoursite.com» par votre propre adresse de site Web.
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">Si vous utilisez WordPress, insérez le code ci-dessous dans la zone HEAD de votre fichier «header.php».
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">Cela fait, chargez le fichier là où vous l’avez obtenu. Vous avez terminé!
En fait, la plupart des navigateurs modernes sont assez intelligents pour trouver votre fichier favicon même sans aucune pièce de code, mais seulement tant que l’image favicon a une taille de 16 × 16 pixels, elle a été nommée «favicon.ico». enregistré dans le dossier racine de votre dossier de site Web.
Comment créer un favicon dans Photoshop
Avec autant d’outils disponibles pour vous aider à créer votre favicon, pourquoi voudriez-vous prendre le chemin difficile et le créer dans Photoshop? Eh bien, si vous êtes un designer et que vous souhaitez tirer le meilleur parti de votre favicon, c’est certainement la manière professionnelle de le faire. Le truc, c’est que Photoshop ne supporte pas nativement les fichiers «ico», vous devez donc télécharger ce plugin à partir de Telegraphics .
Assurez-vous de l’installer avant de suivre le tutoriel ci-dessous. Photoshop ne fonctionnera pas sans elle.
Recherchez l’option «ICO» dans votre boîte «Enregistrer sous» de Photoshop pour confirmer que le plug-in est installé.
Créez un nouveau document dans Photoshop en sélectionnant l’élément de menu “Fichier” et l’option “Nouveau”, puis définissez votre toile à 64 × 64 pixels. Pourquoi? Étant donné que la taille de la favicon finale 16 × 16 est si petite, disposer d’une plus grande toile de travail vous aidera à libérer votre créativité. Collez ensuite votre logo dans le document et libérez votre pouvoir créatif de licorne magique.
Une fois que vous avez terminé, sélectionnez simplement le menu “Image” et l’option suivante “Taille de l’image” et réduisez l’image à 16 × 16 pixels. N’oubliez pas de cliquer sur “Rééchantillonner l’image” et de choisir “Bicubique plus net”, afin de vous assurer que l’image ne sera pas floue lors du redimensionnement. Si vous n’aimez pas le résultat final, annulez simplement vos modifications les plus récentes avec «AltCtrl / AltCmd + Z» et continuez à travailler sur la conception jusqu’à ce que vous en soyez satisfait.
Pour terminer votre favicon, il vous suffit de cliquer sur le menu “Fichier” et sur l’option “Enregistrer sous”, vous rappelez de nommer votre fichier comme “favicon.ico”. Encore une fois, le travail est fait!
Conclusion
Les favicons font partie de ces petites choses auxquelles nous ne prêtons généralement pas trop attention, mais la vérité est que loin d’être insignifiantes, elles constituent une partie très importante du Web, du point de vue de l’interface utilisateur et du point de marque. de vue.
Certains disent que les bonnes choses viennent dans de petites tailles, et je pense que cela vaut aussi pour les favicons, car tout concepteur web et / ou spécialiste en stratégie de marque qui prend toujours le temps d’ajouter un favicon aux sites de ses clients, même lorsque le client n’a pas idée de ce qu’est un favicon, fait preuve de beaucoup de professionnalisme et d’attention portée aux détails; le genre de qualité que chaque client apprécie.