Les navigateurs récents permettent de personnaliser facilement certains composants, comme les icônes, la couleur de la barre d'adresse et même d'ajouter des éléments tels que des tuiles personnalisées. Ces ajustements simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.
Les navigateurs récents permettent de personnaliser facilement certains composants, comme les icônes, la couleur de la barre d'adresse et même d'ajouter des éléments tels que des tuiles personnalisées. Ces ajustements simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.
Fournir des icônes et des vignettes de qualité
Lorsqu'un internaute consulte votre page Web, le navigateur tente de récupérer une icône dans le code HTML. L'icône peut s'afficher à de nombreux endroits, y compris dans l'onglet du navigateur, le changement d'application récent, la page de l'onglet "Nouvel onglet" (ou celui consulté récemment) et plus encore.
En fournissant une image de haute qualité, vous rendez votre site plus reconnaissable, ce qui permettra aux utilisateurs de le trouver plus facilement.
Pour assurer une compatibilité complète avec tous les navigateurs, vous devez ajouter quelques balises à l'élément <head> de chaque page.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome et Opera
Chrome et Opera utilisent icon.png, qui est ajusté à la taille nécessaire par l'appareil. Pour empêcher le scaling automatique, vous pouvez également fournir des tailles supplémentaires en spécifiant l'attribut sizes.
Safari
Safari utilise également la balise <link> avec l'attribut rel: apple-touch-icon pour indiquer l'icône de l'écran d'accueil.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Un fichier PNG non transparent de 180 px ou 192 px carré est idéal pour l'icône Apple Touch.
Nous vous déconseillons d'inclure plusieurs versions via l'attribut sizes.
Auparavant, Safari pour iOS considérait le mot clé -precomposed pour éviter d'ajouter des effets visuels, mais cela n'est plus nécessaire depuis iOS 7.
Internet Explorer et Windows Phone
Le nouvel écran d'accueil de Windows 8 prend en charge quatre mises en page différentes pour les sites épinglés et nécessite quatre icônes. Vous pouvez omettre les balises Meta pertinentes si vous ne souhaitez pas utiliser une taille spécifique.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Vignettes dans Internet Explorer
Les "Sites épinglés" et les "Vignettes actives" de Microsoft vont bien au-delà des autres implémentations et dépassent le cadre de ce guide. Pour en savoir plus, consultez la page MSDN sur la création de cartes actives.
Couleur des éléments du navigateur
À l'aide de différents éléments meta, vous pouvez personnaliser le navigateur et même des éléments de la plate-forme. N'oubliez pas que certains peuvent ne fonctionner que sur des plates-formes ou des navigateurs spécifiques, mais qu'ils peuvent toutefois améliorer considérablement l'expérience utilisateur.
Chrome, Firefox OS, Safari, Internet Explorer et Opera Coast vous permettent de définir des couleurs pour les éléments du navigateur, et même de la plate-forme, à l'aide de balises Meta.
Méta-thème pour Chrome et Opera
Pour spécifier la couleur du thème de Chrome sous Android, utilisez la couleur du thème méta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Style spécifique à Safari
Safari vous permet d'appliquer un style à la barre d'état et de spécifier une image de démarrage.
Spécifier une image de démarrage
Par défaut, Safari affiche un écran vide pendant le chargement et après plusieurs chargements d'une capture d'écran de l'état précédent de l'application. Pour éviter cela, demandez à Safari d'afficher une image de démarrage explicite en ajoutant une balise de lien avec rel=apple-touch-startup-image. Exemple :
<link rel="apple-touch-startup-image" href="icon.png">
L'image doit avoir la taille spécifique de l'écran de l'appareil cible, sinon elle ne sera pas utilisée. Pour en savoir plus, consultez les Consignes relatives au contenu Web de Safari.
Bien que la documentation d'Apple ne soit pas exhaustive sur ce sujet, la communauté des développeurs a trouvé un moyen de cibler tous les appareils à l'aide de requêtes média avancées afin de sélectionner l'appareil approprié, puis de spécifier l'image appropriée. Voici une solution fonctionnelle fournie par tfausak
Modifier l'apparence de la barre d'état
Vous pouvez remplacer l'apparence de la barre d'état par défaut par black ou black-translucent. Avec black-translucent, la barre d'état flotte au-dessus du contenu en plein écran au lieu de le pousser vers le bas. Cela donne plus de hauteur à la mise en page, mais masque le haut. Voici le code requis:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black