Lunaweb, une réflexion sur la création web et le marketing Internet

Créer l’icône de son site Web pour Iphone/Ipod Touch

Par Nicolas le 8 février 2008
No Gravatar

Créer l'icône de son site Web pour Iphone/Ipod TouchRécemment, Apple a sorti une nouvelle mouture du logiciel pilotant les iPhone et les iPod Touch. Au menu des nouvelles foncitonnalités, la possibilité de créer une icône raccourci dans le tableau de bord de l’appareil. Un raccourci vers quoi ?

Vers un site favori pardi ! Voici donc l’astuce permettant de créer sur votre site Web un icône spécial iPhone/iPod Touch, car par défaut l’appareil génère un aperçu de la première page pour créer l’icône, ce qui ne donne pas forcément un résultat des plus esthétiques.

Alors comment créer ces WebClip Bookmarks, comme les appelle si bien Apple ? Eh bien il faut commencer par créer sur votre logiciel d’édition graphique favori un icône de 57x57px que vous nommerez 

apple-touch-icon.png

Ensuite, on apprend à la lumière de la documentation fournie par Apple qu’il existe plusieurs moyens d’intégrer votre image au navigateur Mobile Safari utilisé par votre téléphone ou baladeur favori.

Parmi les méthodes, la plus simple et logique consiste à faire usage de la balise LINK à l’intérieur de l’entête HEAD de votre page, par l’intermédiaire d’une ligne similaire à celle-ci :

link rel="apple-touch-icon" href="images/apple-touch-icon.png"

Safari retraitera automatiquement votre image pour lui ajouter l’effet glossy des autres icônes, et ainsi faire de votre raccourci un élément à part entière du Springboard (le tableau de bord de l’appareil).

Pour en savoir plus sur l'auteur de cet article...  Nicolas a fondé LunaWeb en 2004. Passionné d'ergonomie Web, d'utilisabilité et d'analyse des comportements utilisateurs, il revendique l'Internet fait à la main. Fan d'Apple invétéré, grand utilisateur des RSS, pratique trop peu la pêche à la ligne... Lire plus d'articles de cet auteur...

Mots-clefs : , ,
Publié dans Apple et Mac, Webdesign |

  • http://digitalthink.fr/wordpress/?p=607 Cr�er votre ic�ne pour le bureau de votre iphone/iPod Touch at think’blog

    [...] : LunaBlog.    Tags : iphone, ipod touch, ic�ne [...]

  • Oms

    oui…mais comment ca « créer sur votre logiciel d’édition graphique favori un icône de 57×57px » ?

  • http://www.lunablog.com Nicolas

    Ben dans ton logiciel d’édition graphique habituel, que ce soit pixelmator, photoshop, gimp ou quelque autre qu ce soit, tu crées une nouvelle image de ton goût qui fasse 57×57 et que tu enregistre au format PNG. C’est tout !

  • http://www.suliworld.com Stéphane

    Merci pour le tuyau ;) Très pratique !

  • http://ourworld.o-n.fr x3ph0r5

    et comment il apparait sur le tableau de bord?

  • christina

    salut! J’ai acheter un iPod touch vendredi le 11 et la je commence a comprend un peu
    ses utilités mais j’ai beaucoup de la misère a comprendre comment mètre des nouveau icons. Mon ami a un depuis disons deux mois iPod touch et lui il y a un icons et il peu jouer de la guitare . J’aimerais savoir ou et comment je pourrais aller chercher ca. Merci en avance

  • yanncbienmoi

    Merci Nicolas pour cette astuce !
    Mon blog pro tout neuf est désormais bien visible sur terminal mobile et totalement « MacAddict » !

  • Nicolas

    Je pense bien, mon n’veu ! :-)
    Merci à toi !

  • Nicolas

    Quand un utilisateur ajoute ton site à ses favoris, il lui est proposé de l’ajouter en tant que signet classique, d’envoyer à un ami ou bien de l’ajouter sur l’écran d’accueil. Dans ce cas, c’est cette icône qui est reprise.

  • Oms

    oui…mais comment ca « créer sur votre logiciel d’édition graphique favori un icône de 57×57px » ?

  • Anais

    C'est claire , on comprend rien ç leur truc la … ^^
    Est-ce que quelqu'un pourrait me dire comment ajouter un heu sur mon ipod? J'ai télécharger le jeu il est juste dans mes applications . S'il vous plait :)

  • Anais

    Mais vous pouvez me dire comment on met le jeu sur l'ipod ? =$ Svp

  • http://www.lunaweb.fr Agence LunaWeb

    Itunes fait tout le travail automatiquement si ton iPod touch est compatible avec l'application téléchargée, mais quel rapport avec l'article ?

    Je te suggère d'aller poser ta question sur un forum spécialisé (ou de consulter la documentation d'iTunes). Merci !

  • jonathr67

    Salut intéressant comme tuto, cependant je bloque comme à chaque fois. J'ai créer un site web sur un serveur ftp gratuit avec Iwe09 (Je débute), L'icone par 57px renommé c'est ok.
    Ensuite je bloque à « Parmi les mé thodes, la plus simple et lo gique consiste à faire usage de la ba lise LINK à l’in té rieur de l’en tête HEAD de votre page, par l’in ter mé diaire d’une ligne si mi laire à celle-​ci :

    link rel= »apple-touch-icon » href= »images/apple-touch-icon.png »

    Je ne sais pas comment faire sur iweb et si c'est possible surtout.

    Après il reste à publier le fichier icone sur la racine de mon ftp.

    Merci si quelqu'un peux m'aider

↑ Haut de page