Che dimensione dovrebbe essere apple-touch-icon.png per iPad e iPhone?

Sono supportate le icone touch di Apple più grandi di 60x60 e, in caso affermativo, quali dimensioni dovrei usare per iPad e iPhone?

Elenco aggiornato Dicembre 2019, iOS13 Un'icona per iOS 180x180 px e una per Android 192x192 px (dichiarata in site.webmanifest).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Elenco obsoleto ottobre 2017, iOS11

Elenco per iPhone e iPad con e senza retina

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Aggiornamento ottobre 2017 iOS 11: iOS 11 controllato, iPhone X e iPhone 8 introdotti

Aggiornamento novembre 2016 iOS 10: introdotta la nuova versione iOS iPhone 7 e iPhone 7plus, hanno la stessa risoluzione del display, dpi, ecc. Di iPhone 6s e iPhone 7plus, fino ad ora non sono state rilevate modifiche rispetto all'aggiornamento 2015

Aggiorna metà Android 2016: aggiungi dispositivi Android all'elenco poiché i link apple-touch sono contrassegnati come obsoleti da Google e non saranno supportati in qualsiasi momento per i loro dispositivi

<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Aggiornamento 2015 iOS 9: per iOS 9 e iPad pro

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

I nuovi iPhone (6s e 6s Plus) utilizzano le stesse dimensioni dell'iPhone (6 e 6 Plus), il nuovo iPad pro utilizza un'immagine di dimensioni 167x167 px, le altre risoluzioni sono sempre le stesse.

Aggiornamento 2014 iOS 8:

Per iOS 8 e iPhone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Iphone 6 utilizza la stessa immagine di 120 x 120 px di iPhone 4 e 5, il resto è lo stesso di iOS 7

Aggiornamento 2013 iOS7:

Per iOS 7 le risoluzioni consigliate sono cambiate:

• per iPhone Retina da 114 x 114 px a 120 x 120 px
• per iPad Retina da 144 x 144 px a 152 x 152 px

L'altra risoluzione è sempre la stessa

• 57 x 57 px predefinito
• 76 x 76 px per iPad senza retina

Fonte: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Utilizzare queste dimensioni 57x57, 72x72, 114x114, 144x144, quindi farlo nella testa del documento:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

Questo andrà bene su tutti i dispositivi Apple. ;)

Con l'iPad (3a generazione) ora ci sono quattro dimensioni dell'icona 57x57, 72x72, 114x114, 144x144.

Poiché le icone della retina hanno esattamente il doppio della dimensione delle icone standard, in realtà dobbiamo solo creare 2 icone : 114 x 114 e 144 x 144. Impostando l'icona delle dimensioni della retina sull'icona standard corrispondente, iOS le ridimensionerà di conseguenza.

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

L'icona sul sito di Apple è 152x152 pixel.
http://www.apple.com/apple-touch-icon.png

Spero che risponda alla tua domanda.

TL; DR: usa un'icona PNG a 180 x 180 px a 150 ppi e quindi collega ad essa in questo modo:

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

Dettagli sull'approccio

A partire dal 2020-04, la risposta canonica di Apple si riflette nella loro documentazione su iOS .

Ufficialmente, la specifica dice:

• iPhone 180px × 180px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

In realtà, queste differenze di dimensionamento sono minuscole, quindi i risparmi sulle prestazioni contano solo su siti a traffico molto elevato.

Per i siti a basso traffico, in genere utilizzo un'icona PNG a 180 x 180 px a 150 ppi e ottengo risultati molto buoni su tutti i dispositivi, anche quelli più grandi.

Sto sviluppando e progettando app iOS da un po 'di tempo e questo è il miglior cheat sheet di progettazione iOS là fuori!

divertiti :)!

Aggiornamento: per iOS 8+ e i nuovi dispositivi (iPhone 6, 6 Plus, iPad Air) vedi questo link aggiornato .

Aggiornamento meta: Iphone 6s / 6s Plus hanno le stesse risoluzioni rispettivamente di iPhone 6/6 Plus

Questa è un'immagine della nuova versione dell'articolo:

La documentazione pertinente sul sito di Apple, specifica dell'icona di una pagina Web per Web Clip .

Non è necessario inserire nulla nella testa del documento. Se non viene specificata alcuna icona utilizzando un elemento di collegamento, la directory principale del sito Web viene cercata con l' icona apple-touch-icon prefisso o apple-touch-icon-precomposto .

Ad esempio, se la dimensione dell'icona appropriata per il dispositivo è 57 x 57, il sistema cerca i nomi dei file nel seguente ordine:

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Sì. Se la dimensione non corrisponde, il sistema la ridimensionerà . Ma è meglio creare 2 versioni delle icone.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - Se possibile.

È possibile differenziare iPad e iPhone dall'agente utente sul proprio server. Se non vuoi scrivere script sul server, puoi anche cambiare l'icona con Javascript di

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

Questo funziona perché l'icona viene interrogata solo quando aggiungi il clip web.

(Non esiste ancora un modo pubblico per differenziare iPhone ≥4 da iPhone ≤3GS in Javascript.)

Sì, sono supportati più di 60x60. Per semplicità, crea icone di queste 4 dimensioni:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

Ora, è preferibile aggiungerli come collegamenti nel tuo HTML come:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Puoi scegliere di non dichiarare i 4 link sopra ma semplicemente di dichiarare un singolo link, nel qual caso dare la dimensione più alta 152x152o addirittura una dimensione superiore a quella, diciamo 196x196. Ridurrà sempre la dimensione per riutilizzare. Assicurati di menzionare ilsize .

Puoi anche scegliere di non dichiarare nemmeno un singolo link. Apple afferma che in questo scenario cercherà prima la radice del server per la dimensione immediatamente superiore a quella desiderata (formato di denominazione:) apple-touch-icon-<size>.png, e se non viene trovato, cercherà successivamentedefault file: apple-touch-icon.png . È preferibile definire i collegamenti in modo da ridurre al minimo il browser che esegue la query sul server.

Icona necessità:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

Nelle versioni precedenti a iOS 7, se non vuoi che aggiunga effetti alle tue icone, aggiungi semplicemente il suffisso -precomposed.pngal nome del file. (iOS 7 non aggiunge effetti anche senza di esso).

Penso che questa domanda riguardi le icone web. Ho provato a dare un'icona a 512x512 e sul simulatore di iPhone 4 sembra fantastico (nell'anteprima), tuttavia, quando aggiunto alla schermata principale è malamente pixelato.

Il lato positivo, se si utilizza un'icona più grande sull'iPad (sempre con il mio test 512x512), sembra uscire con una migliore qualità sull'iPad. Spero che il rendering di iPhone 4 sia un bug.

Ho aperto un bug su questo sul radar.

MODIFICARE:

Attualmente sto usando un'icona 114x114 nella speranza che possa apparire bene su iPhone 4 quando viene rilasciato. Se l'iPhone 4 presenta ancora un bug quando esce, ottimizzerò l'icona per l'iPad (nitido e senza ridimensionamento a 72x72), quindi lo ridimensionerò per i vecchi iPhone.

Per iPhone e iPod touch , crea icone che misurano:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

Per iPad , crea un'icona che misura:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)