Como Criar o Touch Icon para os Websites Facilmente


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.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>