Docs executáveis de HTML: Favicon

Q: Como colocar um favicon no HTML?

Coloque o arquivo do ícone no seu site e adicione (ou o caminho de um PNG ou SVG) dentro do . Os navegadores passam a mostrá-lo na aba, nos favoritos e no histórico.

Q: Qual deve ser o tamanho de um favicon?

Publique um favicon.ico de 32×32 (ou PNG) para as abas, um SVG que escala para qualquer tamanho e um PNG apple-touch-icon de 180×180 para a tela inicial do iPhone. Web apps com manifest também listam PNGs de 192×192 e 512×512.

Q: Por que meu favicon não aparece?

As causas comuns são um caminho errado no href, o fora do ou o navegador ainda mostrando um ícone antigo em cache. Abra a URL do ícone direto para conferir o caminho, depois recarregue limpando o cache ou adicione uma versão como ?v=2 à URL.

Q: Posso usar SVG ou PNG como favicon?

Sim. Use ou . SVG funciona no Chrome, no Edge e no Firefox; mantenha também um ICO ou PNG para os navegadores sem suporte.

Q: Preciso de rel="shortcut icon"?

Não. rel="icon" é o valor padrão. A palavra shortcut é uma sobra do antigo Internet Explorer e não faz nada nos navegadores atuais.

Como colocar um favicon

Salve o seu ícone no site e aponte para ele com uma tag <link rel="icon"> no <head>:

<link rel="icon" href="/favicon.ico">

Essa é a resposta completa para um site básico. O href pode apontar para um arquivo .ico, .png ou .svg. O exemplo abaixo usa um SVG escrito direto no href como data URI, então não precisa de arquivo separado. Uma prévia dentro de outra página não consegue mudar a aba do seu navegador, então o script desenha o mesmo ícone numa aba simulada e em três tamanhos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

Em 16 pixels só cabe uma letra em negrito ou uma forma simples, e os detalhes finos somem. Desenhe o ícone pensando primeiro no menor tamanho. Troque fill='%232563eb' por outra cor (%23 é o # codificado para URL) e todas as cópias são atualizadas.

Quais arquivos publicar

Navegadores, celulares e launchers de apps procuram ícones diferentes. Um conjunto pequeno cobre todos:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Arquivo	Tamanho	Usado para
`favicon.ico`	32×32	Abas do navegador, e ferramentas que só procuram `/favicon.ico`
`icon.svg`	Qualquer (vetor)	Abas nítidas em qualquer densidade de tela, no Chrome, Edge e Firefox
`apple-touch-icon.png`	180×180	O ícone quando alguém adiciona o seu site à tela inicial de um iPhone ou iPad
Ícones do manifest	PNG de 192×192 e 512×512	Tela inicial do Android e web apps instalados

A maioria dos navegadores também pede /favicon.ico na raiz do site por conta própria quando uma página não tem link de ícone, então colocar um favicon.ico ali é um padrão útil. O atributo sizes diz ao navegador o tamanho de cada arquivo, para que ele escolha o mais adequado. Use rel="icon"; o antigo rel="shortcut icon" só funciona porque os navegadores ignoram a palavra a mais.

Um favicon com emoji

Para um protótipo ou uma página pessoal, um emoji vira um favicon rápido. Coloque-o dentro de um elemento <text> de SVG:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA é o emoji de cookie, codificado para URL. O emoji é desenhado pela fonte de emojis do sistema operacional, então fica diferente no Windows, no macOS e no Android, e para um produto de verdade um ícone desenhado é a escolha melhor.

Um ícone que acompanha o modo escuro

Um favicon SVG pode levar o seu próprio CSS, inclusive uma media query prefers-color-scheme, então um ícone escuro pode ficar claro quando o navegador usa um tema escuro:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Trocando o favicon com JavaScript

Sites usam um favicon que muda para mostrar um ponto de notificação ou uma cor de status. Desenhe o novo ícone num <canvas> e defina o href do link com a imagem do canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Numa página real no Chrome ou no Firefox, o ícone da aba muda a cada vez que o href é definido, no mesmo momento em que a imagem da prévia muda aqui.

Erros comuns

Um caminho errado. href="favicon.ico" é relativo à página atual, então quebra em /blog/post. Use um caminho a partir da raiz: href="/favicon.ico".
Esperar que uma atualização apareça na hora. Os navegadores guardam favicons em cache com força. Recarregue limpando o cache, ou mude a URL (/favicon.ico?v=2) quando trocar o ícone.
Um logo cheio de detalhes reduzido a 16 pixels. Simplifique: uma letra ou uma forma com contraste forte.
Só um SVG. Mantenha também um ICO ou PNG para navegadores sem suporte a favicon SVG, e adicione o apple-touch-icon para o iOS.
Colocar o link no <body>. Mantenha-o no <head>, junto com a tag title e os outros metadados.

Perguntas frequentes

Como colocar um favicon no HTML?

Coloque o arquivo do ícone no seu site e adicione <link rel="icon" href="/favicon.ico"> (ou o caminho de um PNG ou SVG) dentro do <head>. Os navegadores passam a mostrá-lo na aba, nos favoritos e no histórico.

Qual deve ser o tamanho de um favicon?

Publique um favicon.ico de 32×32 (ou PNG) para as abas, um SVG que escala para qualquer tamanho e um PNG apple-touch-icon de 180×180 para a tela inicial do iPhone. Web apps com manifest também listam PNGs de 192×192 e 512×512.

Por que meu favicon não aparece?

As causas comuns são um caminho errado no href, o <link> fora do <head> ou o navegador ainda mostrando um ícone antigo em cache. Abra a URL do ícone direto para conferir o caminho, depois recarregue limpando o cache ou adicione uma versão como ?v=2 à URL.

Posso usar SVG ou PNG como favicon?

Sim. Use <link rel="icon" href="/icon.svg" type="image/svg+xml"> ou <link rel="icon" href="/icon.png" type="image/png">. SVG funciona no Chrome, no Edge e no Firefox; mantenha também um ICO ou PNG para os navegadores sem suporte.

Preciso de rel="shortcut icon"?

Não. rel="icon" é o valor padrão. A palavra shortcut é uma sobra do antigo Internet Explorer e não faz nada nos navegadores atuais.

Posso usar um emoji como favicon?

Sim, envolvendo-o num SVG: uma data URI SVG com um elemento <text> contendo o emoji. É prático para protótipos, mas o emoji fica diferente em cada sistema operacional.

Conceitos relacionados