Gerador de Apple Touch Icon

Apple Touch Icon: o ícone que o iOS usa na tela inicial

O Apple Touch Icon é a imagem que o iOS Safari (e hoje também Chrome e demais navegadores em iPhone/iPad) utiliza quando o usuário toca em Compartilhar > Adicionar à Tela de Início. Foi introduzido no iOS 1 em 2007 — antes ainda dos PWAs e do manifest.json. Sem um Apple Touch Icon, o iOS gera uma miniatura a partir do screenshot da página, quase sempre borrada, descentralizada e inútil como identidade visual. Um único PNG de 180×180 resolve 95% dos casos nos iPhones modernos.

Histórico de tamanhos

A Apple foi lançando várias resoluções conforme as telas evoluíram. Você não precisa fornecer todas — o iOS escala qualquer ícone — mas conhecer a cronologia ajuda a decidir quantas variantes publicar:

• 57×57 — iPhone original (2007), sem retina.
• 72×72 — iPad original (2010).
• 114×114 — iPhone 4 retina (2010).
• 120×120 — iPhone 5 / 5S / SE (1ª geração).
• 144×144 — iPad retina (3ª geração).
• 152×152 — iPad Air / mini retina.
• 167×167 — iPad Pro.
• 180×180 — iPhone 6 Plus retina e todos os iPhones a partir do 6s — o padrão atual.

Em 2026 a escolha pragmática é publicar um único PNG de 180×180. Ele reduz limpo para as resoluções menores e o iOS cuida do resto. Apenas sites corporativos com branding pixel-perfect têm motivo para enviar todas as variantes.

Markup HTML

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.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">

O iOS também procura automaticamente por /apple-touch-icon.png e /apple-touch-icon-precomposed.png na raiz do site, então deixar o arquivo lá serve como fallback útil mesmo se você esquecer o <link>.

A Apple aplica o tratamento visual pra você

O iOS automaticamente recorta o ícone em um quadrado de cantos arredondados com aproximadamente 20% de raio, o mesmo formato de todo app nativo. Você deve enviar uma imagem quadrada completa, sem bordas — não arredonde os cantos você mesmo, ou o iOS vai arredondar de novo e ficará um quadrado interno visível. Em versões anteriores ao iOS 7, a Apple ainda adicionava um efeito de brilho (gloss) por cima; o rel="apple-touch-icon-precomposed" era o truque pra desativar. Tanto o gloss quanto o precomposed são depreciados desde o iOS 7 (2013), então use só o apple-touch-icon simples.

A Apple também não lida bem com transparência. PNGs com canal alfa são renderizados sobre um fundo preto opaco na tela inicial, o que geralmente fica horrível. Exporte sempre com fundo sólido da cor da sua marca, mesmo se o favicon e o ícone PWA forem transparentes.

Apple Touch Icon vs favicon vs ícone PWA

• Favicon — 16×16 a 32×32, na aba do navegador e barra de URL. Aceita SVG e transparência. Otimizado para renderização minúscula.
• Apple Touch Icon — PNG 180×180, na tela inicial do iOS. Fundo opaco, sem transparência, sem SVG.
• Ícone PWA (manifest) — PNG 192×192 e 512×512, usados por Android, ChromeOS e Windows quando o PWA é instalado. Aceita o purpose maskable.

Esses três não são intercambiáveis. Cada sistema operacional lê seu próprio slot. Um site completo entrega os três.

Formato e compressão

Use PNG-24 para fundos sólidos com texto nítido ou formas geométricas, ou JPEG se o ícone for uma foto (raro). SVG não é suportado — a Apple só renderiza PNG e JPEG no slot apple-touch-icon. Depois de exportar, passe o arquivo por oxipng ou pngquant para reduzir 60 a 80% do tamanho sem perda visível. Um PNG bem comprimido de 180×180 deve ficar entre 6 e 15 KB.

Perguntas frequentes

Preciso mesmo de todos os tamanhos? Não. Um único PNG de 180×180 cobre cerca de 95% dos dispositivos em uso hoje, incluindo todos os iPhones desde 2014. Os tamanhos menores são reduzidos automaticamente com qualidade aceitável.

Posso usar SVG? Não. A tela inicial da Apple só aceita imagens raster (PNG ou JPEG) no slot apple-touch-icon. SVG serve para favicon, não para isso.

Muda no modo escuro do iOS? Não. O ícone da tela inicial é o mesmo no modo claro e escuro — o iOS não troca variantes de apple-touch-icon. Só o favicon, via media query prefers-color-scheme dentro de um SVG, consegue se adaptar ao dark mode na aba do navegador.

Por que a Apple coloca borda preta no meu PNG transparente? Porque o apple-touch-icon não respeita alfa corretamente. Reexporte com fundo sólido da cor da marca.

O apple-touch-icon-precomposed ainda é necessário? Não. Era um truque para o efeito gloss do iOS 6, que a Apple removeu no iOS 7 (2013). O apple-touch-icon simples basta em qualquer dispositivo moderno.