Icones para iPhone e iPad – Apple Touch Icon

Um dos recursos do iOS é adicionar ícones dos sites na navegação do celular, assim um site pode ser aberto como um aplicativo. Para tanto, é necessário que este site tenha certas características como nome de arquivo e dimensões corretas. Então, observe os detalhes para criar o seu.

O Apple Touch Icon atua como um favicon normal . Os iOS procurarão na raiz de seu site por um arquivo com nome específico e, caso o encontrem, o usarão como ícone. Este arquivo é o

apple-touch-icon.png

Como dito, ele deve estar na pasta raiz do site e ter as dimensões de 57×57 pixels. É possível também otimizar este arquivo com dimensões específicas para iPad, que suporta resolução maior. Então, de acordo com o dispositivo Apple, é possível usar os seguintes tamanhos de imagem para aproveitar o melhor possível dos ícones. Basta colocar um de cada resolução ao invés de um único arquivo.

apple-touch-icon.png

apple-touch-icon.png

  • iPohne e iPod Touch: apple-touch-icon-57×57.png
  • iPad: apple-touch-icon-72×72.png
  • iPhone 4 e 5: apple-touch-icon-114×114.png

Especificar o arquivo

Também é possível especificar o caminho do arquivo do ícone, caso esteja em outra pasta ou com outro nome. Para tanto, deve-se utilizar o código abaixo no head de seu código html:
<link rel="apple-touch-icon" href="/ipod-icone.png"/>

Personalização

Não é preciso arredondar os ícones. Basta com que ele tenha as dimensões corretas que o próprio iOS deixará com aparência para os dispositivos. A personalização permitida, no entanto, é de evitar com que se adicione sombras e outros efeitos. Sendo este o caso, o nome do arquivo deve ser: apple-touch-icon-precomposed.png

Deixe seu comentário