O que são ICO e favicon
Ao abrir qualquer site, aquele pequeno ícone na aba do navegador é o favicon. Normalmente é um arquivo .ico, mas também pode usar PNG. O favicon é a "face" do site; os usuários o reconhecem entre as várias abas para identificar rapidamente o seu site.
Por que o formato ICO é necessário
Embora os navegadores modernos suportem PNG como favicon, o formato ICO ainda tem vantagens insubstituíveis:
- Melhor compatibilidade: Navegadores antigos e atalhos da área de trabalho do Windows só reconhecem ICO
- Vários tamanhos em um único arquivo: Um arquivo ICO pode conter 16x16, 32x32, 48x48 e outros tamanhos; o sistema escolhe automaticamente
- Favoritos, ícones PWA: Alguns cenários ainda exigem ICO
Ferramenta de conversão de imagem para ICO do DocsAll
Use a ferramenta de imagem para ICO para gerar rapidamente:
- Prepare uma imagem de origem quadrada (recomenda-se PNG de 256x256 ou maior)
- Abra a ferramenta de conversão para ICO e faça upload da imagem de origem
- A ferramenta gera automaticamente um ICO com vários tamanhos
- Baixe o arquivo .ico
Método de configuração do favicon
Configuração básica
Coloque o favicon.ico no diretório raiz do site; o navegador o reconhecerá automaticamente. Você também pode declará-lo explicitamente no head do HTML com uma tag link, definindo o atributo rel como icon e o href apontando para favicon.ico.
Adaptação para vários dispositivos
Recomenda-se que sites modernos configurem vários tamanhos simultaneamente:
- favicon.ico: padrão, no diretório raiz
- apple-touch-icon.png (180x180): para "adicionar à tela de início" no iOS
- icon.png (192x192, 512x512): para PWA
Recomendações de design da imagem de origem
- Use PNG: Suporta fundo transparente; o ICO convertido a partir de PNG tem melhor resultado
- Quadrada: 16x16, 32x32 são os tamanhos de exibição; uma imagem de origem maior facilita o dimensionamento
- Simples: Em tamanhos pequenos, padrões complexos viram uma mancha; use formas simples e cores de marca
- Fundo transparente: Evite um quadrado branco; integre-se à aba do navegador
Perguntas frequentes
O favicon não atualiza
O cache do navegador é teimoso; se você mudou o favicon e ele não aparece, faça uma atualização forçada (Ctrl+F5) ou adicione um parâmetro de versão ao caminho, como favicon.ico?v=2.
O ícone está borrado
A imagem de origem é muito pequena ou não é quadrada e foi esticada. Regenere a partir de um PNG quadrado de 256x256 ou maior.
Um favicon claro deixa o site mais profissional. Com a ferramenta ICO você resolve em poucos minutos; não deixe a aba vazia.