Un Générateur de Favicon pour votre site web

A la recherche d’un outil pour mettre en place un favicon pour votre site web ? Ne cherchez plus, voici le générateur de favicon qu’il vous faut.

Si le terme Favicon ne vous parle pas, il s’agit de l’icône qui apparait sur la gauche de l’onglet de votre navigateur web lorsque vous consultez un site Internet. Cette icone est également exploitée dans la liste de sites mis en favoris , dans les moteurs de recherche, ainsi que sur les smartphones pour ceux qui mettent en place des raccourcis ou encore sur les progressive web app. Il est donc important que cette favicon soit disponible pour l’ensemble des supports et optimale.

La mise en place de favicon pour un site web peut s’avérer un peu prise de tête quand il s’agit d’être compatible partout. Heureusement, il existe un générateur en ligne qui permet de paramétrer votre favicon.

Real Favicon Générator, le Générateur de Favicon, pour de vrai.

Real Favicon Generator est un outil en ligne qui permet de générer votre favicon dans de multiples formats afin d’être compatible sur l’ensemble des navigateurs (Chrome, Firefox, Internet Explorer, Edge, Safari etc.) et plateformes : iOS, Android, Windows, Mac OS X entre autres. Ce dernier, suite à l’upload de votre image va vous proposer de configurer l’apparence de l’icône pour les multiples plateformes et autres navigateurs et vous générer un package (visuels et code) à mettre en place sur le site de manière très simple.

Découvrir Favicon Generator

Uploader le visuel de base dans le générateur de Favicon

La première étape va consister à uploader votre image qui constituera votre Favicon. Cette image doit être de 260x260px pour être la plus optimale possible. Aussi, je vous conseille (mais vous en faites ce que vous voulez ^^), de mettre simplement un symbole et un fond et d’éviter les textes pour des raisons de lisibilité. Entre les différents thèmes de navigateur aujourd’hui, il est plus sécure d’avoir un fond afin d’éviter que la couleur du navigateur rende illisible votre favicon.

Générateur de favicon pour site Web

Configurer le Favicon

Lorsque votre image est uploadée dans Favicon Generator, il vous est possible de configurer l’apparence que prendra l’icône finale sur les différents supports : navigateurs et OS entre autres.
Pour vous aider, des aperçus vous sont donnés afin de vous rendre compte du rendu final.

Ainsi, pour le favicon destiné aux navigateurs web et les moteurs de recherche tels que Google, il est possible d’utiliser votre image telle-quelle ou bien d’ajouter des arrondis, un fond ou encore ajuster la taille.

Le générateur de Favicon vous permet de configurer l'apparence de l'icône sur le navigateur

Pour iOS, vous avez la possibilité de créer une bordure ou encore insérer une icone dédiée pour ce système via l’onglet « dedicated picture« .

Le même type d’options sont disponibles pour Android, avec quelques paramètres supplémentaires comme la possibilité de définir le nom qui apparaîtra en dessous de l’icône.

Vous l’aurez compris, en fonction des plateformes, une multitude de choix vous sont proposés. Vous n’avez donc plus qu’à définir vos préférences…

Une fois que vous avez terminé, il ne vous restera plus qu’à cliquer sur « Générate your Favicons and HTML code » tout en bas de la page.

Récupérer le package et insérer le code

Au terme de votre paramétrage, un package va vous être proposé à télécharger.
Récupérez ce dernier. Il contient un ensemble de fichiers vers lesquels vous devrez pointer avec des balises <link> et <meta>.
Vous pouvez stocker ces fichiers dans un dossier nommé par exemple « Favicon » sur votre site.

Ensuite, récupérez le code fourni qui ressemble à quelque chose comme ceci :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ff0000">

Ce code est à insérer entre les balises <head> </head> de votre site.
Dans l’attribut href, vous n’aurez plus qu’à placer le chemin menant à votre dossier « favicon » contenant les fichiers précédemment téléchargés.

Pour les développeurs sous WordPress comme moi, n’hésitez pas à utiliser la fonction « get_template_directory_uri() » pour obtenir le chemin menant à votre thème.

Amusez-vous bien ^^

Si tu as aimé... tu peux partager et/ou commenter :)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Voici d'autres tutos qui peuvent t'intéresser