Como criar um Apple Touch Icon para seu site

0
481

Era uma vez, Steve Jobs, CEO da Apple, que em 2007, decidiu lançar o iPhone, que logo após, surgiu a onda dos smartphones. Com a vinda dos smartphones, a internet foi introduzida não só em computadores e, claro, no smartphones também, o que mais tarde tornou a aparecer em tablets também. Com isso tudo, a Apple criou vários métodos de integrar o iOS na internet, incluindo uma forma interessante para criar webapps, incluindo pode criar atalhos para adicionar seus sites na homescreen (tela inicial), o que faz dele como se fosse um app.

Mas qual a importância e o que é exatamente?

Como explicado, ao acessar um site pelo iPhone, iPod e iPad, geralmente há um site preparado para ambos, e isto mais para iPhone e iPod, já que iPad tem 9 polegadas. Além disso, há criação de webapps, que nada mais é que aplicativos que funcionam pelo Safari, que é o navegador do iOS, onde torna-se desnecessário baixar um aplicativo, mas não é melhor que um aplicativo. Geralmente é utilizado para fazer uma página adaptada para blogs, jornais, e afins.

E claro, é importante ter um Apple Touch Icon para você salvar um atalho do site na suahomescreen, que é a tela inicial. Como devem saber — ou não, porque o fanboy aqui sou eu –, uma das coisas boas do iOS é que ele tem excelência nos ícones, e é tão gritante que eu já fiz até a expressão “nunca julgue um app pelo ícone”, mas as vezes julgando assim, deu certo. Aqui no Designer Effects ficou assim:

BCUbC95CAAA7rkK (1)

Viram? Nosso ícone aqui do Designer Effects é assim, e não foi difícil de fazer. Apenas fazer um ícone em PNG, algumas normas, editar um código, e pronto.

Criando seu ícone

Esta parte é bem simples, mas há uma dúvida no ar. Sei mexer no XCode, já fiz aplicativos de teste, mas nunca publiquei na App Store, mas uma coisa é certa: a Apple sempre exigiu um padrão ideal, e perguntando no Twitter, o @WonderBruno me disse que a Apple exige 1024×1024 pelos ícones, e vale lembrar que tem questões de Retina Display e afins. Mas a gente fez em 512×512, como o chará sugeriu, e deu certo no meu iPhone.

Basta apenas você criar um ícone em 512×512 sem se preocupar com bordas arredondadas, com efeitos de brilho, e o que for, porque o sistema fará isso por você. Mas não quer dizer que se você não quiser colocar o brilho por cima do ícone que você vá ser obrigado, porque no código, há como mudar. Depois de fazer o ícone, salve apenas em PNG. Recomendo também deixar o nome “apple-touch-icon.png” para ficar mais bonitinho e fácil de entender o que é.

Aplicando no site

Depois de fazer o ícone, enviar para o servidor, está na hora de implementar no seu site. Você irá adicionar em <head> um código responsável para o funcionamento do ícone, mas há dois códigos: um que inclui efeitos de brilho, que é o ícone padrão, ou o outro que não adiciona efeito nenhum, apenas arredonda as bordas.

Standard icon (ícone com efeitos): trata-se do ícone com efeitos e mais efeitos, que claro, as vezes pode ser ruim ou não. Eu pessoalmente não gosto mais de ícones com este estilo por eles serem muito utilizados quando eu comprei meu iPhone, ou seja, há anos atrás. São assim:

BCUfXe2CIAEiT_K

Para utilizar o ícone assim, do modo normal, como a Apple chama, será necessário utilizar este código:

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

Precomposed Icon (ícone sem efeitos): caso você faça um ícone todo detalhado, com efeitos de cores, brilho, e tudo que você aplicou e não deseja aqueles efeitos que a Apple coloca por padrão, este é o código certo. A única coisa que ele fará é deixar as bordas arredondadas, o que não é necessário fazer na edição do ícone sabendo que o sistema fará as alterações sem problemas. Seu ícone ficará assim:

BCUbC95CAAA7rkK

Para utilizar o ícone assim, sem nenhuma frescura aplicada pela Apple, será necessário utilizar este código:

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

E fim

Bem simples, não? É feito de uma forma bem simples, e claro, pede também um layout caprichado para smartphones, o que nós fizemos também aqui no Designer Effects que pode ser visto acessando o site pelo smartphone mais próximo do seu computador, ou, do seu iPad.

RECEBA NOSSAS ATUALIZAÇÕES GRÁTIS
Enviamos nossos novos posts por e-mail para que você não perca nenhuma novidade!