Wat is die korrekte pixel dimensies vir 'n appel-touch-ikoon?

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

Vra

Ek is nie seker wat die regte grootte moet wees.

Baie webwerwe lyk te herhaal dat die appel-touch-ikoon moet wees 57x57 pixels maar noem 'n gebreekte skakel as hulle bron.

Hans Elman se en playgroundblues kommentaar se stel verskillende groottes, insluitend 163x163 en 60x60.

eie apple.com ikoon is 129x129!

Sien my verwante vrae: Hoe kan ek gee my webwerwe 'n ikoon vir iPhone?

Was dit nuttig?

Oplossing

Dit blyk dat Apple riglyne as van 3 Augustus 2010 sluit nou die "Hoë-resolusie" beelde (vir iPhone 4) in hul "vereis" ikoon groottes.

Dit lyk asof ons nodig het om te beeld 'n 114x114 beide 'n 57x57 en nou bied, sowel beeld 'n 640x960 titel as.

Sien Custom Icon en beeld skep (Javascript nodig) wat deel is van 'n hele dokument:

Ander wenke

Van die Google kas van Apple Developer Connection - Web Apps Dev Center - Ontwerp inhoud ...

  

Skep 'n Web Clip Bookmark simbool

     

iPhone en iPod touch kan 'n gebruiker   red 'n Web Clip boekmerk na jou site   op hul huis skerm.

     

Om 'n boekmerk ikoon vir alle spesifiseer   bladsye van 'n webwerf, plaas Beeld 'n PNG   met die naam "appel-touch-icon.png" by die   hoofdmap van jou webbediener -   soortgelyk aan die "favicon.ico" vir webwerf   ikone.

     

Om die ikoon webwerf boekmerk op te ignoreer   'n spesifieke webblad, voeg 'n   element soortgelyk aan binne die    element van die bladsy.

     

Die boekmerk-ikoon dimensies moet wees 57x57 pixels. As die ikoon is 'n   verskillende grootte dit sal afgeskaal en   geknip om in te pas.

     

Safari sal outomaties saamgestelde   die ikoon met die standaard "glasagtige"   oortrek sodat dit lyk soos 'n ingeboude   iPhone of iPod aansoek.

Dit hang af van hoeveel detail jy dit wil hê, is dit nodig om die verhouding van 1 het: 1 (basies - wat dit nodig vierkante te wees)

Ek sou gaan met die Apple se eie 129 * 129

Ek kan nie noem 'n bron vir diegene groottes omdat die amptelike verwysing is agter slot en grendel van ADC.

Daar is egter baie van die nie-NDA staanplekke het die tutoriale oor hoe om die ikone te skep. Byvoorbeeld hier:

As deel van hul Safari Web Content Guide, Apple het eintlik 'n publiek sigbaar bladsy genaamd " spesifiseer van 'n webblad simbool vir Web Clip " (Javascript nodig) wat al die besluite en dek hul implementering.

Die amptelike grootte is 57x57. Ek sou raai die gebruik van die presiese grootte eenvoudig as gevolg van die feit dat dit neem minder geheue as gelaai word (tensy Apple caches die afgeskaal verteenwoordiging). Met wat gesê het, Rex is reg wat enige vierkante grootte sal werk

Apple specs nuwe spesifiseer groottes vir iOS7:

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

AANGESIEN ou groottes vir iOS6 en voor is:

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

By the way, vooraf saamgestelde ikone afgekeur.

As 'n gevolg, te ondersteun, maar nuwe toestelle (hardloop iOS7) en ouer (iOS6 en voor), hierdie 8 foto's moet teenwoordig wees en die generiese kode is: 

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

Verder moet jy 'n 152x152 prentjie met die naam apple-touch-icon.png skep.

Jy mag dalk wil om te weet dat hierdie favicon kragopwekker kan al hierdie foto's op te wek in 'n keer. Volle bekendmaking. Ek is die skrywer van hierdie webwerf

Ek dink nie daar is 'n "korrekte grootte". Sedert die iPhone regtig loop OSX, die ikoon lewering stelsel is redelik sterk. Solank as wat jy dit 'n hoë-gehalte beeld met die regte aspek verhouding en 'n resolusie ten minste so hoog as die werklike uitset sal wees gee, sal die OS baie mooi af te skaal. My webwerf maak gebruik van 'n 158x158 en die ikoon lyk pixel-perfekte op die iPhone skerm.

NilObject se skakel het my gelei tot die groot blog post katchup op jou simbool by makentosh.com

  

... Natuurlik al hierdie teenstrydigheid   het behandel moet word uiteindelik,   reg? Wel 2.0 hanteer dit in fyn   mode! Ten slotte 57x57 eintlik bedoel   57x57.

     

... elke pixel ... gelewer   perfek.

Jy hoef nie te pla vir korrekte grootte meer. As jy iTune kunswerk lêer (dws lêer van 1024 * 1024 grootte) van jou ikoon het, dan het ek hierdie aansoek wat jy al die ikone wat gebaseer is op inligting verskaf hier . Kry die aansoek van hier , en volg die instruksies in readme lêer om al die nodige ikone vir iOS aansoek te skep.

Opdateer lys Oktober 2014, iOS8

Lys vir iPhone en iPad met en sonder 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">

Update 2014 iOS 8:

Vir iOS 8 en iPhone 6 plus 

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

Iphone 6 gebruik beeld dieselfde 120 x 120 px as iPhone 4 en 5 die res is dieselfde as vir iOS 7

Update 2013 iOS7:

Vir iOS 7 die aanbevole besluite verander:

  • vir iPhone Retina van 114 x 114 px 120 x 120 px
  • vir iPad Retina van 144 x 144 px om 152 x 152 px

Die ander resolusie is nog steeds dieselfde

  • 57 x 57 px verstek
  • 76 x 76 px vir iPads sonder retina
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top