Como criar ícone de site para iPhone e iPad

Criar um ícone para seu site no iPhone (e iPad, iPod Touch e outros aparelhos que rodem o iOS), para aparecer quando o usuário usa a função "Adicionar à Tela Início", é bastante simples: no cenário mínimo, basta gravar a imagem desejada no diretório-raiz do seu site, com o nome de apple-touch-icon.png

Originalmente o padrão era que essa imagem tivesse 57x57 pixels, mas o iOS se encarrega de reduzir imagens maiores, e aparelhos com maior resolução (como o iPhone 4 e o iPad) fazem bom uso de ícones maiores - o ícone do site apple.com, por exemplo, tem 129x129 pixels, e o ícone aqui do BR-Mac.org tem 114x114 pixels.

Consta que os tamanhos ideais para cada dispositivo, hoje, são 114x114 (iPhone 4), 57x57 (demais iPhones) e 72x72 (iPad). Você pode definir um único apple-touch-icon.png pouco maior que 114x114 (como faz a própria Apple no apple.com) e deixar o iOS ajustá-lo a cada aparelho automaticamente, ou pode definir uma imagem diferente para cada um deles, referenciando-as assim na seção <head> da sua página:

<link rel="apple-touch-icon" href="meu-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="meu-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="meu-touch-icon-iphone4.png" />

Não esqueça de trocar os nomes de arquivo mencionados acima pelos nomes que você tiver dado às suas imagens ;-)

Você não precisa se preocupar em criar bordas arredondadas ou o efeito de brilho que aparece nos ícones do iPhone: o próprio iOS os acrescenta. Mas se você quiser não usar o efeito de brilho, pode usar um arquivo precomposed, definindo-o assim:

<link rel="apple-touch-icon-precomposed" href="meu-touch-icon-precomposed.png" />

Para evitar dúvidas, o procedimento para o usuário acrescentar o ícone de um site ao iPhone (e iPad, etc.) é o seguinte:

Ou seja: dentro do navegador Safari, primeiro clica no ícone de mais opções, depois seleciona o item "Adicionar à Tela Início", no menu que vai surgir.

E caso o usuário queira forçar um ícone diferente para um determinado site, também existe um procedimento, embora não seja dos mais simples!

Comentar

Comentários arquivados

Mais acessados:

Artigos recentes: