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

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?

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/

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. ;)

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

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

Espero que responda sua pergunta.

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.

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

diverta-se :)!

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:

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

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

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

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.

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)