Quand tu commences à naviguer sur Internet, tu arrives forcément à un moment où tu as plein d'onglets ouverts. Comment fais-tu pour passer de l'un à l'autre et savoir exactement à quoi correspond chacune des pages ouvertes ? Grâce au favicon ! Dans ce cas, on ne voit que le logo de chaque site web, ce qu'on appelle un « favicon ».
Chez Euroinnova, nous souhaitons vous expliquer comment insérer un favicon en HTML, mais nous vous présenterons également d'autres méthodes. Par exemple, vous pouvez laisser les navigateurs détecter automatiquement le favicon, même si ce n'est pas la meilleure option. Tu es prêt ? C'est parti !
Qu'est-ce qu'un favicon et pourquoi devriez-vous le connaître ?
Comme nous l'avons déjà mentionné, Le favicon est le logo, celui que tu choisiras, qui apparaît à côté du titre principal dans l'onglet de votre navigateur. En d'autres termes, cela consiste à demander au navigateur d'afficher l'image que vous lui indiquez dans le code HTML au lieu d'afficher un espace vide. C'est intéressant car les internautes se souviendront de votre favicon, ce qui renforce l'autorité de votre marque.
Créer un favicon C'est très simple, car il existe une multitude de sites web qui te permettent de créer le tien en quelques secondes. Cependant, tu dois ici tenir compte d'autres aspects, tels que l'identité visuelle de ta marque. N'oublie pas qu'il s'agit d'un élément que l'utilisateur associera directement à ta marque.
Pour approfondir le sujet notion de favicon, avant de t'expliquer comment l'intégrer dans le code HTML, Nous allons parler de ses fonctionnalités.
À quoi sert un favicon ?
Nous allons maintenant vous présenter une petite liste des raisons pour lesquelles vous devez soigner votre favicon :
- Identité visuelle : Cela permet d'identifier votre marque d'un simple coup d'œil, surtout lorsque les utilisateurs ont de nombreux onglets ouverts.
- Professionnalisme : L'ajout d'une favicon dans le code HTML montre que vous accordez une attention extrême à tous les détails de votre site web, ce qui témoigne d'un niveau de professionnalisme admirable.
- Facilité d'accès : Une favicon s'affiche également dans la barre de signets ou dans les favoris de votre navigateur. C'est pourquoi vous devez en tenir compte pour que les internautes puissent vous trouver rapidement.
- Personnalisation : Votre favicon peut non seulement refléter votre marque, mais aussi le contenu de votre site web.
- Formats pris en charge : À cet égard, une certaine souplesse est de mise, car les formats d'image tels que PNG et GIF sont acceptés.
- Fmise en œuvre facile : Comment insérer une favicon dans le code HTML ? Nous allons justement répondre à cette question.
Comment insérer une favicon en HTML ?
Chez Euroinnova, nous vous expliquons, étape par étape, comment procéder pour Mettre en place une favicon en HTML. Allez !
Créez votre favicon
Comme nous l'avons déjà mentionné, il existe une multitude d'options pour créer votre propre favicon. En fin de compte, il s'agit d'une image carrée qui doit respecter les dimensions suivantes : 16 × 16 pixels, 32 × 32 pixels ou 48 × 48 pixels. Il est important que tu précises la taille dans le code HTML, mais c'est le navigateur qui, en fin de compte, choisira la taille la plus appropriée en fonction du contexte.
Le format de l'image
Le format recommandé pour une compatibilité optimale est le .ico, mais tu peux aussi utiliser d'autres formats tels que .png o .gif. L'important ici est de vérifier que le format et la taille sont bien corrects.
Télécharge le favicon sur ton serveur
Cette étape est vraiment simple. Il te suffit de télécharger votre favicon depuis le Gestionnaire de fichiers de votre hébergement. Préparez l'image au format .ico ou .png, par exemple, puis procédez à son téléchargement.
Insérer le favicon dans le code HTML
Une fois que votre favicon est bien téléchargé sur votre hébergement, vous devez accéder au code de votre site web. Dans la partie « head », vous devrez ajouter une nouvelle ligne :
<link rel=»icon» sizes=»16×16 32×32 48×48″ type=»image/png» href=»images/myicon.png» />
Pour que tout soit clair, nous allons t'expliquer la signification de chaque attribut :
- rel=”icon” : Avec cette balise, nous indiquons qu'il s'agit du favicon du site web.
- sizes=”16×16 32×32 48×48" : Ici, comme nous le savons déjà, nous devons indiquer directement au site web la taille de notre favicon.
- type=”image/png” : Nous indiquons à notre site web qu'il s'agit d'une image au format .png.
- href=”images/myicon.png” : À ce stade, nous vous indiquons l'emplacement du fichier image du favicon.
Enregistrer les modifications
Une fois qu'on voit que enregistrez les modifications dans votre fichier HTML, Tu pourras ouvrir ton navigateur web pour voir ton favicon. S'il n'apparaît pas, tu devras peut-être vider le cache. Fais très attention à cela.
Existe-t-il des types particuliers de favicons ?
Oui, il est important de savoir qu’il existe deux types particuliers d’icônes non standard dans le navigateur Safari. Il s’agit de apple-touch-icon pour les appareils iOS et mask-icon pour les cas où la navigation s'effectue via macOS.
Voici ce que nous vous présentons ci-dessous comment cela s'écrirait en HTML dans les deux cas.
apple-touch-icon
<link rel=»apple-touch-icon» sizes=»180×180″ href=»images/myicon.png» />
mask-icon
Il faut ici garder à l'esprit que l'icône doit être un fichier SVG monochrome et qu'elle doit comporter l'attribut « color ».
<link rel=»mask-icon» href=»images/myicon.svg» color=»#226DAA» />
Español 
English (UK) 
Français