Ícone para a tela inicial do iOS
Gerador de Apple Touch Icon 180×180
Um PNG de 180×180, com fundo e margem já definidos.
Envie um logo, ajuste a margem e o fundo sólido e compare os pixels exportados com a prévia da tela inicial do iPhone. O iOS aplica os cantos arredondados no aparelho; o arquivo baixado permanece quadrado.
Faça upload de um logotipo para o ícone do Apple Touch
Use uma marca simples e com bom contraste para continuar reconhecível na tela inicial do celular.
PNG · JPG · WEBP · SVG · até 10 MB
Como criar um ícone do Apple Touch
- 01
Faça upload de um logotipo ou ícone quadrado
Carregue um símbolo de logotipo quadrado quando possível. Marcas nominativas largas geralmente ficam muito pequenas quando são centralizadas dentro do ícone.
- 02
Ajustar o preenchimento e o fundo do ícone do Apple Touch
Use uma cor sólida que pertença à marca. Deixe espaço suficiente para o corte arredondado do sistema sem desenhar cantos arredondados no arquivo de origem.
- 03
Baixe o PNG 180×180
Salve apple-touch-icon.png com os ativos do site público e adicione o elemento de link gerado ao cabeçalho da página.
Tamanho, formato e nome do arquivo do ícone do Apple Touch
Essa ferramenta tem uma função restrita: produzir o ícone do site que o Safari usa quando um visitante adiciona uma página à tela inicial do iPhone ou iPad.
Dimensões
180×180 pixels
Um tamanho de Web Clip para iPhone de alta resolução. O Safari pode escolher o ícone declarado mais adequado para o dispositivo.
Arquivo
apple-touch-icon.png
Um nome de arquivo convencional no nível raiz que é fácil de implantar e reconhecer.
Renderização
Quadrado e opaco
A cor selecionada preenche cada pixel. Os cantos arredondados e a apresentação final são aplicados pelo iOS.
Como adicionar um ícone do Apple Touch ao seu site
Coloque o PNG na URL usada no elemento de link, implemente as duas alterações juntas e teste o arquivo público diretamente antes de adicionar o site à tela inicial.
Leia a documentação do ícone do Web Clip da AppleAdicionar ícone de toque de maçã ao HTML simples
Coloque apple-touch-icon.png na raiz pública e cole o elemento do link no cabeçalho de cada modelo de página.
Defina um ícone do Apple Touch em Next.js
Coloque o arquivo em público ou use a convenção de metadados da estrutura. Verifique se há uma declaração de ícone existente para que um ativo mais antigo não continue ganhando.
Use o ícone do site WordPress
O WordPress pode derivar ativos de plataforma do ícone do site. Se você instalar este arquivo manualmente, verifique se o tema ou plug-in de otimização não exibe um ícone de toque diferente.
Perguntas frequentes sobre o ícone do Apple Touch
O que é um ícone do Apple Touch?
É a imagem que o Safari usa para representar um site quando alguém o adiciona à tela inicial do iPhone ou iPad. É separado do pequeno favicon usado nas guias do navegador.
Por que esta ferramenta exporta 180×180?
A Apple documenta 180×180 como o tamanho do ícone do iPhone Web Clip de alta resolução. Um site pode declarar tamanhos adicionais para outros dispositivos, mas um PNG nítido de 180×180 é a escolha prática de arquivo único para este gerador focado.
Devo dobrar as esquinas sozinho?
Não. Mantenha o arquivo exportado quadrado. O iOS aplica a apresentação e a forma arredondada do dispositivo, portanto, incluir cantos arredondados na arte pode criar bordas duplas ou lacunas indesejadas.
O ícone pode ter transparência?
Este gerador remove deliberadamente a transparência compondo a arte sobre a cor sólida escolhida. Isso torna o resultado previsível e evita que áreas transparentes se transformem em um fundo indesejado.
Por que o ícone antigo ainda está aparecendo?
Primeiro abra o URL PNG implantado e confirme se ele veicula o novo arquivo. Em seguida, verifique se há elementos de link duplicados, caches de sites ou CDN e um marcador existente na tela inicial que pode precisar ser removido e adicionado novamente.