Guia

Guia apple-touch-icon

Quando alguém adiciona seu site à tela inicial do iOS, o Safari usa o apple-touch-icon — não o favicon.ico. Publique um PNG de 180×180 (ou quadrado maior que reduza bem) e vincule-o no <head>.

A Apple não aplica máscara em web clips do iOS moderno como faz em apps nativos, mas seu ícone deve ser quadrado com margens de segurança — mantenha o logo recuado cerca de 10 % para que os cantos arredondados nunca cortem a arte.

Use <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Um único arquivo de 180×180 cobre todos os iPhones atuais; entradas opcionais de 152×152 e 167×167 atendem iPads antigos.

Como funciona

  1. 1

    Exporte um PNG de 180×180

    A partir do nosso gerador de favicon ou redimensionador de imagens.

  2. 2

    Envie para a raiz do site

    /apple-touch-icon.png ao lado de favicon.ico.

  3. 3

    Adicione a tag de link

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

Experimente agora

Gere o apple-touch-icon

Gerador de Favicon

Perguntas frequentes

Qual o tamanho do apple-touch-icon?+

180×180 pixels para iPhones atuais. Exporte a partir de um master de 512×512 ou 1024×1024.

PNG ou ICO para iOS?+

Somente PNG. O iOS ignora .ico para ícones de tela inicial.

Ainda preciso de favicon.ico?+

Sim — abas e outros navegadores ainda usam .ico. O apple-touch-icon é complementar.

Ferramentas relacionadas

Mais guias

Guias

Explorar FetchFavicon

Categorias

Conversores

Utilitários

Guias

Tutoriais