Favicône

Utilisez des favicônes pour vous assurer que les utilisateurs savent qu’ils se trouvent dans un site officiel du gouvernement de l’Ontario.

Principe directeur : Faire preuve de cohérence.

À propos des favicônes

Exemple

---

Une favicône (ou une « icône favorite ») est une petite icône associée à un site Web. Elle est affichée à divers endroits dans l’Internet et les appareils des utilisateurs.

La plupart des gens connaissent les favicônes dans l’onglet de leur navigateur. Ils apparaissent aussi dans d’autres endroits, comme :

• l’historique du navigateur
• les menus de signets
• les recommandations de la barre de recherche des navigateurs
• les résultats des moteurs de recherche
• les aperçus des liens partagés
• les écrans d’accueil des appareils

Les favicônes sont importantes pour :

• ajouter de la crédibilité aux sites
• assurer la cohérence de la marque
• aider les utilisateurs à trouver les sites dans des listes sans avoir à lire le texte

Quand utiliser des favicônes

Tous les sites Web, les sites secondaires et les applications du gouvernement de l’Ontario doivent inclure la favicône.

Les présentes directives concernent expressément les favicônes utilisées dans les sites Web. Elles ne s’appliquent pas aux applications natives.

Formats de fichiers recommandés

Nous vous recommandons d’utiliser les trois formats de fichiers pour garantir la cohérence dans le plus grand nombre de navigateurs possible.

PNG

Les fichiers PNG sont des images tramées de taille et de résolution fixes. Ces images ne peuvent pas être agrandies mathématiquement sans paraître floues; c’est pourquoi différentes tailles sont généralement fournies dans ce format.

Le format PNG fonctionne bien avec les appareils iOS, Android et Windows 10+. Il s’agit du type de fichier recommandé, car il est pris en charge par la plupart des navigateurs récents.

SVG

Les fichiers SVG sont des images vectorielles dont l’apparence est nette lorsqu’elles sont agrandies ou réduites.

Ce format unique est également compatible en modes d’éclairage et de veilleuse, le mettant ainsi à l’abri du vieillissement.

Malgré ces avantages, il n’est pas entièrement pris en charge par tous les navigateurs Web et n’est donc pas recommandé comme seul format.

ICO

Les fichiers ICO sont des images tramées. En tant que format de fichier favicône le plus ancien, un ICO fonctionnera dans presque tous les navigateurs Web, même les plus vieux. Ils sont souvent utilisés pour les anciens navigateurs.

Ils sont recommandés pour une compatibilité maximale..

Tailles des favicônes

Nous fournissons une gamme de formats et de tailles pour garantir que la favicône :

• ait une apparence nette sur les écrans Retina
• satisfait à la plupart des exigences et particularités des différents navigateurs

Appareils mobiles

Les appareils iOS et Android permettent aux utilisateurs d’ajouter des pages Web à leur écran d’accueil. Cette fonction nécessite des favicônes de plus grande taille afin de garantir une apparence propre et nette.

Instructions pour la mise en œuvre

L’ensemble de favicônes inclut :

• un seul icône SVG qui est compatible en mode d’éclairage et en mode veilleuse pour les nouveaux navigateurs
• un fichier ICO de 32×32 pixels pour les anciens navigateurs
• quatre fichiers PNG :
  • 48×48 pixels pour les navigateurs et résultats de moteurs de recherche
  • 180×180 pixels pour les appareils Apple
  • 192×192 pixels pour les écrans d’accueil des appareils Android
  • 512×512 pixels pour les écrans d’attente des appareils Android (utilisés lorsque les sites ou les applications sont en train de téléchargés)
• un exemple de fichier manifest.json file

HTML instructions

1. Téléchargez la trousse de distribution ou installez la trousse de styles globaux du Système de conception pour l’Ontario (consultez Introduction au Système de conception (pour les développeurs) pour ces options). Toutes les favicônes et un exemple de fichier manifest.json se trouvent dans le fichier « favicônes » de la trousse.
2. Déplacez les fichiers de favicônes dans le fichier d’actifs approprié de votre projet.
3. Incluez des liens vers toutes les favicônes et le fichier manifest.json dans la balise <head> du fichier principal d’index de niveau supérieur.
   1. Ajoutez des liens distincts vers les fichiers SVG, ICO et deux des fichiers PNG (48×48 et 180×180).
   2. Les deux fichiers PNG restants (192×192 et 512×512) sont référencés dans le fichier manifest.json. Ajoutez un lien vers ce fichier dans la balise Head également.
4. Mettez à jour le nom et la description de l’application manifest.json pour qu’ils correspondent à votre projet. Il se peut que les sources des icônes doivent également être mises à jour en fonction de l’endroit où sont enregistrées les favicônes dans votre projet.

Consultez l’exemple.

Note : Ne changez pas les noms de fichiers de favicônes du Système de conception. La cohérence des noms de fichiers facilite les mises à jour.

Exemple : copie des favicônes avec Node

copyfiles -E -f "node_modules/@ontario-digital-service/ontario-design-system-component-library-react/dist/assets/favicons/**" public/assets/favicons

Note : par défaut, copyfiles écrasera un fichier personnalisé manifest.json avec notre version générique. Pour éviter l’écrasement de votre manifest.json, ajoute une exclusion au processus de copie de fichier. Par exemple :

copyfiles -e **/manifest.json -E -f "node_modules/@ontario-digital-service/ontario-design-system-component-library-react/dist/assets/favicons/**" public/assets/favicons

Exemple : liens dans la balise Head

<head>
    …
    <link rel=”icon” href=”/favicon.ico” size=”any”/> <link rel=”shortcut icon” href=”/favicon.ico” size=”any”/>
    <link rel=”icon” href=”/favicon.svg” type=”image/svg+xml” />
    <link rel=”icon” href=”/favicon-48x48” type=”image/png” /> // (48 x 48)
    <link rel=”apple-touch-icon” href=”/apple-touch-icon.png” type=”image/png”/> // (180 x 180)
    <link rel=”manifest” href=”/manifest.json” />
    …
</head>