Como Criar Ícone PNG (Apple Touch Icon) para Site no iPhone

Desenvolvedores criam um arquivo PNG para que, quando usuários adicionam o site à tela de Início do iPhone ("Adicionar à Tela de Início"), apareça um ícone personalizado em vez de miniatura da página.

O que você precisará

Site com acesso à raiz (root) ou pasta de assets
Editor de imagem (Photoshop, GIMP, Figma, Canva, etc.)

Instruções

Crie ícone quadrado representativo do seu site/marca. Tamanho recomendado: 180×180 pixels (cobre @3x para iPhones modernos). Formato: PNG com transparência (melhor) ou JPEG.
Salve como apple-touch-icon.png (nome padrão). Opcional: crie versões específicas: apple-touch-icon-76x76.png, apple-touch-icon-120x120.png, apple-touch-icon-152x152.png, apple-touch-icon-180x180.png.
Faça upload para a raiz do site (ex: https://seusite.com/apple-touch-icon.png) ou pasta de imagens.

No <head> do HTML, adicione (opcional se estiver na raiz com nome padrão, mas recomendado para clareza):

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Opcional: tamanhos específicos -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<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">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">

Teste: No iPhone, abra site no Safari > Compartilhar > "Adicionar à Tela de Início". Seu ícone aparecerá.

Dica: Adicione também <meta name="apple-mobile-web-app-capable" content="yes"> para abrir em tela cheia (sem barra Safari) e <meta name="apple-mobile-web-app-title" content="Seu App"> para nome curto abaixo do ícone.