Como funciona
A imagem ou as letras são desenhadas em um canvas em todos os tamanhos que navegadores e celulares pedem e salvas como arquivos PNG. As versões de 16, 32 e 48 px são reunidas em um único favicon.ico. Tudo é feito no seu navegador e nada é enviado.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
Para que serve cada arquivo
- favicon.ico: o clássico ícone da aba do navegador. Todos os navegadores e o Windows ainda o procuram na raiz do site.
- apple-touch-icon.png: o ícone que o iPhone e o iPad usam quando alguém adiciona seu site à tela inicial. Ele sempre tem fundo sólido.
- icon-192.png, icon-512.png: o Android e os apps web instaláveis (PWA) usam estes ícones a partir do manifesto.
- site.webmanifest: um pequeno arquivo JSON com o nome do site, as cores e a lista de ícones.
Dicas
- Coloque todos os arquivos na pasta raiz do site, ao lado do index.html, e cole o código no head de todas as páginas.
- Formas simples e marcantes ficam mais legíveis em 16 px; textos pequenos e linhas finas somem.
- Os navegadores guardam o favicon em cache com muita insistência. Abra a URL do ícone diretamente ou use uma janela anônima para ver a mudança.
- A tag theme-color pinta a barra do navegador no Android com a sua cor de fundo.
Padrões e fontes
- HTML Standard — link rel="icon" · WHATWG
- Manifesto de aplicativo web (Web Application Manifest) · W3C
- Configurar aplicativos web (apple-touch-icon) · Apple Developer
Última revisão 15 de outubro de 2026
Perguntas frequentes
De quais tamanhos de favicon eu preciso?
Um favicon.ico com 16, 32 e 48 px, um apple-touch-icon de 180 px e ícones de 192 e 512 px para Android cobrem os navegadores e celulares atuais.
Meu logotipo é enviado?
Não. Os ícones são desenhados e reunidos no seu navegador.
Posso usar um SVG?
Sim. SVG, PNG, JPG, WebP e GIF são aceitos; uma imagem quadrada de 512 px ou mais dá o resultado mais nítido.
Por que o ícone da Apple não é transparente?
O iOS preenche as áreas transparentes com preto, então o ícone de 180 px sempre usa a sua cor de fundo.
Meu novo favicon não aparece.
Os navegadores guardam o favicon em cache por muito tempo. Abra o endereço do ícone diretamente, limpe o cache ou tente uma janela anônima.