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

Astucehtml

Publié par le , mis à jour le (30559 lectures)

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

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

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...

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 :-(

@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 :/

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...

"É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 ?

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.