[Script] Icônes de son Site sur iPhone / iPad / Mobile comme une App
Hey !
C'est une pratique que j'adore utiliser pour chacun de mes sites.
Cela consiste à donner l'icône d'une application à son site internet, quel qu'il soit.
Cet icône sera visible :
- Lors du partage du site internet
- Lors de la mise sur l'écran d'accueil d'un appareil mobile (iPhone > Safari > Sur l'écran d'accueil)
C'est un petit détail mais ça change tout !
Procédure :
- Dans les balises <head> de ton site, écris ceci :
- Ensuite bien entendu, tu devras ajouter dans ton dossier image un dossier "apple-icons" dans lequel tu vas mettre tes propres icônes de ton site web.
MÀJ : Les Dimensions des Icônes d'Application ont été mis à jours & les favicons ont été ajouté.
C'est une pratique que j'adore utiliser pour chacun de mes sites.
Cela consiste à donner l'icône d'une application à son site internet, quel qu'il soit.
Cet icône sera visible :
- Lors du partage du site internet
- Lors de la mise sur l'écran d'accueil d'un appareil mobile (iPhone > Safari > Sur l'écran d'accueil)
C'est un petit détail mais ça change tout !
Procédure :
- Dans les balises <head> de ton site, écris ceci :
HTML:
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" sizes="32x32" href="favicon-32.png" type="image/png">
<link rel="icon" sizes="64x64" href="favicon-64.png" type="image/png">
<link rel="icon" sizes="96x96" href="favicon-96.png" type="image/png">
<link rel="icon" sizes="196x196" href="favicon-196.png" type="image/png">
<!-- Icônes d'Applications sur Mobiles -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icons/apple-touch-icon-144x144.png">
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">MÀJ : Les Dimensions des Icônes d'Application ont été mis à jours & les favicons ont été ajouté.
Dernière édition: