O que é um Apple Touch Icon?
O apple-touch-icon é a imagem que o iOS usa quando os usuários adicionam o seu site à tela inicial. Ele aparece ao lado dos ícones de apps nativos, então precisa parecer profissional e reconhecível.
Por que isso importa?
- Aparência na tela inicial — Sem ele, o iOS tira um screenshot da página, que em geral fica horrível
- Reconhecimento de marca — Seu ícone aparece ao lado de apps nativos como Instagram e WhatsApp
- Visitas de retorno — Usuários que adicionam o site à tela inicial costumam ser muito engajados
- Suporte a PWA — Essencial para instalações de Progressive Web App no iOS
- Web clips — Usado em favoritos e na lista de leitura do Safari
Como corrigir
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Especificações da imagem
- Tamanho: 180x180 pixels (o iOS reduz a escala em dispositivos mais antigos)
- Formato: PNG (sem transparência — o iOS aplica os próprios efeitos)
- Formato visual: Quadrado, sem cantos arredondados (o iOS arredonda automaticamente)
- Sem transparência — Use uma cor de fundo sólida
Dicas de design
- Mantenha simples — Precisa funcionar em tamanhos pequenos como 60x60
- Fundo sólido — Fundos transparentes aparecem pretos no iOS
- Sem cantos arredondados — O iOS aplica o próprio raio de canto
- Combine com o favicon — Deve ser reconhecível como a mesma marca
- Teste em dispositivos reais — Adicione o site à tela inicial para conferir
Tamanhos adicionais (opcional)
<!-- Primary (required) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Optional: specific sizes for different devices -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />Na prática, fornecer só a versão 180x180 é suficiente — o iOS reduz a escala conforme necessário.