Como Adicionar um Favicon ao Seu Website

Nov 23, 2025 · 4 min read

O seu website precisa de um favicon. Aquele pequeno ícone nas abas do navegador não é apenas decoração—é como os utilizadores identificam o seu site entre dezenas de abas abertas, como o Google exibe o seu site nos resultados de pesquisa e como o iOS guarda o seu site nos ecrãs iniciais. No entanto, a maioria dos guias sobre favicons está desatualizada, recomendando formatos legados e ficheiros desnecessários.

Este artigo aborda a configuração moderna e minimalista de favicon que funciona em todo o lado: favicon SVG para navegadores modernos, favicon PNG para fallbacks, Apple Touch Icon para dispositivos iOS e ícones de web manifest para Progressive Web Apps.

Pontos-Chave

A configuração moderna de favicon requer apenas um pequeno conjunto de ficheiros essenciais: um fallback ICO, um favicon SVG, um PNG de 32×32, um Apple Touch Icon e alguns ícones de web-manifest.
Os favicons SVG escalam perfeitamente e suportam modo escuro através de media queries CSS
O Safari e iOS agora suportam totalmente favicons SVG, pelo que podem servir como o ícone principal para navegadores modernos
O caching agressivo dos navegadores requer estratégias de versionamento ao atualizar favicons

A Stack Moderna de Favicon

Esqueça as dezenas de tamanhos de ícone de 2015. Aqui está o que realmente precisa:

Ícones Essenciais

favicon.ico (multi-tamanho, tipicamente 16×16 e 32×32) – Fallback legado
favicon.svg - Escalável para todos os navegadores modernos
icon-32.png - UI do navegador e resultados de pesquisa do Google
apple-touch-icon.png (180×180) - Ecrã inicial do iOS
icon-192.png e icon-512.png - Web manifest para PWAs

O Safari e iOS agora suportam totalmente favicons SVG. Alegações sobre falta de suporte SVG estão desatualizadas—todos os principais navegadores agora suportam favicons SVG de forma fiável.

Implementação HTML

Adicione estas quatro linhas ao seu <head>:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Nota: Ignore rel="shortcut icon"—está descontinuado desde 2003. Use apenas rel="icon".

Criar os Seus Ícones

Favicon SVG

Os favicons SVG escalam infinitamente e suportam funcionalidades como modo escuro:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Mantenha os favicons SVG simples. Gradientes complexos e efeitos não renderizam bem a 16×16 pixels.

Favicon PNG

O PNG de 32×32 serve dois propósitos críticos:

Fallback para navegadores que não suportam SVG
Exibição nos resultados de pesquisa do Google

Use uma ferramenta como RealFaviconGenerator ou Favicon.io para gerar versões PNG a partir do seu SVG.

Apple Touch Icon

O iOS requer um PNG de 180×180 com:

Sem transparência (use um fundo sólido)
Sem cantos arredondados (o iOS adiciona-os)
Alto contraste para visibilidade em vários wallpapers

Nomeie-o exatamente apple-touch-icon.png e coloque-o no seu diretório raiz. O iOS irá encontrá-lo automaticamente, mesmo sem a tag <link>, mas a ligação explícita garante fiabilidade.

Ícones de Web Manifest

Para Progressive Web Apps, crie um manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Estes ícones de web manifest permitem a funcionalidade “Adicionar ao Ecrã Inicial” no Android e instalação de PWA em desktop.

Suporte para Modo Escuro

Além da abordagem de media query SVG, pode trocar favicons com JavaScript:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Lidar com Cache

Os navegadores fazem cache de favicons de forma agressiva. Ao atualizar o seu ícone:

Versione o nome do ficheiro: Mude favicon.svg para favicon-v2.svg
Adicione uma query string: favicon.svg?v=2
Atualize todas as referências no seu HTML

Para testes imediatos, abra o seu site numa janela anónima/privada.

Problemas Comuns

Favicon não aparece?

Verifique o caminho—use caminhos absolutos (/favicon.svg) não relativos
Verifique os tipos MIME: SVG precisa de image/svg+xml
Teste em modo incógnito para contornar o cache

Desfocado em ecrãs retina?

Use SVG como o seu ícone principal
Garanta que as exportações PNG são exatamente 32×32 e 180×180

Ícone errado no iOS?

O iOS prioriza apple-touch-icon.png no diretório raiz
Limpe o cache do Safari: Definições → Safari → Limpar Histórico e Dados de Websites

Conclusão

A implementação moderna de favicon é mais simples do que os guias legados sugerem. Cinco ficheiros—ICO, SVG, PNG, Apple Touch Icon e ícones de web manifest—cobrem todos os navegadores, dispositivos e casos de uso. Ignore os conjuntos desatualizados de múltiplas dezenas de ícones e metadados de tiles do Windows, a menos que precise especificamente deles.

Foque-se num favicon SVG limpo como o seu ícone principal, adicione os fallbacks essenciais, e o seu site será exibido perfeitamente em todo o lado, desde abas de navegador até ecrãs iniciais do iOS.

FAQs

Embora os favicons SVG funcionem em todos os navegadores modernos, ainda precisa de fallbacks. Navegadores legados requerem ficheiros ICO, o iOS precisa de apple-touch-icon.png para atalhos no ecrã inicial, e os resultados de pesquisa do Google procuram especificamente por favicons PNG.

Alguns navegadores ajustam automaticamente as cores do favicon para visibilidade no modo escuro. Para controlar este comportamento, use media queries CSS no seu favicon SVG ou implemente troca de favicon baseada em JavaScript para uma aparência consistente.

As atualizações de favicon podem demorar horas a dias dependendo do caching do navegador. Force atualizações imediatas versionando nomes de ficheiros ou adicionando query strings. Os resultados de pesquisa do Google podem demorar várias semanas a refletir mudanças de favicon mesmo após re-crawling.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.