Comment puis-je donner à mes sites Web une icône pour iPhone?

Comment définir l'icône qui apparaît sur l'iPhone pour les sites Web que je crée?

0
J'ai également trouvé les informations apple-touch-icon sur le Safari Web Content Guide ainsi que la balise meta pomme-mobile-web-app-capable pour le mode plein écran.
ajouté l'auteur Kevin Hakanson, source
ajouté l'auteur Blazemonger, source

5 Réponses

À partir du Guide du contenu Web de Safari d'Apple Developer Connection pour la page iPhone Spécification d'un Icône de page Web pour Web Clip ...

The user can add a web application or webpage link to the Home screen. These links, represented by an icon, are called web clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png.

To specify an icon for a single webpage, or replace the website icon with a webpage-specific icon, add a link element to the webpage as in:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

In the above example, replace custom_icon.png with your icon filename.

See "Create an Icon for Your Web Application or Webpage" in iPhone Human Interface Guidelines in iPhone Human Interface Guidelines for webpage icon metrics.

Note: The web clip feature is available in iPhone 1.1.3 and later.

0
ajouté
Le lien est mort.
ajouté l'auteur Alfo, source

J'ai suggéré que Stack Overflow implémente une icône Apple-Touch:

Ajouter une icône Apple-Touch pour Safari sur iPhone

0
ajouté

Voir le Spécification d'une icône de page Web pour le Web Clip de la page Configuration des applications Web du Guide de contenu Web Safari dans la bibliothèque de référence Safari ...

Specifying a Webpage Icon for Web Clip

iPhone OS Note: The Web Clip feature is available in iPhone OS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iPhone OS 2.0 and later.

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone OS.

  • To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone OS won?t add any effects to the icon.

  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    In the above example, replace custom_icon.png with your icon filename. If you don?t want Safari on iPhone OS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.

See "Create an Icon for Your Web Application or Webpage" in iPhone Human Interface Guidelines for Web Applications for webpage icon metrics.

0
ajouté

Et pour être complet, un lien vers l'article de Scott Hanselman, qui contient également quelques conseils supplémentaires:

Ajouter des icônes de l'iPhone de l'écran d'accueil et ajuster le ViewPort

0
ajouté

Add this in your head section:<link rel="icon" href="/your-icon-url"/>

0
ajouté