Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Table of Contents

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).  

...

Info

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.

Code Block
languagehtml
<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"><!-- 32×32 -->

Personnalisation

Ce composant n’est pas personnalisable.

Besoin d’aide ?

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