Icône de favori - Favicon
A favicon ( / f æ v . Ɪ ˌ k ɒ n / , abréviation de l' icône préférée ), également connu sous le nom d' une icône de raccourci , icône du site , icône onglet , icône URL ou icône de signet , est un fichier contenant un ou plusieurs petits icônes , associées à un site Web ou à une page Web en particulier . Un concepteur de sites Web peut créer une telle icône et la télécharger sur un site Web (ou une page Web) de plusieurs manières, et les navigateurs Web graphiques l' utiliseront ensuite. Les navigateurs qui prennent en charge les favicons affichent généralement le favicon d'une page dans la barre d'adresse du navigateur (parfois aussi dans l'historique) et à côté du nom de la page dans une liste de signets . Les navigateurs qui prennent en charge une interface de document à onglets affichent généralement le favicon d'une page à côté du titre de la page sur l'onglet, et les navigateurs spécifiques au site utilisent le favicon comme icône de bureau .
Histoire
En mars 1999, Microsoft a publié Internet Explorer 5 , qui prenait en charge les favicons pour la première fois. À l'origine, le favicon était un fichier appelé favicon.icoplacé dans le répertoire racine d'un site Web. Il a été utilisé dans Internet Explorer de favoris (signets) et à côté de l' URL dans la barre d'adresse si la page a été bookmarked. Un effet secondaire était que le nombre de visiteurs qui avaient mis la page en signet pouvait être estimé par les demandes du favicon. Cet effet secondaire ne fonctionne plus, car tous les navigateurs modernes chargent le fichier favicon à afficher dans leur barre d'adresse Web, que le site soit ou non mis en signet.
Standardisation
Le favicon a été standardisé par le World Wide Web Consortium (W3C) dans la recommandation HTML 4.01, publiée en décembre 1999, et plus tard dans la recommandation XHTML 1.0, publiée en janvier 2000. L'implémentation standard utilise un élément de lien avec un relattribut dans la <head>section du document pour spécifier le format de fichier ainsi que le nom et l'emplacement du fichier. Contrairement au schéma précédent, le fichier peut se trouver dans n'importe quel répertoire de site Web et avoir n'importe quel format de fichier image.
En 2003, le .icoformat a été enregistré par un tiers auprès de l' Internet Assigned Numbers Authority (IANA) sous le type MIME image/vnd.microsoft.icon . Cependant, lors de l'utilisation du .icoformat d'affichage sous forme d'images (par exemple, pas sous forme de favicon), Internet Explorer ne peut pas afficher les fichiers servis avec ce type MIME standardisé. Une solution de contournement pour Internet Explorer consiste à s'associer .icoau type image/x-iconMIME non standard dans les serveurs Web.
La RFC 5988 a établi un registre de relations de liens IANA et a rel="icon"été enregistrée en 2010 sur la base de la spécification HTML5 . Le populaire <link rel="shortcut icon" type="image/png" href="image/favicon.png">identifie théoriquement deux relations, shortcutet icon, mais shortcutn'est pas enregistré et est redondant. En 2011, le standard de vie HTML précisait que pour des raisons historiques shortcutest autorisé immédiatement avant icon; cependant, shortcutn'a pas de sens dans ce contexte.
Héritage
Internet Explorer 5-10 ne prend en charge que le format de fichier ICO . Netscape 7 et Internet Explorer versions 5 et 6 affichent le favicon uniquement lorsque la page est mise en signet, et pas simplement lorsque les pages sont visitées comme dans les navigateurs ultérieurs.
Implémentation du navigateur
Les tableaux suivants illustrent la prise en charge de diverses fonctionnalités avec les principaux navigateurs Web. Sauf indication contraire, les numéros de version indiquent le numéro de version de départ d'une fonctionnalité prise en charge.
Prise en charge des formats de fichiers
Le tableau suivant illustre la prise en charge du format de fichier image pour le favicon.
| Navigateur | format de fichier image | ||||||
|---|---|---|---|---|---|---|---|
| ICO | PNG | GIF | GIF animés | JPEG | APNG | SVG | |
| Bord | Oui | Oui | Oui | Non | Oui | Inconnu | Oui |
| Firefox | 1,0 | 1,0 | 1,0 | Oui | Oui | 3.0 | 41,0 |
| Google Chrome | Oui | Oui | 4.0 | Non | 4.0 | Non | 80 |
| Internet Explorer | 5.0 | 11,0 | 11,0 | Non | Non | Non | Non |
| Opéra | 7.0 | 7.0 | 7.0 | 7.0 | 7.0 | 9.5 | 44,0 |
| Safari | Oui | 4.0 | 4.0 | Non | 4.0 | Non | Non standard (12,0) |
De plus, ces fichiers d'icônes peuvent avoir une taille de 16 × 16, 32 × 32, 48 × 48 ou 64 × 64 pixels et une profondeur de couleur de 8 bits, 24 bits ou 32 bits . L' article sur le format de fichier ICO explique les détails des icônes avec plus de 256 couleurs sur diverses plates- formes Microsoft Windows .
Utilisation de favicon
Ce tableau illustre les différentes zones du navigateur où les favicons peuvent être affichés.
| Navigateur | Barre d'adresse | Liste déroulante de la barre d'adresse | Barre de liens | Signets | Onglets | Faites glisser vers le bureau |
|---|---|---|---|---|---|---|
| Bord | Non | Oui | Oui | Oui | Oui | Oui |
| Firefox | 1.0–12.0 : Oui > v13 : Non |
Oui | Oui | Oui | Oui | Oui |
| Google Chrome | Non | Non | Oui | Oui | 1,0 | Non |
| Internet Explorer | 7.0 | Non | 5.0 | 5.0 | 7.0 | 5.0 |
| Opéra | 7.0-12.17 : Oui > v14 : Non |
Non | 7.0 | 7.0 | 7.0 | 7.0 |
| Safari | Oui | Oui | Non | Oui | 1,0 à 8,0 : Oui 9,0 à 11,0 : Non > 12,0 : Facultatif |
Non |
Opera Software a ajouté la possibilité de changer le favicon dans le numéro abrégé dans Opera 10 .
Comment utiliser
Ce tableau illustre les différentes façons dont le favicon peut être reconnu par le navigateur Web. L'implémentation standard utilise un élément de lien avec un relattribut dans la <head>section du document pour spécifier le format, le nom et l'emplacement du fichier.
| Bord | Firefox | Google Chrome | Internet Explorer | Opéra | Safari | |
|---|---|---|---|---|---|---|
<link rel="shortcut icon"
href="https://example.com/myicon.ico">
|
Oui | Oui | Oui | Oui | Oui | Oui |
<link rel="icon"
type="image/vnd.microsoft.icon"
href="https://example.com/image.ico">
|
Oui | Oui | Oui | Oui (à partir d'IE 9) | Oui | Oui |
<link rel="icon" type="image/x-icon"
href="https://example.com/image.ico">
|
Oui | Oui | Oui | Oui (à partir d'IE 9) | Oui | Oui |
<link rel="icon"
href="https://example.com/image.ico">
|
Oui | Oui | Oui | Oui (à partir d'IE 11) | Oui | Oui |
<link rel="icon" type="image/gif"
href="https://example.com/image.gif">
|
Oui | Oui | Oui | Oui (à partir d'IE 11) | Oui | Oui |
<link rel="icon" type="image/png"
href="https://example.com/image.png">
|
Oui | Oui | Oui | Oui (à partir d'IE 11) | Oui | Oui |
<link rel="icon" type="image/svg+xml"
href="https://example.com/image.svg">
|
Oui | Oui | Oui | Oui | Oui | Non |
<link rel="mask-icon"
href="https://example.com/image.svg" color="red">
|
Non | Non | Non | Non | Non | Oui |
favicon.ico situé à la racine du site
|
Oui | Optionnel | Oui | Oui | Optionnel | Oui |
| priorité : préférez la version root ou liée (X)HTML | lié | lié | lié | lié | ? | ? |
Si des liens pour les favicons PNG et ICO sont présents, les navigateurs compatibles avec les favicons PNG sélectionnent le format et la taille à utiliser comme suit. Firefox et Safari utiliseront le favicon qui vient en dernier. Chrome pour Mac utilisera le favicon au format ICO, sinon le favicon 32 × 32. Chrome pour Windows utilisera le favicon qui vient en premier s'il est 16×16, sinon l'ICO. Si aucune des options susmentionnées n'est disponible, les deux Chrome utiliseront le favicon qui vient en premier, exactement le contraire de Firefox et Safari. En effet, Chrome pour Mac ignorera le favicon 16 × 16 et utilisera la version 32 × 32, uniquement pour le réduire à 16 × 16 sur les appareils sans rétine. Opera choisira parmi toutes les icônes disponibles de manière complètement aléatoire.
Seul SeaMonkey ne récupère pas les favicon.icofichiers à la racine du site Web par défaut.
Recommandation HTML5 pour les icônes de plusieurs tailles
La spécification HTML5 actuelle recommande de spécifier plusieurs tailles pour les icônes, en utilisant les attributs dans une balise. Plusieurs formats d'icônes, y compris des formats de conteneur tels que les fichiers Microsoft .ico et Macintosh .icns , ainsi que des graphiques vectoriels évolutifs peuvent être fournis en incluant le type de contenu de l'icône dans le format de la balise.
rel="icon" sizes="space-separated list of icon dimensions"<link>type="file content-type"<link>
À partir d' iOS 5 , les appareils mobiles Apple ignorent la recommandation HTML5 et utilisent à la place la apple-touch-iconméthode propriétaire détaillée ci-dessus. Le Google Chrome navigateur Web cependant, sélectionnera la taille correspondant le plus proche de ceux prévus dans les en- têtes HTML pour créer 128 × 128 pixels icônes d'application , lorsque l'utilisateur choisit le créer des raccourcis d'application ... dans le menu « Outils ».
Icônes de l'écran d'accueil sur les appareils mobiles
Sur les iPhone et iPad d' Apple , ainsi que sur les appareils mobiles Android , les utilisateurs peuvent épingler des pages Web sous forme d'icônes de raccourci sur leur écran d'accueil . Ces icônes de raccourci ressemblent aux applications classiques et les développeurs Web peuvent leur fournir des icônes dédiées.
Appareils Apple
Pour les appareils Apple dotés du système d'exploitation iOS version 1.1.3 ou ultérieure, les utilisateurs peuvent épingler un site Web à l'écran d'accueil à l'aide du bouton Ajouter à l'écran d'accueil dans la feuille de partage dans Safari.
Cela fonctionne pour n'importe quel site Web. Mais pour qu'iOS affiche le raccourci avec une icône, le site Web doit fournir un <link rel="apple-touch-icon" ...>dans la <head>section des documents desservis par le site Web. Si l'icône personnalisée n'est pas fournie, une vignette de la page Web sera placée sur l'écran d'accueil à la place.
Les tailles des icônes d'application sur les différentes classes d'appareils diffèrent. Les tailles recommandées pour les icônes sont 152x152 pour les iPads (jusqu'à l' iPad 2 , sorti en 2011), 167x167 pour les iPads avec écrans Retina ( iPad 3 et versions ultérieures) et 180x180 pour les iPhones. Si aucune icône de la taille correspondante n'est fournie, iOS choisira la plus grande icône rel="apple-touch-icon"et la redimensionnera automatiquement.
- Exemple de code
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Le fichier icône référencé par apple-touch-iconest modifié pour ajouter des coins arrondis. Sur les versions iOS antérieures à iOS 7, une ombre portée et une brillance réfléchissante seraient ajoutées, et une apple-touch-icon-precomposedicône peut être fournie pour indiquer aux appareils de ne pas appliquer de brillance réfléchissante sur l'image.
Aucun code HTML n'est requis par les navigateurs ou les appareils mobiles pour récupérer ces icônes non plus. La racine du site Web est l'emplacement par défaut du fichier apple-touch-icon.png(par ordre de priorité).
Appareils Android
Sur les appareils Android, les utilisateurs peuvent utiliser la fonction Ajouter à l'écran d'accueil dans le menu Outils de Chrome pour épingler une page Web sur leur écran d'accueil.
Cela fonctionne également pour n'importe quel site Web, mais si aucun favicon n'est fourni, une icône générique est utilisée. Comme les icônes des applications Android sont dimensionnées en 48x48 points, le site Web doit fournir des favicons dimensionnés en multiples de 48x48 pixels. Pour les appareils modernes à haute résolution, Google recommande de fournir des icônes en 192x192 pixels.
- Exemple de code
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
Android prend également en charge les fichiers Web Manifest, qui permettent d'intégrer plus profondément les sites Web dans le système. Un manifeste Web est un fichier JSON qui spécifie les métadonnées d'une application Web progressive. Il permet au développeur de fournir non seulement les icônes, mais également un nom court à afficher sur l'écran d'accueil ainsi que les couleurs du thème. Cependant, il n'est pas nécessaire de fournir un fichier manifeste Web pour que la fonction Ajouter à l'écran d'accueil fonctionne.
Icônes de favoris animées
Divers navigateurs tels que Chrome, Firefox et Opera prennent en charge l'animation des favicons. Un rapport de bogue a été ouvert pour Firefox depuis 2001 demandant un moyen de désactiver cette fonctionnalité.
Limites et critiques
En raison de la nécessité de toujours le vérifier dans un emplacement fixe, le favicon peut entraîner un temps de chargement de page artificiellement lent et des entrées 404 inutiles dans le journal du serveur s'il n'existe pas.
Le W3C n'a pas standardisé l'attribut rel, il existe donc d'autres mots-clés tels que l' icône de raccourci qui sont également acceptés par l' agent utilisateur .
Les favicons sont souvent manipulés dans le cadre d'attaques de phishing ou d'écoute clandestine contre des pages Web HTTPS . De nombreux navigateurs Web affichent des favicons près des zones de l'interface utilisateur du navigateur Web, telles que la barre d'adresse, qui sont utilisées pour indiquer si la connexion à un site Web utilise un protocole sécurisé comme TLS . En changeant le favicon en une image de cadenas familière, un attaquant peut tenter de tromper l'utilisateur en lui faisant croire qu'il est connecté en toute sécurité au site Web approprié. Les outils d' attaque automatisés de l' homme du milieu tels que SSLStrip utilisent cette astuce. Afin d'éliminer cela, certains navigateurs Web, tels que Firefox ou Google Chrome, affichent le favicon dans l'onglet tout en affichant l'état de sécurité du protocole utilisé pour accéder au site Web à côté de l'URL.
Étant donné que les favicons sont généralement situés à la racine du répertoire du site sur le serveur, ils peuvent être utilisés avec une certaine fiabilité pour révéler si un client Web est connecté à un service donné. Cela fonctionne en utilisant la fonction de redirection après connexion de nombreux sites Web, en recherchant le favicon dans une URL de redirection après connexion et en testant la réponse du serveur pour déterminer si l'utilisateur reçoit la ressource demandée (ce qui signifie qu'ils sont connectés), ou à la place redirigés vers la page de connexion (ce qui signifie qu'ils ne sont pas connectés au service).
En 2021, une méthode de suivi du navigateur utilisant des favicons a été démontrée par des chercheurs de l'Université de l'Illinois.