Un favicon est cette petite image sympa à côté de votre barre d'adresse dans votre navigateur. C'est ce qui distingue votre site dans l'onglet des favoris et peut être utilisé pour accroître la notoriété de la marque. Si vous avez un site mais que vous n'avez jamais envisagé de créer un favicon, vous devriez repenser votre décision. De plus en plus, les développeurs de logiciels utilisent des favicons pour différents aspects de leurs applications, tels que les icônes de l'écran d'accueil sur les tablettes. Heureusement, la conception, la création et la mise en œuvre d'un favicon est quelque chose que presque tout le monde peut faire s'il suit les bonnes étapes.
Pas
Méthode 1 sur 3: Concevoir votre favicon
Étape 1. Créez un favicon qui représente votre site Web
Le type de site Web que vous avez doit déterminer l'apparence de votre favicon. Essayez de concevoir quelque chose qui adhérera à votre image de marque et qui sera reconnaissable et mémorable pour les gens. Votre favicon sera la première chose que les gens verront lorsqu'ils regarderont les onglets de leur navigateur et apparaîtra également dans leurs favoris.
- Par exemple, si vous avez un site Web consacré à l'alimentation, le choix d'un favicon contenant un fruit ou un légume peut le rendre plus mémorable.
- Si votre site Web est destiné à un cabinet d'avocats ou à une société d'investissement, un favicon traditionnel et élégant est préférable.
- Si votre site Web s'adresse aux plus jeunes, essayez de créer un favicon ludique et coloré.
Étape 2. Décidez si vous voulez un fond transparent
Si vous ne désignez pas d'arrière-plan, il se remplira de blanc, ce qui pourrait ne pas adhérer à votre marque. Un arrière-plan transparent prendra la couleur du navigateur de la personne et aura l'air plus épuré dans certains cas. Dans d'autres cas, le fait d'avoir une couleur pour l'arrière-plan fera ressortir les lettres ou les graphiques du premier plan. Décidez de ce qui serait le mieux pour votre conception et gardez-le à l'esprit au fur et à mesure que vous le faites.
Le favicon le plus basique est un carré de 16x16 et a une couleur de fond
Étape 3. Créez un favicon facile à lire
Parce que l'image de favicon que vous utiliserez est petite, il est important que vous puissiez faire passer votre marque sans embrouiller vos visiteurs. Un favicon difficile à lire laisse une impression négative et peut créer des questions dans l'esprit du visiteur sur la qualité du travail que vous pouvez fournir. Les images et les logos trop complexes ne sont pas beaux lorsqu'ils sont réduits à 16x16 ou 32x32 pixels.
- Si votre logo existant est trop compliqué, vous pouvez utiliser des tactiques pour le simplifier, afin qu'il puisse être reconnaissable à la taille d'un favicon. Utilisez des initiales au lieu d'afficher le nom complet de l'entreprise, ou concevez une simple icône plutôt que d'utiliser une image.
- Si vous avez déjà un logo simple, vous pouvez réduire l'image et la définir comme votre favicon. Vous devrez peut-être le modifier avant de le convertir en un fichier d'icônes.
- Vous pouvez également utiliser une image d'un objet qui décrit le thème général de votre site.
Étape 4. Créez un favicon esthétique
La structure de votre favicon est appelée sa forme. Les favicons prennent généralement des formes, comme un cercle ou un carré. Lorsque vous concevez votre favicon, il est généralement préférable qu'il puisse s'adapter à l'une de ces formes de base, car les formes libres peuvent souvent être confuses ou confuses à 16x16 pixels. Un autre aspect important de votre conception s'appelle l'unité esthétique. L'unité esthétique comprend les détails et les tailles des différents composants de votre favicon et la façon dont votre favicon est équilibré. Plus les détails sont uniformes, plus votre favicon sera cohérente. Par exemple, l'utilisation de différents types ou tailles de police dans votre favicon n'est pas agréable à l'œil et peut rendre votre favicon confus ou désordonné.
- Un autre exemple d'unité esthétique consiste à maintenir des coins arrondis dans toutes les formes de votre favicon.
- Un bon exemple d'icône qui a changé de forme est le favicon de Google. Il est passé d'un carré à un cercle.
Étape 5. Utilisez des couleurs cohérentes avec votre marque
Lorsque vous créez votre favicon, vous devez le créer en profondeur de couleur 8 bits (256 couleurs) ou 24 bits (16,7 millions de couleurs), car cela fonctionnera sur les navigateurs modernes. Assurez-vous que les couleurs que vous choisissez se trouvent ailleurs sur votre site Web ou sont associées d'une manière ou d'une autre à votre marque. Un favicon dont les couleurs ne figurent pas sur votre site Web, votre logo ou vos applications ne sera pas mémorable et les gens ne pourront pas associer l'icône à votre marque.
- Certaines utilisations créatives de la couleur des favicons incluent GitHub qui change de couleur en fonction de l'état de votre système et Trello, qui change en fonction de votre couleur d'arrière-plan.
- Les couleurs les plus couramment utilisées dans les favicons sont le rouge et le bleu.
Étape 6. Tenez compte de votre public lors de la conception d'un favicon
Outre l'identification de votre marque, votre favicon doit être attrayante pour vos visiteurs. Des personnes ayant des goûts, des intérêts et des normes sociétales différents examineront différentes iconologies sous différents angles. Des différences culturelles existent au sein de notre société et pourraient dérouter ou repousser le public que vous essayez d'attirer.
Par exemple, Mac Os X utilise un timbre qui est un symbole universel pour le courrier. L'utilisation d'une boîte aux lettres ne serait pas aussi efficace car les boîtes aux lettres varient selon les régions du monde
Étape 7. Obtenez l'opinion d'amis et de collègues
Bien qu'il ne soit pas incroyablement intensif graphiquement, un favicon est une partie importante de votre marque. Par exemple, pensez à vos sites Web préférés comme Twitter, Gmail, Facebook ou wikiHow, et à quel point vous associez le favicon à la marque. Si vous n'avez pas un bon sens du design ou si vous ne savez pas quel type de design vous devriez avoir pour votre site, consultez des amis qui ont le sens du design ou qui travaillent dans le graphisme.
- Demandez autour de vous dans votre réseau d'amis pour voir si quelqu'un peut fournir des conseils de conception gratuitement.
- Les grandes entreprises ont des graphistes internes qui peuvent créer l'image de favicon.
Méthode 2 sur 3: Création de votre favicon
Étape 1. Utilisez un logiciel de retouche photo pour créer votre favicon
Vous pouvez utiliser un logiciel de retouche photo comme Adobe Photoshop ou Illustrator pour créer l'image de votre favicon. Ces applications logicielles vous permettent également de redimensionner et d'exporter l'image au bon format. Certains logiciels vous permettent de créer votre favicon à la main.
- Il existe également des programmes d'édition spécifiques aux favicons que vous pouvez trouver en ligne.
- Utilisez un moteur de recherche et tapez « éditeurs de favicon ».
- Faites en sorte que la taille de votre toile soit 512x512 pixels, car ce nombre se décompose en la plupart des tailles de favicon applicables et est toujours suffisamment grand pour que vous puissiez éditer efficacement.
- D'autres logiciels de retouche photo populaires incluent GIMP, PhotoScape et Paint. NET.
- Lorsque vous utilisez ce logiciel, vous ne pourrez pas modifier les fichiers.ico directement, mais vous pouvez utiliser des fichiers.png,-j.webp" />
Étape 2. Redimensionnez et enregistrez votre favicon
32x32 px est la taille des éléments du bureau Windows tandis que 16x16 px est la taille des favicons dans l'onglet de votre navigateur. Après avoir créé votre favicon dans un format plus grand, il est important de réduire sa taille afin que vous puissiez voir à quoi il ressemblera dans les navigateurs des utilisateurs. S'il est illisible ou n'est pas esthétique, recommencez sur votre conception d'origine. Pensez aux plates-formes sur lesquelles votre site Web ou votre application sera le plus susceptible d'être utilisé, puis créez un favicon pour couvrir toutes vos bases.
- Il est important de noter que différents matériels et logiciels utilisent différentes tailles de favicon.
- Certaines autres tailles de favicon incluent 57x57px pour l'écran d'accueil iOS standard, 72x72px pour l'iPad, 96x96px pour Google TV, 128x128px pour le Chrome Web Store et 195x195px pour Opera Speed Dial.
- Si vous souhaitez couvrir toutes vos bases, vous pouvez créer des versions de votre favicon dans chacune de ces tailles.
- Enregistrez des versions distinctes de votre favicon, afin de ne pas perdre le travail que vous avez effectué.
Étape 3. Combinez vos fichiers à l'aide d'un convertisseur
L'avantage des fichiers.ico est que vous pouvez combiner plusieurs fichiers pour le créer. Ceci est utile car différents navigateurs et logiciels voudront un favicon de taille différente. Pour vous assurer que votre favicon s'affiche bien sur toutes les différentes plates-formes, convertissez vos fichiers à l'aide d'un convertisseur en ligne. Tapez "convertisseur d'icônes" dans votre moteur de recherche préféré pour trouver des applications en ligne gratuites pour le faire. Enregistrez le fichier fusionné sous le nom "favicon.ico".
- Vous pouvez également utiliser un programme comme GIMP doté d'une fonctionnalité intégrée ou télécharger un plugin appelé ICO FORMAT sur Adobe Photoshop.
- Créez un nouveau dossier pour pouvoir stocker de nouvelles favicons ou des travaux en cours.
- Tapez « convertisseur.ico » ou « générateur de favicon » dans un moteur de recherche pour trouver différents outils que vous pouvez utiliser.
Méthode 3 sur 3: Implémentation de votre favicon
Étape 1. Téléchargez votre favicon si vous utilisez un éditeur de site Web
De nombreux éditeurs de sites Web sont fournis avec un formulaire intégré qui vous permet de télécharger automatiquement votre favicon sur votre site Web. Si vous utilisez un éditeur de site Web qui intègre cela, recherchez les options qui disent « Télécharger un favicon » ou « Ajouter un favicon » dans le menu des paramètres de votre site Web. Sélectionnez votre fichier favicon.ico et téléchargez-le sur votre site.
Si vous ne trouvez pas d'endroit pour télécharger votre favicon sur votre éditeur de site Web, vous devrez le faire manuellement
Étape 2. Téléchargez le fichier dans le répertoire racine de votre site
Si votre site Web prend en charge le protocole de transfert de fichiers ou FTP, vous pouvez utiliser votre client FTP pour télécharger votre nouveau fichier favicon.icon dans votre répertoire racine (index). Sinon, vous devrez vous rendre sur la page de votre hébergeur et télécharger l'image manuellement. N'oubliez pas de remplacer le fichier favicon.ico existant par votre nouveau fichier.
Étape 3. Ajoutez le fichier à votre en-tête
Trouvez l'endroit où vous pouvez accéder aux fichiers PHP et CSS de votre site. Accédez au fichier header.php de votre site et modifiez-le. Sous le type de balise,"
-
. Cela devrait connecter votre site à votre favicon.
Parce que vous utilisez PHP, cela signifie que tous les sites qui utilisent votre fichier d'en-tête auront désormais le même favicon
Créez votre propre icône de favicon Étape 14 Étape 4. Actualisez votre navigateur
Une fois que vous avez terminé de télécharger le favicon, vous pouvez actualiser votre navigateur pour voir votre nouvelle image à côté de la barre d'adresse. Pour accéder directement à une image de votre favicon mise à jour, tapez "https://www.votredomaine.com/favicon.ico".
- Si votre favicon n'apparaît pas initialement, vous devrez peut-être réinitialiser le cache de votre navigateur.
- Pour vider votre cache, accédez aux paramètres de votre navigateur et supprimez vos fichiers Internet temporaires, vos cookies et votre historique.
