Qual o tamanho do apple-touch-icon.png para iPad e iPhone?

134

Os ícones da Apple touch são compatíveis com mais de 60x60 e, em caso afirmativo, que dimensões devo usar para o iPad e o iPhone?

atormentar
fonte
Para obter a melhor resposta, consulte o site da Apple: Apple Developer
Ruub
1
Encontrei essa ferramenta para criar ícones com todos os tamanhos suportados e a marcação a incluir em sua página. iconifier.net
agarcian

Respostas:

145

Lista atualizada dezembro de 2019, iOS13 Um ícone para iOS 180x180 px e um para Android 192x192 px (declarado em 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"
}

Lista preterida outubro de 2017, iOS11

Lista para iPhone e iPad com e sem 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">

Atualização de outubro de 2017 iOS 11: iOS 11 marcado, introdução do iPhone X e iPhone 8

Atualização novembro de 2016 iOS 10: introduzida a nova versão do iOS iPhone 7 e iPhone 7plus, eles têm a mesma resolução de tela, dpi, etc. que o iPhone 6s e o iPhone 7plus, até agora não foram encontradas alterações relacionadas à atualização 2015

Atualizar meados de 2016 Android: adicione dispositivos Android à lista, pois os links de toque da maçã são marcados como obsoletos pelo Google e não terão suporte a qualquer momento para seus dispositivos

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

Atualização 2015 iOS 9: para iOS 9 e iPad pro

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

Os novos iPhones (6s e 6s Plus) estão usando os mesmos tamanhos do iPhone (6 e 6 Plus), o novo iPad pro usa uma imagem de tamanho 167x167 px, as outras resoluções ainda são as mesmas.

Atualize 2014 iOS 8:

Para iOS 8 e iPhone 6 plus

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

O Iphone 6 usa a mesma imagem de 120 x 120 px do iPhone 4 e 5, o restante é o mesmo do iOS 7

Atualização 2013 iOS7:

Para o iOS 7, as resoluções recomendadas foram alteradas:

  • para iPhone Retina de 114 x 114 px a 120 x 120 px
  • para iPad Retina de 144 x 144 px a 152 x 152 px

A outra resolução ainda é a mesma

  • 57 x 57 px padrão
  • 76 x 76 px para iPads sem retina

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

felipep
fonte
30
Eu gostaria que eles apenas apoiassem o SVG e terminassem com essa porcaria. Obrigado pela resposta, no entanto!
precisa saber é o seguinte
2
adoro as atualizações ... torna essa resposta super relevante!
Chris Allinson
1
É importante notar que o popular e batalha-testado repo HTML5 Boilerplate recomenda usar apenas um único catch-all ícone <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/...
jackocnr
Além disso, a abordagem moderna para oferecer suporte a dispositivos Android é usar um arquivo de manifesto e especificar seus ícones aqui: developers.google.com/web/fundamentals/app-install-banners - essa abordagem também é usada pelo Boilerplate HTML5 Repo
jackocnr
Testei isso. No iPhone Xs, os ícones parecem meio embaçados ao lado do ícone do Github. : /
kaiserkiwi 6/06/19
117

Use estes tamanhos 57x57, 72x72, 114x114, 144x144 e faça isso no cabeçalho do seu 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" />

   

Isso ficará bem em todos os dispositivos Apple. ;)

Darren
fonte
8
Documentação de suporte da apple: developer.apple.com/library/safari/#documentation/…
Jim Geurts
6
O atributo de tamanhos não é um HTML válido!
8
Os dispositivos iOS mais antigos não entendem o sizesatributo e, portanto, use o valor que for o último. Portanto, <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />deve ser o último. Além disso, como diz o pezillionaire, agora você pode adicionar um novo ícone em 144x144 para o iPad Retina.
Appmattus 3/11
5
A partir do ios7, os tamanhos recomendados foram alterados: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
Cody Django
4
O @Cody e a abordagem adotada pelo HTML5Boilerplate agora é usar apenas o ícone 152x152 e chamá-lo apple-touch-icon-precomposed.png, e permitir que outros iDevices o redimensionem conforme necessário.
Blazemonger 15/10
94

Com o iPad (3ª geração), agora existem quatro tamanhos de ícone 57x57, 72x72, 114x114, 144x144.

Como os ícones de retina são exatamente o dobro do tamanho dos ícones padrão, precisamos criar apenas 2 ícones : 114 x 114 e 144 x 144. Ao definir o ícone de tamanho da retina como o ícone padrão correspondente, o iOS os dimensionará de acordo.

<!-- 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" />
milionário
fonte
Eu gosto mais desse método.
Caleb Jares
Este método tem uma bela simplicidade.
PaulSkinner
1
Então, criamos apenas duas imagens e permitimos que o dispositivo diminua 2x. Fofa.
superluminary
9
Como de iOS7 os tamanhos recomendados mudaram: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
Cody Django
4
O @Cody e a abordagem adotada pelo HTML5Boilerplate agora é usar apenas o ícone 152x152 e chamá-lo apple-touch-icon-precomposed.png, e permitir que outros iDevices o redimensionem conforme necessário.
Blazemonger 15/10
34

O ícone no site da Apple tem 152x152 pixels.
http://www.apple.com/apple-touch-icon.png

Espero que responda sua pergunta.

abe
fonte
1
Este. Ou 144x144 (res de Retina esperada para iPad). Todos eles parecem bem reduzidos para tamanhos menores de iPhone / iPad, enquanto planejam um pouco para o futuro.
DOOManiac
6
Em outubro de 2013, agora é 152x152 e não parece mudança para diferentes dispositivos (não entre meu laptop e iphone4 de qualquer maneira)
Wick
17

TL; DR: use um ícone PNG em 180 x 180 px a 150 ppi e vincule-o da seguinte forma:

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

Detalhes sobre a abordagem

A partir de 2020-04, a resposta canônica da Apple é refletida em sua documentação no iOS .

Oficialmente, a especificação diz:

  • 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)

Na realidade, essas diferenças de tamanho são pequenas, portanto a economia de desempenho será realmente importante apenas em sites de tráfego muito alto.

Para sites de menor tráfego, normalmente uso um ícone PNG a 180 x 180 px a 150 ppi e obtenho resultados muito bons em todos os dispositivos, mesmo nos mais grandes.

serraosays
fonte
16

Desenvolvo e desenvolvo aplicativos para iOS há um tempo e esta é a melhor dica de design para iOS!

diverta-se :)!

esta imagem é desse artigo :)

Atualização: para iOS 8+ e os novos dispositivos (iPhone 6, 6 Plus, iPad Air), consulte este link atualizado .

Atualização meta: Iphone 6s / 6s Plus tem as mesmas resoluções que o iPhone 6/6 Plus, respectivamente

Esta é uma imagem da nova versão do artigo:

Informações sobre dispositivos iOS 8 e meados de 2014

MrHaze
fonte
6

A documentação relevante no site da Apple, Especificando um ícone de página da Web para Web Clip .

Não há necessidade de colocar nada no cabeçalho do seu documento. Se nenhum ícone for especificado usando um elemento de link, o diretório raiz do site será procurado por ícones com o prefixo apple-touch-icon ou apple-touch-icon-apple .

Por exemplo, se o tamanho apropriado do ícone para o dispositivo for 57 x 57, o sistema procurará por nomes de arquivos na seguinte ordem:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png
Jan M
fonte
Sim, mas esta pergunta diz respeito aos novos ícones (maiores) para iphone4 e ipad.
Cherouvim 30/05
Embora não seja necessário especificar nada no cabeçalho, ainda é uma boa prática. Se, por exemplo, você perder a versão 144x144 do iPad retina e não houver ícone sem uma dimensão de pixel, o Mobile Safari voltará a exibir apenas a visualização de um site, embora possa usar uma versão menor não ideal, mas ainda melhor.
Rafael Bugajewski 17/10/12
Esta é uma idéia muito ruim para não especificar no cabeçalho uma vez que outras plataformas irá utilizá-los também (Android, Chrome OS, Blackberry, ...)
Remi Grumeau
5

