Criar um Ícone de Clip Web para iPhones - dummies

Como você pode marcar páginas da web em um navegador de desktop, você pode salvar um link para qualquer página da Web em um iPhone ou iPad clicando no ícone Exportar circulado em vermelho em a figura superior e, em seguida, escolha Adicionar à tela inicial, como mostrado na figura inferior.

Um ícone do Clip da Web parece exatamente com os ícones que acompanham os aplicativos originais do iTunes. Quando um visitante do seu site adiciona um ícone do Web Clip à tela inicial (a área de trabalho do dispositivo), ele cria um link para o seu site, bem como um marcador em um navegador da área de trabalho.

Este ícone de Clip Web dá aos seus visitantes um ótimo atalho de volta ao seu site, e é uma maneira poderosa de mantê-los pensando em você. Infelizmente, muitos usuários do iPhone e iPad nem sequer percebem que é possível salvar um link para um site desta maneira.

Veja como funciona: quando um usuário toca o botão do meio na barra de botões na parte inferior do iPhone ou iPod touch, o Safari oferece diversas opções.

Quando você escolhe Adicionar à tela inicial, uma imagem pequena, chamada de ícone Web Clip, é salva na tela inicial do iPhone ou iPad com um link para a web página. Este link torna um site clicando em um ícone tão fácil como o lançamento de um aplicativo. Clique no ícone de Clip da Web e o iPhone e o iPad iniciam o Safari e abra a página em um navegador em uma ação lisa.

Como um web designer, você pode criar uma imagem para servir como ícone da Web Clip. Se você não fizer isso, o iPod touch, iPhone ou iPad salva uma captura de tela do que está exibido na tela e usa isso como o ícone. É uma boa idéia ir apenas um pouco de esforço extra e especificar a imagem que deseja usar como ícone na tela inicial.

Nesta figura, você pode ver um ícone de Clip Web criado a partir da imagem principal usada neste projeto. Esta imagem é recortada e simplificada para servir como um ícone melhor do que uma captura de tela de toda a página, o que inclui o texto e outras imagens de tamanho tão pequeno que seria impossível de ler.

Veja como você cria um ícone de Clip da Web e especifique-o no código da sua página:

1. Use um programa de gráficos, como o Photoshop, para criar a imagem que deseja servir como seu ícone.

   A imagem deve medir 114 x-114 pixels e ser guardada no formato PNG.

   Nota: Os dispositivos de alta resolução exibem o ícone em 114 x 114. Os iPhones mais antigos a exibem em 57-x-57 pixels, os iPads exibem 72-x-72 pixels. Você pode criar um de cada tamanho, ou você pode deixar o dispositivo reduzir a imagem automaticamente. Observe também que você pode usar uma imagem JPEG, mas se você quiser se certificar de que o ícone funciona em todos os dispositivos, salvá-lo como uma imagem PNG é a opção mais segura.

2. Nomeie o ícone Apple-touch-icon. png e faça o upload para o diretório raiz do seu site.

3. (Opcional) Se você quiser salvar a imagem em um subdiretório ou desejar usar um ícone de Web Clip diferente para a página inicial do que você usa para páginas internas em seu site, você pode adicionar este código à seção de qualquer página web para especificar o nome e a localização da imagem.