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 du format de Fichiermodifier

le tableau suivant illustre la prise en charge du format de fichier image pour le favicon.

  1. ^ Safari, depuis la version 12.0, prend en charge les favicons SVG monochromes dans certains cas dans un format non standardmask-icon.,

en Outre, de tels fichiers d’icône peut être 16×16, 32×32, 48×48, ou 64×64 pixels, et 8-bits, 24 bits ou 32-bits de profondeur de couleur. 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 faviconEdit

Ce tableau illustre les différentes zones du navigateur où les icônes peuvent être affichées.

Opera Software a ajouté la possibilité de modifier le favicon dans le Cadran de Vitesse dans Opera 10.,

comment utiliseredit

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 link avec un attributrel dans la section<head> du document pour spécifier le format, le nom et l’emplacement des fichiers.

  1. ^ Firefox accepte uniquement favicon.ico dans le site web de la racine sans un <link> balise si le paramètre browser.chrome.site_icons est réglé sur true dans un about:config., La valeur par défaut est true. Si défini à false, ces favicons sont ignorés.
  2. ^ Opéra charges /favicon.ico seulement si Multimedia/Always load favicon option opera:config est réglé sur 1. Voir la page D’assistance Opera pour plus de détails.

Si des liens pour les favicons PNG et ICO sont présents, les navigateurs compatibles PNG-favicon 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 Chromes 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 la réduire à 16×16 sur les appareils non-retina. Opera choisira parmi l’une des icônes disponibles complètement au hasard.,

seul SeaMonkey ne récupère pas les fichiersfavicon.ico dans la racine du site Web par défaut.

Appareil supportEdit

Cette section doit être mis à jour. Veuillez mettre à jour cet article pour refléter les événements récents ou les informations nouvellement disponibles. (Mars 2018)

pour les appareils Apple avec le système d’exploitation iOS version 1.1.3 ou ultérieure, ainsi que certains appareils Android, il est possible de fournir une icône personnalisée que les utilisateurs peuvent afficher sur leur écran d’accueil en utilisant le bouton Ajouter à L’écran D’accueil dans la feuille de partage dans Safari., Cette fonctionnalité est activée en fournissant un <link rel="apple-touch-icon" ...> dans la section <head> des documents signifiés par le site web. Si l’icône personnalisée n’est pas fourni, une miniature de la page web sera mis sur l’écran d’accueil à la place.

la taille de base recommandée pour cette icône est de 152×152 pixels.

pour l’iPad, la taille de base est de 180X180 pixels. Les tablettes Android préfèrent une icône PNG 192×192.

L’icône du fichier référencé par apple-touch-icon est modifié pour ajouter des coins arrondis., Sur les versions iOS antérieures à iOS 7, une ombre portée et une brillance réfléchissante seront ajoutées, et l’icône apple-touch-icon-precomposed peut être fournie pour indiquer aux appareils de ne pas appliquer de brillance réfléchissante sur l’image.

avec des coins arrondis, ajoutés par iOS

<link rel="apple-touch-icon" href="https://example.com/image.png">

aucun HTML n’est requis par les navigateurs ou les appareils mobiles pour récupérer ces icônes. La racine du site web est l’emplacement par défaut du fichier apple-touch-icon.png (par ordre de priorité).,

recommandation HTML5 pour les icônes dans plusieurs sizesEdit

La spécification HTML5 actuelle recommande de spécifier plusieurs tailles pour les icônes, en utilisant les attributsrel="icon" sizes="space-separated list of icon dimensions" dans une balise<link>. Plusieurs formats d’icônes, y compris les formats de conteneurs tels que Microsoft .ico et Macintosh .les fichiers icns, ainsi que les graphiques vectoriels évolutifs peuvent être fournis en incluant le type de contenu de l’icône au format type="file content-type" dans la balise <link>.,

à partir d’iOS 5, les appareils mobiles Apple ignorent la recommandation HTML5 et utilisent à la place la méthode propriétaireapple-touch-icon détaillée ci-dessus. Le navigateur Web Google Chrome cependant, sélectionnera la taille correspondante la plus proche de celles fournies dans les en-têtes HTML pour créer des icônes d’application de 128×128 pixels, lorsque l’utilisateur choisit les raccourcis créer une application… à partir du menu « Outils ».

animated faviconsEdit

divers navigateurs tels que Chrome, Firefox et Opera supportent l’animation des favicons., Un rapport de bogue a été ouvert pour Firefox depuis 2001 demandant un moyen de désactiver la fonctionnalité.