Sim. Se o tamanho não corresponder, o sistema o redimensionará . Mas é melhor fazer 2 versões dos ícones.

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

Você pode diferenciar o iPad e o iPhone pelo agente do usuário no seu servidor. Se você não quiser escrever um script no servidor, também poderá alterar o ícone com Javascript,

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

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

Isso funciona porque o ícone é consultado apenas quando você adiciona o clipe da web.

(Ainda não existe uma maneira pública de diferenciar o iPhone ≥4 do iPhone ≤3GS em Javascript.)

kennytm
fonte
1
A resolução do iPhone 4 é aparentemente ampliada do iPhone 3 por um fator de dois, então 114x114 provavelmente seria uma boa opção para o tamanho do ícone.
quer
@JAB: Como bordas foram adicionadas ao ícone, o tamanho real do ícone no iPhone ≤3GS é 59x60. Se for esse o caso, 114x114 pode estar um pouco errado.
kennytm
As bordas do iPhone 4+ não são dimensionadas na mesma quantidade, em termos de resolução (para que em tamanho pareçam ter a mesma largura)?
JAB
@JAB: Deveria ser. Eu não verifiquei.
kennytm
Obrigado por todas as suas idéias / conselhos. Se eu fizer 3 versões, como segmentar cada dispositivo com o tamanho relevante? A menos que esteja faltando alguma coisa e PNG seja um formato de contêiner no qual eu possa colocar os diferentes tamanhos?
Harry
2

Sim, são compatíveis com mais de 60x60. Para simplificar, crie ícones destes 4 tamanhos:

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

Agora, é preferível adicioná-los como links no seu HTML como:

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

Você pode optar por não declarar os 4 links acima, mas apenas declarar um único link; nesse caso, forneça o tamanho mais alto 152x152ou até maior, por exemplo 196x196. Ele sempre reduzirá o tamanho para reutilização. Certifique-se de mencionar osize .

Você também pode optar por não declarar nem um único link. A Apple menciona que, nesse cenário, ele procurará primeiro a raiz do servidor para o tamanho imediatamente superior ao tamanho desejado (formato de nomeação :) apple-touch-icon-<size>.pnge, se isso não for encontrado, procurará o seguinte default file: apple-touch-icon.png. É preferível que você defina os links para minimizar o navegador que consulta o servidor.

Necessidades do ícone:

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

Nas versões anteriores ao iOS 7, se você não deseja adicionar efeitos aos seus ícones, basta adicionar o sufixo -precomposed.pngao nome do arquivo. (O iOS 7 não adiciona efeitos, mesmo sem ele).

Ethan
fonte
1

Eu acho que essa pergunta é sobre ícones da web. Tentei dar um ícone em 512x512 e, no simulador do iPhone 4, ele parece ótimo (na pré-visualização), no entanto, quando adicionado à tela inicial, ele é muito pixelizado.

No lado bom, se você usar um ícone maior no iPad (ainda com o meu teste de 512x512), ele parecerá ter melhor qualidade no iPad. Espero que a renderização do iPhone 4 seja um bug.

Eu abri um bug sobre isso no radar.

EDITAR:

Atualmente, estou usando um ícone de 114x114 na esperança de que fique bem no iPhone 4 quando for lançado. Se o iPhone 4 ainda tiver um bug quando for lançado, otimizarei o ícone do iPad (nítido e sem redimensionamento em 72x72) e, em seguida, reduzi-lo para iPhones antigos.

Chris Drackett
fonte
0

Para iPhone e iPod touch , crie ícones que medem:

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

Para o iPad , crie um ícone que meça:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)
Prashant Aggarwal
fonte