Como criar um favicon
Um favicon moderno é muito mais que uma imagem de 16×16. Aqui está o fluxo completo para um resultado nítido em cada navegador, SO e dispositivo.
O que é um favicon?
Favicon é o pequeno ícone que o navegador exibe na aba, na barra de favoritos e no histórico. No celular, é o ícone da tela inicial. No Windows, é o ícone do atalho.
Sites modernos publicam múltiplas resoluções e formatos para que cada superfície receba uma renderização nítida.
Prepare sua imagem de origem
Comece com uma imagem quadrada de pelo menos 512×512 — preferencialmente um SVG com viewBox quadrado. Qualquer coisa menor ficará desfocada ao ser reduzida.
Evite linhas finas e textos pequenos. Eles desaparecem em 16×16.
Gere um .ico multirresolução
Inclua 16, 32, 48, 64, 128 e 256 dentro de um único favicon.ico. Os navegadores escolhem o tamanho correto automaticamente.
Nosso gerador de favicon faz isso localmente no navegador em menos de um segundo.
Adicione as tags HTML
Coloque favicon.ico na raiz do site. Depois, adicione os ícones SVG, apple-touch-icon e de manifest no <head> para uma configuração completa.
Verifique em todos os navegadores
Recarregue forçando (Ctrl+F5) no Chrome, Safari, Firefox e Edge. Confira a barra de favoritos, a aba e a instalação na tela inicial.