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, faviconQui apparaissent dans le navigateur, la barre d'adresse. Dans la plupart des situations, le favicon est un logo graphique miniature ou les initiales sites Web respectifs. Ce favicon est ajouté pour aider les utilisateurs à identifier une adresse plus rapide des signets Web.

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'accueilCPCiPhone, 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 standard d'icônes 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:

  • × classique Android = 128 128
  • Android haute résolution (hi-res) = 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-icône-76x76.png" rel = "apple-touch-icon" tailles = "76x76" <link href = "/ apple-touch-icône-120x120.png" rel = "apple-touch-icon" tailles = "120x120" <link href = "/ apple-touch-icône-152x152.png" rel = "apple-touch-icon" tailles = "152x152" <link href = "/ apple-touch-icône-180x180.png" rel = "apple-touch-icon" tailles = "180x180" <link href = "/ icon-hires.png" rel = "icône" taille = "192x192" /> <link href = "/ icon-normal.png" rel = "icône" tailles = "128x128" />

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

Il est absolument nécessaire de créer des images pour chaque résolution séparément. Vous pouvez faire une image pour la haute résolution et les dispositifs ayant une résolution inférieure, identifieront et définirez l'icône.

iPhone Icône Site Web

L'icône du raccourci ressemblera le site de tout 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 gadget et Recopie volontiers stealthsettings.com de 2006 et j'aime découvrir de nouvelles choses avec vous sur les ordinateurs et Mac OS, Linux, Windows, iOS et Android.

Laisser un commentaire

Ce site utilise Akismet pour réduire les spams. Découvrez comment vos données de commentaire sont traitées.