Quais são as dimensões corretas em pixels para um ícone de toque da Apple?
https://stackoverflow.com/questions/1598
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Não tenho certeza de qual deve ser o tamanho correto.
Muitos sites parecem repetir que o ícone do Apple Touch deve ter 57x57 pixels, mas citam um link quebrado como fonte.
Hanselman'areia playgroundbluesos comentários de sugerem tamanhos diferentes, incluindo 163x163 e 60x60.
Próprio da Apple ícone apple.com.br é 129x129!
Veja minha pergunta relacionada:Como posso dar aos meus sites um ícone para iPhone?
Solução
Parece que as diretrizes da Apple a partir de 3 de agosto de 2010 agora incluem imagens de "alta resolução" (para iPhone 4) em seus tamanhos de ícone "obrigatórios".
Parece que precisamos fornecer uma imagem de 57x57 e uma de 114x114 agora, bem como uma imagem de título de 640x960.
Ver Diretrizes para criação de ícones e imagens personalizados (Javascript necessário) que faz parte de um documento completo:
Outras dicas
Do cache do Google de Apple Developer Connection - Centro de desenvolvimento de aplicativos da Web - Criação de conteúdo...
Crie um ícone de marcador de web clip
O iPhone e o iPod Touch permitem que um usuário salve um marcador de clipe da web no seu site na tela inicial deles.
Para especificar um ícone de marcador para todas as páginas de um site, coloque uma imagem PNG chamada "Apple-Touch-icon.png" no diretório raiz do seu servidor da Web-semelhante ao "favicon.ico" para ícones do site.
Para substituir o ícone de favoritos do site em uma página da web específica, insira umu003Clink> elemento semelhante au003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/> dentro dou003Chead> elemento da página.
As dimensões do ícone do marcador devem ser 57x57 pixels.Se o ícone for um tamanho diferente, ele será escalado e cortado para caber.
O Safari compõe automaticamente o ícone com a sobreposição padrão "vítrea", para que pareça um aplicativo iPhone ou iPod embutido.
Depende de quantos detalhes você deseja que ele tenha, ele precisa ter uma proporção de 1:1 (basicamente - precisa ser quadrado)
Eu iria com o próprio 129*129 da Apple
Não posso citar fonte para esses tamanhos porque a referência oficial está trancada a sete chaves da ADC.
No entanto, muitos dos sites que não são NDA têm tutoriais sobre como criar os ícones.Por exemplo aqui:
Como parte do Safari Web Content Guide, a Apple tem uma página disponível publicamente chamada "Especificando um ícone de página da Web para Web Clip" (Javascript necessário) que cobre todas as resoluções e sua implementação.
O tamanho oficial é 57x57.Eu recomendaria usar o tamanho exato simplesmente porque ele ocupa menos memória quando carregado (a menos que a Apple armazene em cache a representação em escala).Com isso dito, Rex está certo que qualquer tamanho quadrado funcionará
Especificações da Apple especifique novos tamanhos para iOS7:
- 60x60
- 76x76
- 120x120
- 152x152
Considerando que os tamanhos antigos para iOS6 e anteriores são:
- 57x57
- 72x72
- 114x114
- 144x144
A propósito, os ícones pré-compostos estão obsoletos.
Como consequência, para suportar dispositivos novos (executando iOS7) e mais antigos (iOS6 e anteriores), essas 8 imagens devem estar presentes e o código genérico é:
<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">
Além disso, você deve criar uma imagem de 152x152 chamada apple-touch-icon.png.
Você pode querer saber que isso gerador de favicon pode gerar todas essas imagens de uma vez.Transparência completa:Eu sou o autor deste site.
Não creio que exista um "tamanho correto".Como o iPhone realmente roda OSX, o sistema de renderização de ícones é bastante robusto.Contanto que você forneça uma imagem de alta qualidade com a proporção correta e uma resolução pelo menos tão alta quanto a saída real, o sistema operacional será reduzido de forma muito limpa.Meu site usa 158x158 e o ícone parece perfeito em pixels na tela do iPhone.
O link do NilObject me levou à ótima postagem do blog Acompanhe seu ícone no makentosh.com
...É claro que toda essa inconsistência teve que ser tratada eventualmente, certo?Bem, 2.0 lidou com isso de maneira fina!Finalmente 57x57 realmente significava 57x57.
...cada pixel ...renderizado perfeitamente.
Você não precisa mais se preocupar com o tamanho correto.Se você tiver um arquivo de arte do iTunes (ou seja,arquivo de tamanho 1024 * 1024) do seu ícone, então criei este aplicativo que fornecerá todos os ícones com base nas informações fornecidas aqui.Pegue o aplicação daqui, e siga as instruções no arquivo leia-me para criar todos os ícones necessários para o aplicativo iOS.
Lista atualizada em outubro de 2014, iOS8
Lista para iPhone e iPad com e sem 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">
Atualização 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 resto é igual ao iOS 7
Atualização 2013 iOS7:
Para 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
- Padrão de 57 x 57 pixels
- 76 x 76 px para iPads sem retina
