Ícones Web, PWA e Chrome

O ZIP Web contém favicon.ico, PNGs de 16/32 px, ícone Apple touch de 180 px, ícones PWA de 192/512 px, site.webmanifest e og.png de 1200x630.

Conteúdo do ZIP Web

Os dois PNGs PWA são ícones quadrados comuns. Nomes e dimensões correspondem ao array icons de site.webmanifest; og.png é uma imagem separada para compartilhamento.

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

Conecte os ícones ao site

1. Copie os arquivos de Web para a pasta pública do site e publique na raiz do domínio, ou ajuste os caminhos à pasta escolhida.
2. Edite name e short_name em site.webmanifest. start_url e scope são relativos ao manifesto; os caminhos exportados dos ícones começam com /. Altere-os se as imagens estiverem em uma subpasta.
3. Adicione os links de manifesto, favicon e Apple touch ao head do HTML. Use HTTPS ou localhost. Nas ferramentas do navegador, confira o manifesto e se cada URL retorna uma imagem, não uma página HTML de fallback.

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Estes ícones não são preparados como imagens maskable. O ZIP não adiciona service worker nem suporte offline; apenas ícones não garantem instalação. Teste o navegador e dispositivo de destino.

Gerador de Favicon e Ícones PWA

Exporte ícones e imagens promocionais para Chrome

Envie uma imagem e selecione Chrome para baixar PNGs e imagens retangulares. Os tiles centralizam a imagem sobre branco; termine o design antes de enviar à loja.

• Ícones de extensão: PNGs de 16, 32, 48 e 128 px e um arquivo inicial de Manifest V3.
• Ícone da loja (128x128): PNG separado para a página do Chrome Web Store.
• Tile pequeno (440x280): PNG opaco para o espaço promocional pequeno.
• Marquee (1400x560): Imagem promocional grande opcional, distinta de uma captura de tela.
• Capturas: Capture a extensão separadamente em 1280x800 ou 640x400. Esta ferramenta não captura telas nem adiciona molduras.

Gerador de ícones e imagens para extensões Chrome

Referências oficiais

• Web App Manifest
• Chrome Web Store