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