Apple touch icon - Docs do MetricSpot

O que esta verificação faz

Procura no <head> por um elemento <link rel="apple-touch-icon"> e verifica se o ficheiro referenciado existe e carrega. O Safari iOS usa este ícone quando um visitante toca em Partilhar → Adicionar ao Ecrã Inicial.

Porque é importante

Quando utilizadores iOS guardam o teu site no ecrã inicial, ganhas uma instalação grátis com aspeto de app — mas só se tiveres fornecido o ícone. Sem ele, o iOS renderiza uma captura desfocada da página ao tamanho de ícone, o que parece avariado e abandonado. Apresentação tipo app aumenta significativamente as taxas de regresso.

A Apple deixou de exigir um touch icon para indexação há anos, portanto a verificação é sobre apresentação e confiança de marca, não rastreabilidade. Mas o custo é um ficheiro PNG e três linhas de HTML, portanto não há razão para deixar passar.

Como corrigir

Adiciona um PNG de 180×180 à raiz do site e liga-o:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

O iOS começa por procurar /apple-touch-icon.png na raiz do domínio mesmo sem uma tag <link> — portanto colocar o ficheiro lá costuma chegar. Mas enviar o <link> explícito é mais fiável em versões antigas do iOS e em clientes terceiros modernos (Slack, Discord, leitores de RSS) que o usam para pré-visualizações.

Abordagem de tamanho único (recomendado para a maioria dos sites):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

180×180 é o maior tamanho que o iOS pede. O iOS reduz para alvos menores — uma imagem chega.

Abordagem multi-tamanho (só se tiveres razões de marca para otimizar cada um):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Orientações de design:

PNG apenas. JPEG cria artefactos em fundos sólidos; SVG não é suportado.
Sem transparência. O iOS aplica uma máscara de cantos arredondados e adiciona um leve brilho em versões antigas — desenha para uma tela quadrada, sangrada por completo.
Faz com que seja legível ao tamanho mais pequeno (76×76 em iPads antigos). Um wordmark funciona; um slogan de 20 caracteres não.
Emparelha com uma meta theme-color e um web manifest para a experiência completa de ecrã inicial em iOS e Android.

Gerar a partir de uma fonte:

O RealFaviconGenerator aceita uma imagem-fonte e produz o touch icon, o conjunto de favicons, o manifest e o HTML para colar — cobre iOS, Android, tiles do Windows e instalabilidade PWA num só passo.

Astro: coloca os ícones em public/ e adiciona o link ao <head> do BaseLayout.astro.

Next.js: põe apple-icon.png (180×180) diretamente em app/ — o App Router gera automaticamente a tag <link>.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress: a maioria dos temas modernos aceita um touch icon em Aparência → Personalizar → Identidade do Site. Caso contrário, coloca o PNG na raiz do tema e adiciona o <link> ao header.php.

Perguntas frequentes

E os ecrãs iniciais Android?

O Android usa o web manifest para encontrar ícones — o array icons com PNGs 192x192 e 512x512. O apple touch icon é só de iOS; envia os dois.

Preciso de `apple-touch-icon-precomposed`?

Não. Essa variante dizia a versões antigas do iOS para não aplicar o efeito de brilho. O iOS removeu o brilho no iOS 7 (2013); dispositivos modernos ignoram completamente a variante precomposed. Fica-te pelo apple-touch-icon.

Os navegadores voltam a carregar o ícone quando o atualizo?

O iOS faz cache do ícone agressivamente. Adiciona uma query string quando o substituis (href="/apple-touch-icon.png?v=2") para que as cópias em cache atualizem. O mesmo truque serve para o favicon.