Tutorial como criar ícone do seu site para iPhone, iPod e iPad

Essa é uma função muito útil hoje em dia para todos os sites que costumam ser acessados pelos iDevices da Apple, o iPhone, iPod e iPad.

Estarei demonstrando nesse tutorial como criar um ícone do seu site na springboard do seu iPhone, iPod ou iPad quando seu site for adicionada à Tela de Início pelos usuários.

TUTORIAL COMO CRIAR ÍCONE DO SEU SITE PARA IPHONE, IPOD E IPAD:

1 - Crie com seu programa de foto preferido (Photoshop, Fireworks, Gimp, etc…) a imagem do seu logo com a medida de 512×512 pixels e salve como apple-touch-icon.png. De preferência para PNG para garantir a qualidade do ícone:

Não se preoculpe com as bordas redondas ou o efeito de brilho pois o próprio aparelho altera isso na hora de salvar a página.

2 - Envie seu apple-touch-icon.png para seu servidor de hospedagem ou para algúm site de hospedagem de imagens.

3 - No código do seu site, antes de fechar a tag </head>, acrescente a linha abaixo:

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />

Não se esqueça de alterar o caminho certo do seu apple-touch-icon.png na linha acima.

4 - Para o teste final, no seu iPhone, iPod ou iPad, abra o Safari e acesse seu site. Clique no menu para salvar seu site:

5 - Selecione a opção Adicionar à Tela de Início:

6 - Observe que o ícone já aparece! Escreva o nome do seu site e selecione Adicionar:

7 - Pronto! Só conferir agora o ícone criado, que quando selecionado entrará diretamente no seu site: