O apple-touch-icon: Um Guia Completo
Quando alguém adiciona seu site à tela inicial do iPhone, o iOS recorre a uma tag. Erre e ele pega um screenshot borrado da sua página no lugar.
O que é o apple-touch-icon
O apple-touch-icon é o ícone que o iOS usa quando um usuário toca em Adicionar à Tela de Início. Ele é separado do seu favicon e separado do web app manifest. Ele existe porque o iOS quer um ícone estilo app em qualidade total, não o pequeno favicon da aba ampliado.
Um único PNG 180x180 é suficiente. O iOS atual reduz esse único arquivo para cada contexto de que precisa, então você não publica a antiga escada de tamanhos 57, 72, 114 e 152.
O link tag
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">O iOS também procura por /apple-touch-icon.png na raiz do site mesmo sem tag, mas declará-lo é mais confiável entre diferentes configurações.
A especificação em resumo
| Propriedade | Valor |
|---|---|
| Dimensões | 180x180 |
| Formato | PNG |
| Transparência | Ignorada, composta sobre preto |
| Cantos | Origem quadrada, o iOS os arredonda para você |
| Nome do arquivo | apple-touch-icon.png na raiz do site |
Armadilhas comuns
Não ter nenhum apple-touch-icon é o pior caso. Quando o iOS não encontra um, ele recorre a um screenshot reduzido da página, que fica borrado e fora da identidade. Uma única tag resolve isso.
Arredondar os cantos você mesmo é um erro. O iOS aplica sua própria máscara de quadrado arredondado, então uma origem pré-arredondada é arredondada duas vezes e mostra uma borda fina de fundo ao redor do ícone. Dê a ele uma imagem quadrada, full-bleed.
Atualizar não é instantâneo. Uma vez que alguém adicionou seu site à tela inicial, mudar o ícone no seu servidor não atualiza o atalho existente. A pessoa precisa removê-lo e adicioná-lo de novo para pegar o novo ícone.
Perguntas frequentes
Qual é o tamanho de um apple-touch-icon?
180x180 pixels, como PNG. O iOS atual escala esse único arquivo para cada contexto, então você não precisa dos tamanhos antigos 57, 72, 114 ou 152.
Por que meu apple-touch-icon está mostrando um fundo preto?
O iOS ignora transparência no apple-touch-icon e o compõe sobre preto. Exporte o PNG com uma cor de fundo sólida em vez de transparente.
Por que o iOS mostra um ícone borrado para o meu site?
Você provavelmente não tem um apple-touch-icon. Sem um, o iOS usa um screenshot reduzido da página. Adicione um PNG 180x180 e o link tag correto.
Por que meu ícone da tela inicial não atualizou depois que eu o mudei?
Atalhos existentes na tela inicial guardam em cache o ícone com que foram criados. O usuário precisa remover o atalho e adicionar o site de novo para pegar um novo apple-touch-icon.