¿Quer um ícone do seu site no iPhone, iPod Touch e iPad? Adicione facilmente seu ícone à tela de início no iOS desde o Safari, como eu fiz com meu blog:
Dimensões do Apple Touch Icon
Para começar, deverá criar um ícone em formato PNG com uma resolução mínima recomendada de 72dpi e 57×57 píxels.
Como veremos depois, podemos configurar diferentes dimensões para cada dispositivo:
- iPhone e iPod Touch: 57×57 píxels
- iPad: 72×72 píxels
- iPhone 4 e seguintes versões: 114×114 píxels
Não é preciso desenhar o ícone com as bordas arredondadas, pois o iOS o faz automaticamente.
Inserção básica do Apple Touch Icon
Definir um ícone personalizado para todas as páginas do site no iOS 1.1.3 e versões posteriores é muito fácil. É só subir um arquivo PNG ao diretório raiz do seu site com o nome:
-
apple-touch-icon.png
Depois da versão iOS 2.0 podemos evitar que Safari e iOS incorpore efeitos de sombras e brilhos como faz por padrão, através do precomposed:
-
apple-touch-icon-precomposed.png
Assim é como aparecem os ícones em um iPhone 4: sem personalizar, normal e precomposed,
Escolhendo a resolução do dispositivo
A partir do iOS 4.2 podemos também personalizar os ícones segundo a resolução dos diferentes dispositivos para otimizar a visualização.
Ao invés de botar um único arquivo no diretório raíz com o nome apple-touch-icon.png, vamos subir um para cada resolução:
apple-touch-icon-57x57.pngapple-touch-icon-72x72.pngapple-touch-icon-114x114.png
Para remover os efeitos, vamos escrever os nomes de arquivo como segue:
apple-touch-icon-57x57-precomposed.pngapple-touch-icon-72x72-precomposed.pngapple-touch-icon-114x114-precomposed.png
Vantagens: não precisamos alterar o código da página.
Inconvenientes: o Safari e o iOS podem demorar demais em encontrá-lo, pois precisam pesquisar ícones com esses nomes de entre todos os arquivos no diretório raiz. A maioria dos usuários não aguardará até o sistema achar o ícone personalizado e nosso trabalho terá sido inútil. É por isso mesmo que, apesar de também ter alguma desvantagem, eu recomendo utilizar a personalização avançada do Apple Touch Icon.
Personalização avançada do Apple Touch Icon
Podemos definir o ícone do nosso site colocando umas linhas de código no <head> de todas as páginas que corresponda:
<link rel="apple-touch-icon" href="/nome-do-icone.png"/>
E para evitar as ícones:
<link rel="apple-touch-icon-precomposed" href="/nome-do-icone.png"/>
Sendo que vamos ter essa linha de código em todas as páginas, nos casos que queremos um ícone diferente em só uma delas, vamos conseguí-lo simplesmente indicando a rota específica do arquivo no atributo href das páginas que queremos diferenciar.
Fiquem de olho na barra no início de /nome-do-icone, que significa que o arquivo está no diretório raiz do site. Caso não incluirmos a barra, estaremos indicando que o arquivo está no diretório de cada uma das páginas. Na home o resultado será igual com ou sem barra, mas se estivermos por exemplo na página de uma seção como www.exemplo.com/secao/:
/nome-do-icone: vai procurar o ícone no diretório raiz.nome-do-icone: vai procurar o ícone dentro da pasta seção. Caso não encontre, essa página não terá o Apple Touch Icon.
Agora que sabemos fazer a declaração através do código, vamos incrementá-lo para estabelecer diferentes ícones para iPhone, iPod Touch e iPad. Será suficiente colocar o atributo sizes como segue (incluindo o termo precomposed se quisermos):
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone4.png" />
Vantagens: é rápido para ser identificado pelo Safari e o iOS, garantindo o ícone personalizado para todos seus usuários. Permite todos os níveis de personalização.
Inconvenientes: precisa de até 3 linhas de código adicionais em cada página.
Colocando a ícone na sua tela de início
¡Conseguimos! Foi fácil né? Experimente aí! Se você está me lendo desde um dispositivo mobile, lhe convido a conferir como aparece meu Apple Touch Icon fazendo assim:
Gostou do tutorial? Compartilhe e me ajude a melhorá-lo com seus comentários!
Valeu suas dicas com o passo a passo com a finalidade de facilitar a inserção e criação do ícone do site para iPhone, iPod e iPad…
A criação de um ícone funciona em blogs do blogger?
Olá JB, obrigada por me ler, pode adicioná-lo sim!
Quando não consiga salvar a imagem no diretório raíz por ser um hosting gratuito, carregue o Apple Touch Icon em qualquer outro lugar e altere a URL do href apontando à ruta onde está sua imagem.
Conseguiu?
Eu coloquei antes de /head e o elemento ficou assim:
link rel=”apple-touch-icon” href=”/http://i1256.photobucket.com/albums/ii499/Jansen_Barros/apple-touch-icon.png”/
Mas não funcionou! Tem algo errado?
A imagem deve estar no seu dominio (não no Photobucket). Tente carregá-la como se for a imagem de um post.
Está muito difícil! Muito obrigado por ter me ajudado Rocío. Espero algum dia conseguir personalizar esse Apple Touch Icon.
Sim, infelizmente vi que o Blogger hospeda as imagens nessa URL, e no caso fora do seu domínio. Apesar desse probleminha, boa sorte com seu blog!
-Resposta Rocío Miró-
Fiz o que você disse e ficou assim:
link rel=”apple-touch-icon” href=”/http://2.bp.blogspot.com/-hJtHZmxXfbE/UEUAzm3k-MI/AAAAAAAAAvQ/M4JBWXl6J1w/s1600/apple-touch-icon.png”/
E colquei antes de /head, mas não funcionou! O que será?
É que 2.bp.blogspot.com não é seu dominio, deveria ser gatoduplo.blogspot.com.
Parabéns pela matéria, muito bem detalhada. Foi de muita ajuda no meu projeto de website. Noobs, como eu, agradecem.
Eu que agradeço pela força!