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 récents facilitent la personnalisation de certains composants, comme les icônes, la couleur de la barre d'adresse, et même l'ajout de é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 cartes 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 à 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 assurer une compatibilité totale 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 PNG non transparent de 180 ou 192 pixels de côté est idéal pour l'apple-touch-icon.
Nous vous déconseillons 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 Meta pertinentes si vous ne souhaitez pas accepter 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">
Tuiles 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 la section Créer des cartes actives sur MSDN.
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 sous Android, utilisez la couleur du thème Meta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
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. 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 ê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 de 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">
black-translucent
black