Favicon | Notion

<aside> ☝

Pour générer en quelques secondes le code à insérer dans votre HTML:

https://realfavicongenerator.net

</aside>

Qu’est-ce qu’un favicon ?

Un favicon est une petite image associée à un site web.

C’est le mini-logo du site, affiché à plusieurs endroits :

dans l’onglet du navigateur
dans la liste des favoris (marque-pages)
parfois dans l’historique ou les résultats de recherche

Même s’il est très petit, le favicon est important pour l’identité visuelle d’un site.

À quoi sert un favicon ?

Le favicon sert principalement à :

Reconnaître rapidement un site parmi plusieurs onglets ouverts
Renforcer l’image de marque (logo, couleur, symbole)
Donner un site plus professionnel et crédible

Un site sans favicon fonctionne quand même, mais il paraît souvent incomplet.

À quoi ressemble un favicon ?

C’est une image très petite
Les tailles les plus courantes sont :
- 16×16 px
- 32×32 px
- 48×48 px

Comme l’image est minuscule, il faut :

un dessin simple
peu de détails
souvent un symbole, une lettre ou une icône

Où se place le favicon ?

Le favicon est lié à la page HTML grâce à une balise placée dans la partie <head> du document. Il est très souvent démultiplié en plusieurs lignes afin de maximiser la compatibilité avec les différents navigateurs et appareils.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Ce code vous est très rapidement offert par realfavicongenerator.net