Comment ajouter un site Web icônes pour iPhone, iPad et iPod Touch

Favicon.ico - Site Web Icône dans le navigateur

Avant elle a lancé un site Web et ajouter un fichier graphique, favicon, qui apparaît dans le navigateur à la barre d’adresse. Dans la plupart des situations, l’icône de favicon est une vignette du logo graphique ou les initiales du site Web. Cette icône est ajoutée pour aider les utilisateurs à identifier plus rapidement une adresse Web dans les signets.

Invisibilité favicon

Invisibilité favicon dans Safari

Favicon dans Opera

Favicon dans Opera

Jusqu'à récemment, ce fichier doit être de la forme "favicon.ico"Pour être identifié par le navigateur Web. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
Depuis plusieurs années, avec la promotion de nouvelles langues web, HTML5 si CSS3, Favicons peut être un .png ou . Jpg. La condition est que l'en-tête du site, avant </ head>, Soyez cette ligne:

<Link rel = "icône de raccourci" href = "/ images / favicon.ico" type = "image / x-icon" />

Icône de site Web pour iOS - iPhone, iPad et iPod Touch

In iOS nous pouvons ajouter page Web raccourcis pe écran d'accueilCPC iPhone, iPad si iPod touch.

Comment ajouter un raccourci de site Web sur iPhone, iPad et iPod Écran d'accueil

Nous le faisons en ouvrant une page web sur l'iPhone (Safari, Chrome, navigateur internet etc), en cliquant sur le carré avec la flèche (le signe pour "partager" dans iOS), puis le "Ajouter à l'écran d'accueil».

Si le site a mis en favicon pour votre navigateur, mais pas encore défini périphériques iOS sites icône spécifique, L'écran apparaît une icône consistant en un image preview page Web.

Comment ajouter des icônes web pour iPhone, iPad et Android.

La première étape consiste à créer une icône d'imageCela apparaîtra sur écran d'accueilcommunauté iDevice CPC. Pour icône web est compatible sur tous les appareils et de voir clairement, nous devons créer une image pour toutes les résolutions iPhone et iPad.

Résolutions et tailles d'icônes standard pour iPhone, iPad, iPod et Android

  • Les modèles classiques de l'iPhone / iPod = 57 57 ×
  • iPad = 76 76 ×
  • iPhone / iPod Retina × = 120 120
  • iPad Retina × = 152 152
  • iPhone 6 / 6S Plus = 180 180 ×

Apple régulièrement mis à jour taille de l'icône recommandéeURL applications si les pages Web pe cette page.

Pour les appareils Android, les icônes sont deux dimensions:

  • Android classique = 128 × 128
  • Android haute résolution (haute résolution) = 192 × 192

icônes

Après nous avons fait les images, monter sur le serveur web, la source HTML du site avant la fermeture </ head>, ajoutez les lignes suivantes:

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

Pour les appareils Apple, le nom de l’image .PNG et "rel =" doivent contenir le préfixe "apple-". Pour Android, le nom du fichier sera "icon hires.png"Et"icon normal.png"Avec rel =" icône ".

Il n'est pas absolument nécessaire de créer des images pour chaque résolution individuellement. Vous pouvez créer une image avec la résolution la plus élevée, et les périphériques à résolution inférieure l'identifieront et la définiront sous forme d'icône.

iPhone Icône Site Web

L'icône de raccourci vers le site Web ressemblera à n'importe lequel applications pour iOS.

Comment ajouter un site Web icônes pour iPhone, iPad et iPod Touch

A propos de l'auteur

infiltration

Passionné par tout ce qui concerne les gadgets et l'informatique, je suis heureux d'écrire sur stealthsettings.com de 2006 et j'aime découvrir de nouvelles choses sur les ordinateurs et MacOS, les systèmes d'exploitation Linux, Windows, iOS et Android.

Laisser un commentaire