A quoi servent les favicons?

Quand je commence à parler aux gens de l’importance d’un favicon pour leur stratégie globale de marque en ligne, ils disent généralement la même chose: «N'êtes-vous pas en train de prendre cette image de marque un peu trop loin?

Ma réponse va généralement: "Pas si vous êtes sérieux au sujet de vos propres efforts de marque!"

C'est vrai, les favicons sont très peu de choses, probablement le moins important d'un site, mais l'attention portée aux détails fait qu'un site se démarque. et même si cela semble fou, les favicons sont très importants du point de vue de l'image de marque.

Considérant que WDD est un site web destiné à un public de designers, je pense que beaucoup d’entre vous savent déjà ce que sont les favicons et comment les créer; mais cet article peut encore vous aider à comprendre pourquoi vous devriez les faire, et également servir de bonne page de ressources.

Je partage une grande liste avec les ressources liées à favicon ci-dessous, alors envisagez de mettre cette page en signet pour référence future. Oh, et si vous le faites, remarquez le favicon WDD directement dans votre liste de signets;)

Juste au cas où vous n'êtes pas un designer, ou une sorte de ceinture noire en favicon-arts, cet article couvre probablement tout ce que vous aurez besoin de savoir sur ces petits carrés insaisissables de 16 × 16 pixels. . Alors profitez!

Qu'est-ce qu'un favicon?

Les favicons sont de petites images carrées de 16 × 16 pixels généralement 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, même si vous ne savez pas ce qu'ils sont. En cas de doute, l'image ci-dessous vous aidera.

Deux exemples de favicons sur un navigateur à onglets Google Chrome.

Si vous êtes intéressé à comprendre une partie de l’histoire de l’Internet, voici un fait intéressant:

Le mot favicon est un portamentau constitué des mots "favori" et "icône", et il a été nommé comme tel car il a été supporté pour la première fois par Internet Explorer 5 de Microsoft et juste au cas où vous n'utiliseriez pas IE, cette fonctionnalité de bookmarking de navigateur est appelé favoris.

Quel est le but d'un favicon?

Dans les premiers temps de l'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, les favicons étaient alors utilisés pour estimer le trafic des sites Web. compter le nombre de visiteurs qui ont marqué la page. (Ceci est un autre extrait intéressant de l’histoire d’Internet!)

Mais mis à part les faits intéressants, la principale raison d'avoir des favicons de nos jours est d'améliorer l'expérience utilisateur. Des favoris sont utilisés dans tous les navigateurs modernes dans la barre d'adresse, dans la barre de liens, dans la zone de signet 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 votre appareil mobile.

La principale raison d'avoir un favicon est certainement l'amélioration évidente de l'expérience utilisateur. Un site Web sans celui-ci 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 utilisateur, vous devez vous soucier des favicons.

Mais je ne peux pas m'empêcher de voir les choses sous le signe de l'image de marque, mon domaine d'expertise, alors je pense que les favicons sont encore plus pertinents du point de vue de la stratégie de marque. Encore une fois, avec autant de points d'interaction, ne pas les utiliser pour sensibiliser à la marque est un crime. La vérité est que trouver des moyens créatifs pour améliorer votre image de marque en ligne est toujours une tâche difficile, et avoir un favicon est un moyen simple et facile d'y parvenir. Alors, prends-en un mon ami!

Comment créer un favicon?

Créer un favicon de site Web est simple comme bonjour. En fait, vous n'avez même pas besoin d'être un concepteur pour le faire. Cela aide sûrement si vous le faites, car vous pouvez mettre vos compétences au travail et créer quelque chose qui se démarque vraiment, mais même les moins avertis de notre technologie peuvent le faire en environ 5 minutes ou moins, en utilisant les bons outils.

Les sites Web de la liste ci-dessous vous permettent de créer un favicon simplement en téléchargeant une image préexistante. Donc, si vous souhaitez 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. Facile à manger, citron pressé.

Voici la liste des générateurs Favicon que vous recherchez:

Les sites Web ci-dessus varient beaucoup en fonction du fichier que vous obtenez; en particulier en termes de taille de fichier et d'extension. Si vous cherchez à obtenir le fichier le plus compatible possible, je vous recommande fortement de télécharger une image de 16 × 16 pixels au format "ico".

Si vous avez besoin d'inspiration, essayez les galeries ci-dessous:

Comment utiliser votre favicon?

Une fois votre favicon conçue avec soin, son installation sur votre serveur ne devrait pas prendre plus de deux minutes en deux étapes simples. Pour cela, vous devez avoir accès 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 cela, pointez la barre d'adresse de votre navigateur sur votre serveur FTP. Votre URL devrait ressembler à ceci:

ftp://[email protected]

Appuyez 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 êtes, téléchargez simplement 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 en HTML, insérez le code ci-dessous dans la zone HEAD du fichier "index.html", et n'oubliez pas de remplacer "yoursite.com" par l'adresse de votre site Web.

Si vous utilisez WordPress, insérez le code ci-dessous dans la zone HEAD de votre fichier "header.php".

Avec cela fait, téléchargez le fichier à l'endroit 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 aucun morceau de code, mais seulement tant que l'image favicon a 16 × 16 pixels, il a été nommé "favicon.ico" et est 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 la route difficile et la 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 façon professionnelle de le faire. L'astuce est que Photoshop ne supporte pas nativement les fichiers "ico", vous devez donc téléchargez ce plugin de Telegraphics .

Assurez-vous de l'installer avant de suivre le didacticiel ci-dessous. Photoshop ne fonctionnera pas sans lui.

Recherchez l'option "ICO" dans votre boîte de dialogue "Enregistrer sous" 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 suivante "Nouveau", puis définissez votre toile à 64 × 64 pixels. Pourquoi? Étant donné que la taille finale du favicon 16 × 16 est si petite, le fait d’avoir un plus grand canevas sur lequel vous travaillerez vous aidera à faire circuler votre jus créatif. Ensuite, collez 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 "Resample Image" et de choisir "Bicubic Sharper" pour 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 avec "AltCtrl / AltCmd + Z" et continuez à travailler sur le design jusqu'à ce que vous soyez satisfait.

Pour terminer votre favicon, il vous suffit de cliquer sur le menu "Fichier" et sur l'option suivante "Enregistrer sous", vous vous rappelez de nommer votre fichier comme "favicon.ico". Encore une fois, le travail est terminé!

Conclusion

Les favicons font partie de ces petites choses auxquelles nous ne portons généralement pas trop d’attention, mais la vérité est que loin d’être négligeables, ils constituent une partie très importante du Web, tant du point de vue de l’interface utilisateur que du point de vue de la marque. de vue.

Certains disent que les grandes choses sont de petite taille, et je pense que cela s'applique également aux favicons, car tout concepteur Web et / ou spécialiste de l'image de marque prend toujours le temps d'ajouter un favicon aux sites de ses clients, même si le client n'a pas idée de ce qu'est un favicon, démontre beaucoup de professionnalisme et d'attention aux détails; le type de qualité que chaque client apprécie.

Créez-vous des favicons pour vos clients? Ont-ils trop de peine pour trop peu de récompense? Faites-nous savoir vos pensées dans les commentaires.

Image / vignette en vedette, image perplexe via shutterstock

création de sites web l'image de marque comment favicon trucs et astuces

Quel est le point de favicons?