Icônes de favoris - Favicons

L’icône de favoris est un petit icône associé à un site web.

1 Icone de favoris
2 Règles d’utilisation
- 2.1 Contenus
- 2.2 Personnalisation
- 2.3 Besoin d’aide ?

Icone de favoris

Il permet à l’utilisateur de repérer qu’il se trouve sur un site de l'état. Cela dans différents contextes au sein de son navigateur (dans l’onglet, la liste de favoris ou encore l’historique).

Pour les développeurs :

L'icône de favori est disponible sous plusieurs formats/tailles afin de s’afficher sur les différents navigateurs (Google Chrome, Firefox, Safari, IE 11).

En fonction de la structure de votre projet, vous pouvez conserver les chemin relatifs proposés, ou les modifier en intégrant les icônes de favoris directement à la racine du projet.

<link rel="apple-touch-icon" href="../../dist/favicons/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="../../dist/favicons/favicon.svg" type="image/svg+xml">
<link rel="shortcut icon" href="../../dist/favicons/favicon.ico" type="image/x-icon"><!-- 32×32 -->
<link rel="manifest" href="/dist/favicons/manifest.webmanifest" crossorigin="use-credentials">
<!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
<!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->

Règles d’utilisation

Contenus

Le favicon s’accompagne toujours du titre de la page courante et du nom de site
Ces deux éléments ne doivent pas dépasser 60 caractères
Le titre de la page courante doit
- Être unique, simple et concis
- permettre de comprendre la page sur laquelle l’utilisateur se trouve
Lorsque la structure du projet le permet, placer les icônes favicon.ico et apple-touch-icon.png à la racine du serveur. L’inclusion de l’ico n’est alors plus recommandé, il faut alors retirer le
<link rel="shortcut icon" href="../../dist/favicons/favicon.ico" type="image/x-icon">

Personnalisation

Ce composant n’est pas personnalisable.

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :

la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !
le centre de support pour envoyer vos demandes de correctifs et d'évolution.