Une quoi ?
Tout le monde n'a pas forcément une application pour iPhone et iPad (ou autre appareil mobile), car souvent hors budget ou tout simplement hors utilité. Néanmoins vu la notoriété de ces appareils dans le monde actuel, il est plutôt essentiel de ne pas les négliger.
Il vous faut simplement une image (ou icône si vous préférez) au format carré. Vu la haute résolution des appareils actuels, il vaut mieux avoir une icône ayant une résolution de 180 x 180 pixels minimum (soit l'iPhone 6 Plus).
Personnellement pour ce tutoriel, j'ai pris une icône de 200 x 200 px.
Juste pour rappel, nous n'allons pas créer une application mobile, mais simplement un raccourci pour iPhone/iPad vers votre site web.
Voici à gauche, l'icône que j'ai choisi. A vous de vous créer une petite icône au format PNG. Il ne reste plus qu'à mettre un code dans la head de votre site internet ("Modifier le head") :
<link rel="apple-touch-icon" href="http://site.com/votre-image.png"/>
Remplacez bien sûr http://site.com/votre-image.png par l'adresse de votre propre image.
Comment créer un raccourci sur un iPhone/iPad (ou iPod touch d'ailleurs) ?
Rendez vous tout d'abord sur Safari, puis sur un site web de votre choix.
En haut à droite, juste à droite de la barre de recherche (et à gauche de l'icône +), il y a une icône avec un rectangle et une flèche sortant, cliquez
dessous.
Vous aurez ensuite le choix entre différentes options, choisissez "Sur l'écran d'accueil".
Puis cliquez sur "Ajouter".
Et voilà, vous avez votre propre icône !
Écrire commentaire
Les poneys du soleil (mardi, 05 mai 2015 21:15)
Petit tuto rigolo, avez vous oubliez l'univers Google, Android ?
Ze Tuto (mardi, 05 mai 2015 22:04)
Bonsoir @Les poneys du soleil,
Je viens de faire un test en ajoutant un raccourci vers mon site sur un téléphone Android (ainsi que sur une tablette Android) et je vois que mon icône (Apple) a bien été reconnu.
Solie (mercredi, 27 mai 2015 07:15)
Merci, c'est super !
Vandimarco (mardi, 29 septembre 2015 11:52)
Bonjour et merci pour votre post,
Avez-vous une astuce pour insérer cette fonction sur un site Prestashop ?
ZeTuto (samedi, 03 octobre 2015 12:05)
Bonjour @Vandimarco,
Voilà pour vous : https://www.prestashop.com/forums/topic/397430-insérer-code-de-suivi-dans-le-head-dune-page-prestashop-en-particulier/
Cordialement
lambert (vendredi, 19 août 2016 14:40)
bonjour,
pouvez vous m aider pour mettre mon logo en icon iphone
merci
lambert (vendredi, 19 août 2016 14:43)
j'ai mis ce code et cela ne fonctionne pas
<link rel="apple-touch-icon" href="https://www.dropbox.com/s/0nke0ndz6423p1r/logo%20lones%20%281%29.png?dl=0" />
ZeTuto (samedi, 17 septembre 2016 13:39)
Bonjour @lambert,
Le lien est introuvable,
quelle est l'adresse de votre site ?
ZeTuto (samedi, 17 septembre 2016 13:43)
@lambert
Bonjour, est ce que vous utilisez Jimdo ? Quelle est l'adresse de votre site ?
brigitte (lundi, 07 novembre 2016 19:20)
Bonjour,
Comment savoir l’adresse de mon favicon sur mon site Jimdo?
Mercid’avance pour votre réponse.
ZeTuto (dimanche, 30 avril 2017 08:46)
Bonjour Brigitte,
Pour cela, il faut aller dans le code source de votre site (sur une de vos pages, effectuez un clic droit, puis "Afficher le code source", l'expression pour afficher le code source change selon le navigateur, mais vous ne devriez pas avoir de mal à trouver). Recherchez ensuite un code similaire au suivant :
<link rel="icon" type="image/png" href="favicon.png" />
Au lieu de favicon.png, il y aura l'adresse de votre favicon.
ID (lundi, 30 juillet 2018 12:22)
Merci beaucoup ^^
Mireille (jeudi, 16 avril 2020 09:13)
J'ai mis l'application de ma banque sur mon portable; comment faire pour faire apparaître le logo sur le devant de mon écran? J'ai 70 ans et ne suis pas très douée! Merci d'avance.
Le caca (jeudi, 16 avril 2020 15:01)
Moi jve juste changer mes icone sur les appli et jtrouve pa