Votre blog a-t-il un favicon personnalisé? Sinon, ça devrait vraiment. Aujourd’hui, nous allons apprendre ce qu’est un favicon, pourquoi vous en avez besoin et enfin comment créer un favicon pour votre blog ou votre site Web.
Je vois encore des tonnes de blogs sans un, donc si votre blog en fait partie, faites-vous une faveur et créez-en un maintenant en utilisant le tutoriel ci-dessous. Je vous promets que cela ne prendra pas longtemps et que c’est aussi un peu amusant!
Mise à jour: 4/11/2020
Divulgation: Cet article peut contenir des liens d’affiliation (désignés par un *), ce qui signifie que je peux recevoir une petite commission si vous choisissez de faire un achat avec mon lien. J’apprécie votre soutien et ne recommanderai jamais de produits que je ne reste pas seul.
Tout d’abord, Qu’est-ce qu’un Favicon ?
Un Favicon, prononcé fave-icon, est l’abréviation de l’icône des favoris qui a été nommée parce qu’elles apparaissent dans votre liste de signets de sites Web, en d’autres termes, vos sites Web préférés. Les favicons sont une petite version de votre logomark qui apparaît sous la forme d’une icône d’onglet de navigateur, d’une icône de signet ou d’une icône de raccourci.
Les favicons sont un moyen rapide pour les utilisateurs de reconnaître votre site Web au premier coup d’œil. Jetez un œil aux onglets de mon navigateur ci-dessous. Reconnaissez-vous la plupart des sites Web que j’ai ouverts ici?
Pourquoi Avez-vous besoin de créer un Favicon?
Lorsque vous n’attribuez pas de favicon personnalisé à votre blog ou site Web, une icône générique ou aucune icône ne lui est attribuée. Au pire, votre blog utilise le favicon de votre hébergeur. Au mieux, chaque navigateur vous attribue sa propre chose: Chrome ajoute un petit globe (voir image ci-dessus), Safari ajoute la première initiale de l’URL de votre site Web dans une boîte grise (voir image ci-dessous), et Firefox n’ajoute rien du tout. De toute façon, parlez d’ENNUYEUX!
Regardez à nouveau les onglets du navigateur ci-dessus. Avoir des icônes reconnaissables facilite les clics rapides entre les sites Web, n’est-ce pas? Si vous enregistrez un site Web dans vos favoris, vous verrez également le favicon dans votre liste de favoris. Cela facilite la recherche rapide de ce que vous recherchez. Aidez vos lecteurs à trouver rapidement votre blog dans leurs onglets ou signets en intégrant un favicon.
Il y a un autre endroit où je parie que vous n’avez pas pensé où les favicons apparaissent: Si vous avez des sites Web que vous visitez fréquemment sur votre téléphone, vous pouvez toujours les ajouter à l’écran d’accueil de votre téléphone comme raccourci. Si vos lecteurs adorent visiter votre site souvent, ils voudront peut-être y ajouter un raccourci depuis leur écran d’accueil afin que vous souhaitiez absolument qu’ils aient une belle icône pour se démarquer des autres icônes d’applications qu’ils ont déjà ajoutées.
Et voici une nouvelle page d’onglet de Safari. Imaginez le raccourci de votre site Web ici. Vous ne voulez pas que votre blog soit représenté par une icône grise ennuyeuse comme l’icône « C » ci-dessous?
Comment concevoir un Favicon pour votre Blog
Quelques règles de conception pour Créer un Favicon
Tout d’abord, parlons de quelques bonnes pratiques pour concevoir votre favicon.
- Votre favicon doit être visible et immédiatement reconnaissable
La meilleure façon de rendre votre favicon reconnaissable est d’utiliser votre logo comme point de départ. Même si votre blog n’est pas encore super célèbre, c’est ok. L’utilisation d’éléments et de thèmes de conception cohérents tout au long de votre image de marque l’aidera à se démarquer des autres et à aider les gens à reconnaître votre marque.Voici quelques options à considérer lors de la conception de votre favicon:- votre logo ou logomark
- variation plus simple de votre logo
- un symbole ou une icône qui représente votre marque
- les initiales (ou juste la première initiale) de votre nom de marque – assurez–vous que le style des initiales correspond au design et au style de votre logo initial
- une photo simple – dernièrement, j’ai vu des blogueurs utiliser leurs photos de profil pour créer un favicon
- Votre favicon devrait utiliser un design très simple
Regardez bien les favicons des onglets de votre navigateur en ce moment. Que remarquez-vous? Ils sont minuscules ! Le favicon typique est affiché à 16 x 16 pixels. Pour cette raison, il est important de vous assurer d’utiliser une version très simplifiée de votre logo ou élément de marque. Des graphismes détaillés et élaborés ne s’adaptent pas bien à une taille aussi petite. Ils ressembleront probablement à un désordre flou. - Assurez-vous que votre favicon contraste bien avec les fonds clairs et sombres
Selon les préférences de vos lecteurs, les onglets de leur navigateur peuvent être blancs, noirs, gris clair ou gris foncé. Pour cette raison, vous voudrez vous assurer de créer un favicon avec des couleurs qui contrastent bien sur les fonds clairs et sombres.Certains favicons ont des arrière-plans transparents et ils fonctionnent car leurs couleurs contrastent bien sur n’importe quel arrière-plan. Si votre graphique est trop clair ou trop sombre, il peut être utile d’ajouter un cercle ou un carré de couleur unie derrière le graphique ou le logo pour l’aider à se démarquer et à être lisible sur n’importe quel onglet coloré. - Regardez les onglets de votre navigateur pour vous inspirer
Cliquez sur le Web et regardez les favoris utilisés sur vos sites Web préférés. Notez s’ils fonctionneront sur des arrière-plans clairs ou sombres. Le graphique a-t-il un fond transparent ou est-ce sur un carré ou un cercle coloré?
Favicon Inspiration
Favicons utilisant la transparence
Remarquez comment ces icônes peuvent se démarquer sur un fond sombre ou clair, à l’exception de la dernière, « Dites oui. »Celui-là aurait probablement dû être placé sur un carré blanc. Et c’est un peu difficile à dire, mais la quatrième icône, la fleur de lotus a en fait un contour noir très fin. De cette façon, vous pouvez le voir facilement même s’il est affiché sur des onglets de couleur claire.
Favicons utilisant un fond coloré
Ces favicons ont été conçus avec un fond carré ou carré arrondi pour s’assurer qu’ils sont clairement visibles sur les onglets sombres et clairs.
Favicons utilisant des initiales
Certaines de ces icônes d’initiales utilisent un fond coloré, d’autres un transparent. De toute façon, assurez-vous qu’il est lisible.
Favicons utilisant une photo de profil
L’utilisation d’une photo de profil semble être une nouvelle tendance qui se poursuit. Si vous suivez cette voie, assurez-vous d’utiliser la même photo de profil dans tous vos profils en ligne afin qu’elle soit instantanément reconnaissable.
Comment créer un Favicon pour votre Blog
Créer un fichier Favicon Étape par Étape
- Créer le Graphique dans un Éditeur d’image
En utilisant un éditeur d’image comme Photoshop (inscrivez-vous pour un essai gratuit) *, Pixlr, BeFunky ou Canva, * créez votre fichier favicon à 512 x 512 pixels. Même s’il n’est affiché qu’à 16 × 16 dans les onglets du navigateur, il sera également affiché à des tailles plus grandes dans certaines des autres applications que j’ai mentionnées ci-dessus. - Prévisualisez votre Favicon en taille minuscule
Si vous avez terminé de créer un favicon graphique, effectuez un zoom arrière de l’image jusqu’à ce que votre graphique devienne minuscule, à peu près de la taille des favicons que vous voyez dans votre navigateur. Est-il encore lisible? Est-ce logique? Si c’est le cas, génial, passez à l’étape suivante. - Enregistrez le fichier
Tout d’abord, enregistrez votre graphique en tant que fichier modifiable dans votre logiciel afin que vous puissiez revenir en arrière et l’affiner si nécessaire.Ensuite, enregistrez-le en tant que fichier PNG. - Générer un Favicon.fichier ico
Utilisez un générateur de favicon pour convertir votre fichier PNG en fichier ICO. Cette étape est nécessaire car certains navigateurs ne liront que les fichiers ICO.
Alternatives à la conception du vôtre à partir de zéro
Si vous voulez un moyen rapide et facile de créer un favicon de texte ou d’initiales, utilisez le générateur de favicon de texte > ICO. J’ai rapidement créé celui-ci pour DYOB:
Vous pouvez également utiliser le générateur de favicon ICO Emoji > si vous voulez vraiment vous faciliter la tâche. 
Enfin, Ajoutez votre Nouveau Favicon à Votre Blog ou Site Web
WordPress
Le moyen le plus simple d’ajouter un favicon dans un blog WordPress auto-hébergé est de vous connecter à votre tableau de bord. Allez ensuite dans Apparence > Personnaliser, puis cliquez sur l’onglet Identité du site. Dans la section Icône du site, sélectionnez votre nouveau favicon.fichier ico à télécharger.
Et boom, c’est terminé, vérifiez-le dans votre navigateur! Notez que vous devrez peut-être actualiser plusieurs fois et / ou vider le cache de votre navigateur avant qu’il n’apparaisse.
Comment ajouter un favicon à un WordPress.com blog.
Squarespace
Il est également très facile d’ajouter un favicon à Squarespace.
Blogger
Connectez-vous à votre blog et cliquez sur Paramètres dans la colonne de gauche. Cliquez ensuite sur Favicon sous la section de base. Ensuite, téléchargez votre favicon.fichier ico, enregistrer et boom!
Testez votre nouveau Favicon
Si vous souhaitez tester à quoi ressemble votre favicon sur différentes plates-formes et paramètres, utilisez ce vérificateur de Favicon. Si vous souhaitez modifier l’apparence de vos icônes sur l’une des plates-formes, par exemple iOS (iPhones), vous pouvez utiliser le générateur pour les optimiser pour chaque paramètre. Ensuite, suivez simplement les instructions pour les ajouter tous à votre blog.
Vous venez d’apprendre à créer un Favicon
Félicitations! Lorsque vous concevez votre propre blog, vous voulez vous assurer de ne laisser aucun détail, même les plus petits. L’ajout d’un favicon personnalisé aide non seulement vos lecteurs à localiser rapidement votre blog dans leurs onglets ou signets, mais cela montre que vous vous souciez de garder votre image de marque cohérente.
Maintenant c’est votre tour
Faites-moi savoir dans les commentaires si vous avez des questions sur la façon de créer un favicon ou si vous avez besoin d’aide pour identifier un type de favicon à créer pour votre marque. Sinon, partagez votre favicon avec nous dans les commentaires!
Et si vous avez apprécié ce tutoriel, partagez-le en cliquant sur l’une des icônes sous ma signature !
Cet article a été initialement publié le 14/8/2013 et mis à jour le 2/11/2015, puis à nouveau le 4/11/2020.
Hey ami, vous voulez des trucs de conception de bricolage gratuits?
J’ai toute une bibliothèque de produits GRATUITS rien que pour vous! Rejoignez les plus de 10 000 autres et obtenez un accès instantané dès maintenant!