Épingler l'icône du site sur l'interface Modern UI de Windows 8

Astuce par (Graphiste - Designer Web et mobilité, Strasbourg)
Créé le , mis à jour le (21622 lectures)
Tags : favicon, icone, windows

Comme vous le savez peut-être déjà, une nouvelle interface utilisateur sous Windows 8 a été inaugurée (sur bureau et tablette) au profit d'un accueil composé de tuiles (Tiles en anglais), et nommé Modern UI (ex-Metro). Les tuiles remplacent désormais les icônes pour lancement des programmes mais aussi l'affichage rapide d'informations. Comme sur iOS ou Android, vous pouvez également épingler un site web sur cette interface. La tuile sert de favori et va lancer directement le site dans le navigateur (Internet Explorer par défaut).

Deux balises <meta> suffisent à personnaliser cette tuile pour définir l'image, et la couleur de fond. Il est également possible d'ajouter un troisième tag pour donner un titre par défaut que l'utilisateur pourra changer au moment de l'épinglement.

Tuile Alsacréations Windows 8
Voici ce à quoi ressemble la tuile ajoutée pour alsacreations.com

Créer l'image

Voici les caractéristiques techniques de l'image à prévoir : 

  • 144 x 144 pixels
  • fond transparent
  • enregistrée au format PNG 32 bits transparent (option PNG24 sur Photoshop)

Vous pouvez télécharger un fichier PSD à ce format (25 Ko).

Quelques remarques cependant :

  • Windows 8 va se permettre des libertés quant à la couleur de fond que vous allez préciser, c'est pour celà qu'il vaut donc mieux utiliser une image à fond transparent
  • Évitez d'utiliser l'image du favicon iOS puisqu'en général elle n'a pas de fond transparent et vous risquez de vous retrouver avec des conflits de couleur
  • Évitez de passer l'image dans des outils d'optimisation comme ImapeOptim.app qui riquent de faire bugguer votre image

Le code

Une fois votre image créée, il suffit d'ajouter les lignes de code suivantes dans la section <head> du document HTML :

<meta name="msapplication-TileColor" content="#b0d139">
<meta name="msapplication-TileImage" content="chemin/pinned-favicon.png">
<meta name="application-name" content="Alsacréations">

La première meta msapplication-TileColor vous permet de donner la couleur de fond de votre tuile. La seconde meta msapplication-TileImage vous permet de donner le chemin vers votre image. La dernière application-name est optionnelle et vous permet de donner un titre par défaut à votre tuile.

Ajouter une tuile à l'interface utilisateur

Une fois la tuile créée, il vous suffit de sélectionner petite épingle dans le navigateur Internet Explorer version Modern UI pour l'ajouter sur votre interface.

Épingler la tuile sur l'interface Windows 8

Automatiser et tester la tuile

Le site buildmypinnedsite.com vous permet de directement générer le code votre tuile en vous proposant de charger l'image et choisir la couleur de fond ainsi que le titre. Il vous permet également d'avoir un aperçu de ce à quoi elle pourrait ressembler sur l'interface Windows 8.

Capture d'écran de http://www.buildmypinnedsite.com/

Commentaires

oncle-charly a dit le

Bonjour et merci.

Quelle différence avec cette manip : dans IE 10, menu "Outils", puis "Ajouter un site à l'écran d'accueil" ?

Merci.

Flink a dit le

Moi qui ne fréquente presque aucun ordinateurs windows, et donc aucun possédant Windows 8, je te dit un gros merci pour ces informations :D Je me lance dans ce processus immédiatement. Merci encore :D

Olivier C a dit le

Ha ! le web... passionnant et énervant à la fois : lieu où se côtoient tentatives d'harmonisation du code entre navigateurs et balises propriétaires pour chaque OS...

dew a dit le

Au moins c'est un meta assez "inoffensif".

Olivier C a dit le

... et puis on peut toujours le cibler à partir du user-agent, bien que beaucoup n'aime pas cette méthode.

LuciferX a dit le

Intéressant, même si Microsoft aurait pu créer une meta plus courte, car ca fait quand même beaucoup de code pour un simple signet :-(

Stéphanie W. a dit le

@jb_gfx : quelle idée d'utiliser autre chose que IE sur Windows8 * joke*
Je pense que la version desktop doit effectivement utiliser le favicon "normal" et non cette meta :/

oncle-charly a dit le

Avec "ma" manip : c'est le favicon qui s'affiche et non la meta.
W8 version desktop.

jmlapam a dit le

Sympa, je le rajouterai sûrement dans mon wp_head() :)

Squal38 a dit le

J'ai tenté, mais ça ne fonctionne pas, en tout cas dans leur interface de test. Ça ne prend en compte que ma couleur, mais pas mon titre, ni mon image...

caveman a dit le

"Évitez de passer l'image dans des outils d'optimisation comme ImageOptim.app qui riquent de faire bugguer votre image"

Est-ce que ce problème proviendrait du fait que s'il y a particulièrement peu de couleurs (comme c'est a priori le cas avec le logo kiwi d'Alsacréations) l'optimisation produira un PNG-8 avec plusieurs couleurs transparentes à partir du PNG-24α en entrée ?