web-dev-qa-db-fra.com

Icône de favori, icône de raccourci, icône Apple-touch: y en a-t-il d'autres?

Je connais 2 types d'icônes Web par défaut pour les sites Web:

  • Favicon : placez un fichier au format .ico à la racine de votre site nommé favicon.ico et la plupart des navigateurs de bureau le trouveront et l'afficheront. dans divers contextes (signets, onglets). Peut également être ajouté au code, ce qui vous permet de spécifier d'autres noms et d'autres types graphiques dans le fichier, bien qu'il y ait limitations de type et de taille pour les navigateurs :

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="icon" href="/favicon.ico" />
    
  • Icône de clip Web : placez un fichier au format png appelé Apple-touch-icon.png ou Apple-touch-icon-precomposed.png à la racine de votre site et Les versions iPhone OS/iOS de Safari vont les récupérer et les stocker lorsque le site est ajouté à l'écran d'accueil. Peut aussi être ajouté avec un code comme:

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

Existe-t-il d'autres icônes graphiques par défaut pour un site Web qu'un webmaster peut inclure?

24
artlung

Il apparaît selon this et this que Android utilisera le type rel de Apple-touch-icon-precomposed ou Apple-touch-icon, MAIS que pour que cela fonctionne, vous devez utiliser une URL entièrement qualifiée, par exemple:

<link rel="Apple-touch-icon-precomposed"
      href="http://www.example.com/custom_icon.png" />

ou:

<link rel="Apple-touch-icon"
      href="http://www.example.com/custom_icon.png" />

La mise en garde est que cela semble être pour Android 2.1 mise à jour 1 & Webkit 3.1 . Le documentation pour les développeurs Android mentionne une méthode dans Android.webkit qui est un événement lorsque le Apple-touch-icon est récupéré.

8
artlung

Cela dépend de la plate-forme que vous ciblez. Mais je pense que la plupart des navigateurs mobiles compatibles avec les standards comprennent les tags par défaut des favicon. Peut-être pouvez-vous rechercher des cas d'utilisation spéciaux (par exemple, créer un raccourci sur le bureau avec une icône spéciale) sur des plateformes telles qu'Android, iOS, WebOS, ...

Je viens de développer quelques sites Web ciblant les utilisateurs d'iPhone et sur ces sites, j'ai utilisé Wordpress avec une version spécialisée du thème WPTouch.

1
fwaechter