iPhone et icône personnalisée du signet

Rédigé par Hamtaro - 05 janvier 2009 21:3411 commentaires

Classé dans : Geek, Travaux - Mots clés : Code

Jeune (presque plus) passionné du web et plus particulièrement d'intégration et de webdesign, je fais comme tout bon geek qui se respecte sur la toile : je partage mon petit savoir ! ;)

Preview

Depuis quelques jours, je travaille sur une adaptation de thème (WPTouch pour WordPress), spécialement pour les utilisateurs iPhone et iPod Touch (mais aussi les autres mobiles, le thème étant idéal pour les petites résolutions). C'est en parcourant le code pendant des heures et des heures que je me suis aperçu qu'il existe quelques astuces propres à l'utilisateur sous Safari Mobile.

Lorsqu'un utilisateur sous iPhone décide d'ajouter un signet visible sur le SpringBoard (Fonction Ajouter à l'écran d'accueil) afin d'accéder plus rapidement à un site sans avoir à passer par l'icône Safari, une nouvelle icône est attribuée. Cette icône, si le site n'effectue pas l'astuce que je vais vous décrire, représente une capture d'écran de la page renvoyée sous Safari.
Il est donc très simple de personnaliser cela en disant à Safari d'utiliser votre propre icône.

Il est grand temps d'attaquer la partie monstrueusement technique et de faire peur à tout le monde. La ligne de code responsable de cette action se place juste avant la balise </head>, selon les plateformes, celle-ci se trouve dans le fichier template head.php ou header.php. Voici donc le fameux code :


<link href="http://www.chemin.de/votre/image.png" rel="apple-touch-icon" />


 

Une icône de 60x60 pixels devrait suffire.
J'ai une préférence pour le .png (gestion de la transparence) et j'avoue franchement que je ne sais pas si l'iPhone accepte d'autres formats à mettre sur le SpringBoard (c'est également le format utilisé pour les thèmes).

Vous pouvez maintenant faire joujou (je l'ai pas encore fait, il faut que je trouve un logo) et transformer votre favicon pour qu'il vienne éblouir les écrans des utilisateurs iPhone. ;)

TCho, Hamtaro.

11 commentaires

mercredi 27 mai 2009 @ 16:21 François a dit : #1

Bonjour,

ce que je me demande, c'est comment virer une icône du Springboard. Ripdev.com a installé la sienne d'autorité sur mon écran d'accueil et je souhaiterais m'en débarrasser.

Merci de votre aide,

François

mercredi 27 mai 2009 @ 18:10 Hamtaro a dit : #2

~François : avec SBSettings, il est possible de cacher les icônes au choix dans une liste. BossPrefs fait la même chose il me semble.

Tout cela se trouve via Cydia. wink

jeudi 06 août 2009 @ 02:16 rocky34 a dit : #3

@ François

Salut ! Au cas où tu n'aurais pas trouvé et si tu ne veux pas seulement cacher l'icône, il y a CyDelete sur Cydia (Source : BigBoss and Planet-iPhones) qui affiche les petites croix aux autres Apps - en rouge, pour les distinguer.
Peut-être ça marche aussi pour l'écran d'accueil...?

Sinon il faut aller dans la prog par SSH, avec CyberDuck (mac) ou WinSCP (pc) :

Root Folder/private/var/stash/ThemesdDrTly/(ton thème)/UIImages/(ton icône)
et soit tu l'effaces, soit tu la déplaces au dossier /(ton thème)/icons/ comme ça elle apparaîtra sur le springboard.

voili smile

mardi 09 mars 2010 @ 04:02 Benjamin a dit : #4

bonjour à tous,
je suis novice en matière de ligne de commandes. je ne comprend pas comment on fais pour "dire a safari qu'on veut un autre icone. que celui de la capture d'écran.

balise </head> : c'est quoi et où?

<link href="http://www.chemin.de/votre/image.png" rel="apple-touch-icon" />

ceci ce rentre où?

très novice et la j'avoue n'avoir rien compris.

mardi 09 mars 2010 @ 09:53 Hamtaro a dit : #5

@Benjamin : tout ceci se réalise côté site web et non dans le téléphone. La balise est une balise présente dans le code d'une page sur internet. wink

vendredi 04 mars 2011 @ 13:08 Herve a dit : #6

Bonjour, je suis tombé sur votre blog par hasard, plein d'articles très sympas, bravo!

Concernant celui ci et l'icone personnalisé, savez vous s'il y a un moyen de proposer automatiquement de mettre le signet sur le Springboard lorsqu'un utilisateur se connecte au site ?
Merci et bonne continuation !

vendredi 04 mars 2011 @ 16:02 Hamtaro a dit : #7

@Herve : A ma connaissance, il n'existe pas de moyen de "forcer" Safari Mobile à créer un signet... Il va falloir chercher ailleurs qu'ici pour trouver une solution. Bon courage.

mardi 08 mars 2011 @ 08:43 Herve a dit : #8

Merci pour la réponse smile je continue mes recherches alors^^

mercredi 23 mars 2011 @ 12:29 Stsoca a dit : #9

Bonjour,
Avez-vous une idée pour intégrer ce code sous joomla ?

mercredi 23 mars 2011 @ 15:33 Hamtaro a dit : #10

@Stsoca : comme indiqué dans l'article, il s'agit de placer la balise dans le header du site. En ce qui concerne Joomla, je ne sais pas comment il fonctionne mais il faut tout simplement trouver le fichier responsable du header dans le thème et trouver la balise /head pour la placer avant. wink

mardi 19 juin 2012 @ 06:54 Loïc a dit : #11

Je viens un peut tard, mais votre code m'a bien servi! Je vous en remercie!

Savez-vous comment il est possible d'afficher un petit "panneau" qui pointe sur le bouton central en bas de l'iphone dans Safari, informant qu'il est possible d'ajouter le site à l'écran d’accueil?

Écrire un commentaire

 Se rappeler de moi sur ce site

Quelle est la troisième lettre du mot nwhnac ? :