Ajouter une icône pour iPhone, iPad (iOS) & Android à mon site internet (raccourci écran d’accueil smartphone)

Capture d’écran 2015-11-27 à 13.44.09

Screenshot_2015-11-27-15-08-53

En essayant d’ajouter un raccourci vers mon site internet sur l’écran d’accueil de mon smartphone Android, je me suis rendu compte que ce n’est plus le favicon qui est utilisé (petite icône du site internet dans l’onglet de la barre de navigation).

Capture d’écran 2015-11-27 à 13.44.09


Ajouter un lien vers un site internet sur mon écran d’accueil


 

Pour commencer, voici comment ajouter un lien vers un site internet sur votre écran d’accueil:

Une fois la page ouverte, allez dans le Menu et sélectionnez « Ajouter à l’écran d’accueil » (ou équivalent pour autres OS)

Screenshot_2015-11-27-13-51-55
« Ajouter à l’écran d’accueil »

Ajouter une icône à mon site internet pour son apparition sur les écran d’accueil


Voici comment ajouter une icône sur son site internet pour qu’elle puisse être utilisée par Android ou iPhone/iPad comme App-icon.

J’ai d’abord trouvé des explications pour les terminaux Apple ici, mais ce n’est pas suffisant. Ce post (de 2013) est plus complet mais en anglais. En voilà une explication en raccourci pour les non-anglophones:

  1. Il faut créer un fichier image au format « .png » (ce format gère la transparence, ce que ne fait pas le « .jpg »)
  2. Cette image doit être redimensionnée au format utilisé par CHAQUE interface => plusieurs images de formats différents. Il y en a plusieurs comme explicité ci-dessous (source 2013)
classic iPhone / iPod iPad iPhone / iPod Retina iPad Retina iPhone 6 Plus
57×57 76×76 120×120 152×152 180×180
Android Regular Android Hi-Res
128×128 192×192

3. Inclure dans le champ HEAD du site l’adresse des images pour que le l’appareil les trouve. Il semblerait que iOS puisse trouver les fichier tout seul s’ils sont nommés comme suit et placé à la racine du site.
Android utilise les deux icônes avec rel=”icon” et apple utilise celles-ci avec le préfixe “apple-“:
(on entend par « champ head du site » celui de la page index.html au minimum, mais aussi de chaque page

<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" />
<link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />

Et voilà

Screenshot_2015-11-27-15-34-35.png

Si vous créez vos icones pour iOS, vous pourrez trouver des exemples ici appicontemplate for ios7 et iOS7 icon template for photoshop & sketch.


Autres Liens:

Quick Tip: Give Your Website an iOS Home Screen Icon sur webdesign.tutsplus.com

Ajouter un Favicon à son site internet sur openclassrooms.com

Ce site propose (contre votre adresse e-mail, mais fonctionne bien) de redimensionner votre icône pour les App.

Related posts

2 thoughts on “Ajouter une icône pour iPhone, iPad (iOS) & Android à mon site internet (raccourci écran d’accueil smartphone)

  1. Je suis tombé sur votre site et je l’ai trouvé très clair au niveau des explications merci

    Malheureusement je n’ai pas votre niveau en informatique j’ai essayé de mettre en pratique votre article sur comment ajouter un touch icon mais malheureusement lorsque je le fais sur mon site internet cela ne fonctionne pas je vérifie en ligne avec un analyseur de site web mais toujours pas de touch icon ……

    Pourriez vous me dire ou je bugge ? s’il vous plait, tres cordialement

    1. David Tribal

      Bonjour,
      La technologie des navigateurs et des smartphones évolue très rapidement.
      J’ai apparemment réussi à mettre cela en place il y a 2 ans et ça a l’air d’encore fonctionner, mais je ne saurai pas bien comment vous aider aujourd’hui.
      Il faudrait pour cela que je vous pose de nombreuses questions sur votre configurations, ce que vous avez essayé, que je vérifie sur mes sites quelle image est bien prise en compte pour faire le « Touch Icon »… Cela nous demanderait beaucoup de temps.
      Peut-être trouveriez vous des indications plus fraîches en regardant sur d’autres sites internet.

      Si vous souhaitez une assistance n’hésitez pas à me recontacter,
      Bon courage et à bientôt,

      David Tribal

Pour commenter sans FB c'est ici ? (laissez votre contact si vous le souhaitez)