Comment définir le site de l'écran icône de raccourci?

Je ne trouve pas comment faire Android utiliser une icône personnalisée (par exemple, l'icône du site ou de l'app, touchez l'image que l'iOS utilise) pour un site web raccourci.

Pouvez-vous me donner un indice?

OriginalL'auteur Toni Michel Caubet | 2012-08-01

  1. 7

    Android et iOS semblent utiliser les mêmes références pour les icônes sur l'écran d'accueil.

    Pour le lien HTML icônes:

    <!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">

    La différence entre les deux types sont que les deux premiers n'ont pas d'espace. En bas, on comprend à la fois avec un espace entre les deux. L'espace n'est pas reconnu par l'iOS 4.2+. Votre meilleur pari est d'utiliser tous les trois. Si vous êtes limité sur l'espace, utiliser uniquement les deux premiers.

    Pour Les Tailles:

    144 × 144 pixels pour l'iPad avec écran Retina.

    114 × 114 pixels pour un iPhone d'un écran Retina.

    57 × 57 pixels pour presque n'importe quoi d'autre

    Seule chose à surveiller pour est que l'iOS 4.2+ ignorent tout simplement l'attribut de taille, de sorte que vous pouvez lier avec elle. Je te suggère de mettre la taille à l'intérieur de l'icône du nom de fichier, juste pour des raisons d'organisation.

    Une autre chose à noter est que vous n'avez même pas besoin d'inclure les liens pour les "apple-touch-icon". Si il n'y a pas d'icônes définies dans le code html, iOS recherche dans le dossier racine pour les fichiers nommés suivantes dans l'ordre. Android NE besoin défini, afin de les mettre dans le code de toute façon.

    apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
    C'est aussi ne fonctionne pas pour moi.. ( funcook.com )
    liste "apple-touch-icon" et "apple-touch-icon-précomposé" se traduira uniquement dans les précomposé image soit utilisée.

    OriginalL'auteur Tgwizman

  2. 7

    Android utilise un écran d'accueil de l'image ET une "icône de Raccourci" (comme favicon). Si vous ne spécifiez l'écran d'accueil icône, la page web ne sera pas afficher une icône à côté de l'URL dans le navigateur web.

    La "icône de raccourci" doit être indiqué séparément, même si elle peut être le même fichier.

    <link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />

    Url relatives va travailler pour de nombreux appareils, mais la plupart des sources disent que vous avez besoin d'utiliser des Url absolues.

    Liste les tailles séparément permet à l'appareil de ne télécharger que la plus petite image qui répond à ses besoins. Pour le "shortcut icon", vous ne pouvez pas la liste de tailles différentes, mais vous pouvez utiliser un fichier ICO qui peut contenir plusieurs tailles codée dans le fichier. De nombreux programmes image comme GIMP pouvez enregistrer ICO des fichiers avec plusieurs tailles.

    Notez que si vous voulez de l'icône de raccourci pour afficher sous IE, ça doit être un vrai fichier ico.

    Apparemment, les versions d'Android 2.1 et antérieures ne reconnaissent que la "précomposé" lien de l'image, mais si vous incluez le précomposé icône, chaque appareil qui est capable de "fancifying" icônes d'ignorer leurs processus et il suffit d'utiliser la précomposé. Les Androïdes j'ai testé peuvent faire leur propre fancifying, donc je ne pas utiliser précomposé icône de liens. Cela dépendra de votre compatibilité besoins.

    <link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>

    Pour plus d'informations sur l'utilisation de l'écran d'accueil icônes...

    http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    Wow, incroyable réponse, merci

    OriginalL'auteur Carter Medlin

  3. 0

    Cela ressemble à une bonne explication.

    Il semblerait que si vous placez:

    <link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

    Dans le signet de la page HTML, il apparaîtra sur le bureau automatiquement.

    Cela n'a pas fonctionné pour moi..

    OriginalL'auteur Ken Y-N

  4. 0

    Ce Android et iPhone) page suggère Url absolues pour Android.

    Donc juste modifier KenY-N de balises pour

    <link rel="apple-touch-icon" href="http://yourdomain.com/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
    Ne fonctionne pas non plus avec l'absolu ...
    Avez-vous jamais faire ce travail, @ToniMichelCaubet? Je ne peux pas le faire fonctionner, même avec le chemin d'accès absolu.

    OriginalL'auteur alex