Quali sono le dimensioni in pixel corrette per un'icona Apple Touch?

StackOverflow https://stackoverflow.com/questions/1598

Domanda

Non sono sicuro di quale dovrebbe essere la dimensione corretta.

Molti siti sembrano ripetere che l'icona del tocco della mela dovrebbe essere 57x57 pixel, ma citano un collegamento interrotto come fonte.

Hanselman'sabbia playgroundbluesi commenti di suggeriscono diverse dimensioni tra cui 163x163 e 60x60.

Proprio di Apple icona apple.com è 129x129!

Vedi la mia domanda correlata:Come faccio a dare ai miei siti web un'icona per iPhone?

È stato utile?

Soluzione

Sembra che le linee guida Apple a partire dal 3 agosto 2010 ora includano le immagini "ad alta risoluzione" (per iPhone 4) nelle dimensioni delle icone "richieste".

Sembra che ora dobbiamo fornire sia un'immagine 57x57 che 114x114, nonché un'immagine del titolo 640x960.

Vedere Linee guida per la creazione di icone e immagini personalizzate (Javascript richiesto) che fa parte di un intero documento:

Altri suggerimenti

Dalla cache di Google di Apple Developer Connection - Web Apps Dev Center - Progettazione di contenuti...

Crea un'icona segnalibro clip web

iPhone e iPod Touch consentono a un utente di salvare un segnalibro di clip Web sul tuo sito nella schermata principale.

Per specificare un'icona dei segnalibri per tutte le pagine di un sito Web, posizionare un'immagine PNG denominata "Apple-touch-icon.png" nella directory principale del tuo server web-simile a "favicon.ico" per le icone del sito.

Per sovrascrivere l'icona dei segnalibri del sito su una pagina Web specifica, inserire au003Clink> elemento simile au003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/> all'interno delu003Chead> elemento della pagina.

Le dimensioni dell'icona del segnalibro dovrebbero essere 57x57 pixel.Se l'icona ha una dimensione diversa, verrà ridimensionata e ritagliata per adattarsi.

Safari composirà automaticamente l'icona con la sovrapposizione "vetrosa" standard in modo che sembri un iPhone o iPod integrato.

Dipende da quanti dettagli vuoi che abbia, deve avere proporzioni 1:1 (sostanzialmente deve essere quadrato)

Io opterei per il formato 129*129 di Apple

Non posso citare una fonte per quelle dimensioni perché il riferimento ufficiale è sotto chiave di ADC.

Tuttavia, molti dei siti non soggetti a NDA dispongono di tutorial su come creare le icone.Ad esempio qui:

Come parte della Guida ai contenuti Web di Safari, Apple ha in realtà una pagina disponibile al pubblico chiamata "Specifica di un'icona di pagina Web per il clip Web" (Javascript richiesto) che copre tutte le risoluzioni e la loro attuazione.

La dimensione ufficiale è 57x57.Consiglierei di utilizzare la dimensione esatta semplicemente perché richiede meno memoria quando viene caricato (a meno che Apple non memorizzi nella cache la rappresentazione in scala).Detto questo, Rex ha ragione che qualsiasi dimensione quadrata funzionerà

Specifiche Apple specificare nuove dimensioni per iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

Mentre le vecchie dimensioni per iOS6 e versioni precedenti sono:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

A proposito, le icone precomposte sono deprecate.

Di conseguenza, per supportare solo dispositivi nuovi (con iOS7) e precedenti (iOS6 e precedenti), devono essere presenti queste 8 immagini e il codice generico è:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Inoltre, dovresti creare un'immagine 152x152 denominata apple-touch-icon.png.

Potresti voler sapere che questo generatore di favicon può generare tutte queste immagini contemporaneamente.Informativa completa:Sono l'autore di questo sito.

Non credo che esista una "dimensione corretta".Dato che l'iPhone esegue effettivamente OSX, il sistema di rendering delle icone è piuttosto robusto.Finché si fornisce un'immagine di alta qualità con le giuste proporzioni e una risoluzione almeno pari a quella dell'output effettivo, il sistema operativo verrà ridimensionato in modo molto pulito.Il mio sito utilizza una risoluzione 158x158 e l'icona appare perfetta al pixel sullo schermo dell'iPhone.

Il collegamento di NilObject mi ha portato al fantastico post sul blog Resta aggiornato sulla tua icona A makentosh.com

...Naturalmente tutta questa incoerenza doveva essere trattata alla fine, giusto?Bene 2.0 ha affrontato in modo raffinato!Finalmente 57x57 significava effettivamente 57x57.

...ogni singolo pixel...reso perfettamente.

Non dovrai più preoccuparti della taglia corretta.Se disponi di un file di grafica di iTunes (ad es.file di dimensioni 1024*1024) della tua icona, ho creato questa applicazione che ti fornirà tutte le icone in base alle informazioni fornite Qui.Ottenere il applicazione da qui, e seguire le istruzioni nel file Leggimi per creare tutte le icone richieste per l'applicazione iOS.

Elenco aggiornato ottobre 2014, iOS8

Elenco per iPhone e iPad con e senza retina

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

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 da 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

Le altre risoluzioni sono sempre le stesse

  • 57 x 57 px predefinito
  • 76 x 76 px per iPad senza retina
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top