Se você tem um site próprio ou está desenvolvendo um para outra pessoa, você deve personalizar o ícone de marcador salvo que aparece na tela inicial do iOS de um usuário. Na captura de tela acima, você verá o favicon personalizado do OSXDaily na tela de um iPhone.

Configurar o Apple Touch Icon é uma boa ideia porque, por padrão, o iOS salvará apenas uma pequena miniatura do site. As miniaturas pequenas geralmente são difíceis de identificar e geralmente não parecem tão boas, então vamos definir sua própria imagem de favicon.

Como personalizar e definir um ícone Apple Touch para um site

• Crie o ícone, certifique-se que é um quadrado, o que está aqui no OSXDaily.com é 512×512 pixels, mas você pode escolher outros tamanhos de quadrados se realmente quiser – note que maior é apropriado para telas de retina
• Salve o ícone da tela inicial como um arquivo PNG e rotule-o: apple-touch-icon.png
• Solte apple-touch-icon.png no diretório raiz do servidor web, para que possa ser acessado em domain.com/apple-touch-icon.png
• Teste o ícone de favoritos da tela inicial do seu site visitando o site no Safari no iOS e tocando em “Adicionar à tela inicial”
• Olhe para a tela inicial do dispositivo iOS e você verá o marcador salvo lá com seu novo ícone personalizado, como na captura de tela acima

Desde que o arquivo tenha o nome correto e esteja no diretório raiz do servidor da web, o Mobile Safari saberá o que fazer com ele, de forma que não seja necessário nenhum ajuste adicional para exibir o favicon específico do iOS.

Para referência, aqui está nossa imagem personalizada 'apple-touch-icon.png' que usamos para OSXDaily.com, este exemplo de ícone de marcador foi criado e dimensionado adequadamente para telas retina ():

Você notará que o arquivo de ícone real não tem a refração da luz salva no ícone, o iOS lida com isso sozinho. Você pode usar qualquer imagem que desejar, mas recomendo criar uma que capture a interface do usuário familiar dos ícones existentes do iOS.

Isso obviamente não é o mesmo que ter um aplicativo iOS dedicado, mas uma experiência de usuário móvel decente da Web é uma boa ideia e evita o que pode ser o alto preço de desenvolver um aplicativo iOS.

E ei, se você está preocupado com coisas assim, provavelmente usa o Photoshop para pelo menos projetar os ícones, certo? Então confira alguns enquanto você está nisso.