Logotipo Design Interativo

Como Criar o Touch Icon para os Websites Facilmente


Para quem ainda não sabe o touch icon é um ícone personalizado que você insere na pasta de imagens do site e chama eles no  HTML assim nos dispositivos móveis os atalhos que você criar para o site o ícone fica personalizado mostrando a imagem que você criou.

A principio era utilizado apenas para a plataforma da Apple mas agora também funciona no Android e no Windows Phone utilizando as mesmas tags e links. Então não se preocupe todos os outros sistemas operacionais também entenderão o código que era feito para Iphone e IPad e mostrarão o ícone.

A maior vantagem de se usar touch icon nos sites é que facilita a usabilidade, deixando mais claro a associação da marca no botão.

Um ótimo site que gera tanto o código como os ícones nos tamanhos corretos incluindo o favicon é o www.iconifier.net, você só precisa criar a imagem em um formato de 200 x 200 pixels  no seu editor de imagens, que ele fará todos os cortes e gerará um arquivo zipado para download.

O Design Interativo tem touch icon você pode criar um atalho em sua home do Smartphone ou Tablet e ver como fica.

Exemplo do Código

exemplo

Existem todas essas medidas porque o ícone é aplicado para todas as resoluções e tamanho de tela, a tag rel chama-se apple-touch-icon mas todos os outros dispositivos entendem.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade