Icônes et couleurs du navigateur

Les navigateurs modernes 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 cartes personnalisées. Ces modifications simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.

Les navigateurs modernes 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 cartes personnalisées. Ces modifications simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.

Fournir des icônes et des cartes de qualité

Lorsqu'un utilisateur accède à votre page Web, le navigateur tente de récupérer une icône à partir du code HTML. L'icône peut s'afficher à plusieurs endroits, y compris dans l'onglet du navigateur, dans le commutateur d'application récent, sur la page de l'onglet nouvelle (ou récemment consultée), etc.

Une image de haute qualité rend votre site plus reconnaissable, ce qui permet aux utilisateurs de le trouver plus facilement.

Pour être entièrement compatible 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 mis à l'échelle à 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 PNG non transparent de 180 ou 192 pixels de côté est idéal pour l'apple-touch-icon.

Il est déconseillé d'inclure plusieurs versions via l'attribut sizes. Auparavant, Safari pour iOS prenait en compte le mot clé -precomposed pour éviter d'ajouter des effets visuels, mais ce n'est plus nécessaire depuis iOS 7.

Internet Explorer et Windows Phone

La nouvelle expérience d'écran d'accueil de Windows 8 accepte quatre mises en page différentes pour les sites épinglés et nécessite quatre icônes. Vous pouvez omettre les balises méta pertinentes si vous ne souhaitez pas prendre en charge 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">

Cartes dans Internet Explorer

Les "sites épinglés" et les "tuiles dynamiques" rotatifs de Microsoft vont bien au-delà des autres implémentations et ne sont pas abordés dans ce guide. Pour en savoir plus, consultez cette page de MSDN sur la création de cartes en direct.

Colorer les éléments du navigateur

En utilisant 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 ne fonctionnent que sur certaines plates-formes ou certains navigateurs, mais qu'ils peuvent grandement améliorer l'expérience.

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 pour la plate-forme à l'aide de balises Meta.

Couleur du thème Meta pour Chrome et Opera

Pour spécifier la couleur du thème pour Chrome sur Android, utilisez la couleur du thème méta.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Couleurs du thème qui donnent du style à la barre d&#39;adresse dans Chrome.

Styling spécifique à Safari

Safari vous permet de styliser 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, une capture d'écran de l'état précédent de l'application. Vous pouvez éviter cela en demandant à 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 être de 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 Safari.

Bien que la documentation d'Apple soit peu fournie sur ce sujet, la communauté des développeurs a trouvé un moyen de cibler tous les appareils à l'aide de requêtes multimédias avancées pour sélectionner l'appareil approprié, puis spécifier l'image appropriée. Voici une solution fonctionnelle, grâce au gist de tfausak.

Modifier l'apparence de la barre d'état

Vous pouvez définir l'apparence de la barre d'état par défaut sur 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 à la mise en page plus de hauteur, mais obstrue le haut. Voici le code requis:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Capture d&#39;écran utilisant du noir transparent.
Capture d'écran à l'aide de black-translucent

Capture d&#39;écran en noir
Capture d'écran à l'aide de black