Como usar
- Envie o logo ou crie um ícone com uma letra ou emoji.
- Ajuste o fundo e a margem olhando a prévia em vários tamanhos.
- Baixe o .zip, coloque os arquivos na raiz do site e cole o código no <head>.
O que vem no .zip
favicon.icocom 16, 32 e 48 px — o ícone da aba e dos favoritos, inclusive em navegadores antigos.favicon-32x32.pngefavicon-16x16.png.apple-touch-icon.png(180 px) — quando alguém adiciona o site à tela de início do iPhone. Sempre com fundo, porque o iOS troca a transparência por preto.android-chrome-192x192.pnge512x512, mais osite.webmanifestpara o Android e apps instaláveis.
Dicas para um favicon legível
Em 16 px cabem poucos detalhes: use o símbolo do logo, não o logo inteiro com texto. Contraste forte e formas simples funcionam melhor. Confira na prévia da aba como ele aparece de verdade.
O ícone não atualizou? Navegadores guardam o favicon em cache por muito tempo: abra o site numa janela anônima para conferir. Logo em SVG? Veja também o conversor de SVG para PNG.
Perguntas frequentes
Preciso de todos os arquivos?
O mínimo é o favicon.ico. Os demais melhoram a aparência no celular e ao instalar o site como app.
Onde coloco os arquivos?
Na pasta raiz do site (a mesma do index.html), para que fiquem em endereços como seusite.com/favicon.ico.