Avoir une tuile personnalisée Windows 8 pour votre site

Sur Windows 8, les visiteurs de votre site web peuvent ajouter votre site à leur écran d’accueil. Néanmoins, la tuile sera au pire une simple icône Internet Explorer, au mieux le favicon par défaut de votre site web, pas vraiment adapté à Windows 8. Dans ce tuto, je vais vous expliquer comment customizer votre favicon spécialement pour Windows 8 !

Il faut dire qu’avec la sortie de la Microsoft Surface et autre HP Envy X2, Windows fait son retour en force avec Windows 8. Les éditeurs de sites web doivent donc s’adapter à ce nouveau marché. Voici les étapes à suivre pour personnaliser la tuile de votre site web pour Windows 8.

1) Prévisualiser votre icône sur Windows 8

– Rendez-vous sur http://www.buildmypinnedsite.com/
– Cliquez sur “See your site in Windows 8”, puis rentrez l’URL de votre site web.
– Cliquez sur “Show me”.

A ce stade, vous pouvez voir dans la première tuile à quoi ressemble actuellement votre site lorsque vous le “pinnez” sur l’écran d’accueil de Windows 8.

 

2) Construire une tuile personnalisée

– Passez à l’étape 2 en cliquant sur “Build your own pinned site”.
– Uploadez votre logo. Je vous recommande de choisir une image aux dimensions suivantes : 144*144 pixels.
– Tapez le nom de votre site et choisissez une couleur de fond.
– Cliquez sur “Let me see the code”.

3) Intégrer le code

– Téléchargez l’image en cliquant sur le bouton “Download the image”, puis uploadez-le à la racine de votre hébergement.
– Enfin, copier-collez le code HTML entre les balises head de votre code source.
– Testez le tout en vidant votre cache et en ajoutant votre site à votre écran d’accueil Windows, vous devriez voir votre tuile personnalisée.

4) Avoir un favicon de secours

Votre tuile personnalisée ne sera visible que si vous “pinnez” votre site avec le navigateur par défaut dans l’espace des applications. En tous cas, sur ma tablette, quand j’épingle un site via le Bureau (et pas dans l’interface Metro), la tuile personnalisée ne s’affiche pas et laisse place à la tuile d’Internet Explorer. Du coup, que ce soit pour épingler un site via le bureau ou plus généralement pour les autres navigateurs, je vous conseille d’avoir toujours un favicon en stock, en intégrant ce code entre vos balises head :

<link href="http://votresite.com/favicon.ico" rel="shortcut icon" />

Je vous conseille d’avoir des dimensions de 48*48 pixels pour votre favicon par défaut afin qu’il soit adapté à Windows 8.

Si votre site tourne sous WordPress, et que vous ne voulez pas modifier les fichiers de votre thèmes, voici la fonction à intégrer dans le fichier functions.php :

function my_custom_tile() { ?> VOTRE CODE ICI (meta windows 8 et favicon) <?php } add_action('wp_head', 'my_custom_tile');