Desenvolvedores da Web e proprietários de sites prestem atenção: você precisa definir um ícone de marcador do iOS pronto para retina. Os ícones de favoritos são chamados de Apple Touch Icon, e essas imagens personalizadas se tornam o ícone exibido na tela inicial do usuário quando ele marca um site em um iPad, iPhone ou iPod touch no iOS ou o painel de favoritos do Safari para OS X.Sem um conjunto de arquivos de ícone de toque de maçã personalizado, os usuários obterão uma miniatura chata e muitas vezes feia da própria página da web e, sem usar um ícone pronto para retina, o ícone de favoritos parecerá pixelado e geralmente horrível na nova tela do iPad.

Aqui está o que você precisa fazer para criar um Apple Touch Icon retina perfeito para qualquer site em algumas etapas fáceis.

1) Crie o ícone do site iOS pronto para retina

Use um modelo ou crie o seu próprio. Eu usei o fácil kit de ícones de retina DIY mencionado em uma postagem anterior, é um arquivo PSD que torna o design de ícones iOS de aparência agradável tão fácil quanto um ou dois cliques. Cole em um site ou logotipo da empresa e você está pronto para ir. Se você não tem nada para editar arquivos PSD, o Photoshop CS6 beta é excelente e gratuito para baixar e usar até que a versão final seja lançada no final do ano.

2) Salve como PNG e nomeie o ícone Retina Website Bookmark

O ícone deve ser um PNG e deve ter um de dois nomes. Cada nome de arquivo oferece uma aparência ligeiramente diferente do ícone conforme exibido na tela inicial do usuário:

• “apple-touch-icon.png” adicionará a sobreposição de balão de destaque ao ícone
• “apple-touch-icon-precomposed.png” exibirá o ícone como criado originalmente, sem a sobreposição de destaque

Use a última opção pré-composta se você criou seu próprio destaque ou se deseja que o ícone apareça mais plano sem a bolha onipresente que aparece na maioria dos ícones padrão da Apple.

3) Carregue o ícone de toque do marcador do site no diretório base da Web

Use um cliente SFTP (OS X inclui FTP no Finder e CyberDuck ou Filezilla são gratuitos) para copiar o arquivo apple-touch-icon.png para o diretório raiz da web. Geralmente, esse é o mesmo local em que o arquivo de índice principal do site está localizado. Após o upload, confirme se está no local correto abrindo um navegador da Web e acessando “http://SITEURL.com/apple-touch-icon.png” e certificando-se de carregar.

Aqui está um exemplo de um ícone de marcador pronto para retina de 512 × 512 do OSXDaily.com:

Observe que sem o sinalizador -pré-composto, o ícone acima exibirá o balão de destaque. Você pode ver a diferença entre os dois comparando o ícone real com o mostrado nas capturas de tela como o marcador.

4) Use um dispositivo iOS e marque o site como favorito

Essa é a parte mais fácil, pegue um dispositivo iOS (de preferência um iPad 3 para confirmar o aspecto da retina) e abra o Safari.Atualize o site para o qual você carregou o ícone e, em seguida, toque no ícone de seta e selecione "Adicionar à tela inicial", nomeie o marcador e retorne à tela inicial para confirmar que ele está lá.

Apesar de ter 512 x 512 pixels, o ícone da retina será reduzido em iPhones mais antigos e dispositivos sem retina. Se você realmente quiser, pode usar CSS e HTML para exibir ícones de tamanhos diferentes para dispositivos diferentes, mas isso não é realmente necessário.

Agora, se alguém adicionar seu site aos favoritos em um iPad com tela retina, ele ficará muito melhor na tela inicial. Isso é realmente tudo que existe para isso. E sim, já escrevemos sobre o ícone de toque da Apple antes, mas ele merece outra menção agora que o iPad 3 exige ícones e gráficos com resolução significativamente maior.