Crie um Apple Touch Icon para que visitantes com aparelho iOS (iPhone, iPad ou iPod) possam favoritar o seu site.

Ao criar um Apple Touch Icon, o visitante com aparelho iOS (iPhone, iPad ou iPod) pode marcar o seu site como favorito. O marcador será um ícone inline com outros apps ou marcadores em uma tela inicial.

Para revisar as diretrizes de imagem da Apple para esses ícones, acesse a página de diretrizes de imagem.

A solução descrita neste guia inclui o uso de injeção de código, um recurso Premium disponível nos planos Business e Commerce.

Etapa 1 – Carregue a imagem do ícone

Crie o ícone para o site. O ícone deve ser um arquivo .png e não pode ser transparente. Recomendamos usar o mesmo design do seu favicon ou logotipo do site para uma aparência consistente.

Após criar a imagem, abra o editor de página em uma página de layout no site e informe o texto do link. Destaque o texto e clique no ícone de link na barra de ferramentas de texto.

O editor de link se abrirá. Clique na aba Arquivos e em Adicionar arquivo para carregar o arquivo de imagem do ícone de toque. Clique em Adicionar link para inserir o link.

Etapa 2 – Obtenha o URL da imagem do ícone

Clique no texto vinculado novamente e copie o URL do arquivo. O URL do arquivo tem a seguinte aparência:

/s/file-name.extension

Etapa 3 — Adicione injeção de código

Abra o painel "Injeção de código".

Copie e cole o seguinte código no campo injeção de código do cabeçalho:

<link rel="apple-touch-icon" href="/s/file-name.extension">

Substitua /s/file-name.extension pelo URL copiado para o arquivo de ícone.

Clique em Salvar.

Etapa 4 – Visualize seu ícone de toque

Acesse seu site usando seu dispositivo iOS. Use a opção Compartilhar para adicionar o site à tela inicial. O visual será algo como:

Atenção: essa personalização baseada em código está fora do escopo do suporte ao Squarespace. Recomendamos que você tenha conhecimento de codificação antes de adicionar o código à injeção de código. Não oferecemos mais ajuda sobre este assunto, mas há muitos recursos disponíveis para isso:

• Para obter ajuda com os ícones do Apple Touch, acesse o site do desenvolvedor da Apple.
• Visite nosso Fórum do Squarespace para clientes e desenvolvedores.
• Conheça as práticas recomendadas para adicionar um código personalizado.
• Leia o nosso guia geral sobre personalizações baseadas em código.
• Contrate um Squarespace Expert para criar um código personalizado para o seu site.