Uma favicon é uma pequena ícone que representa seu site em guias do navegador. Para Progressive Web Apps (PWA), você também precisa de um manifesto web e ícones maiores para telas iniciais móveis.
Instale os arquivos de favicon e ícones PWA
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.
Conecte os ícones ao site
- 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.
- 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.
- 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">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.
Ler o guia de integração Web, PWA e Chrome