Como adicionar um favicon em HTML
Adicionar um favicon a uma página HTML é uma alteração de uma linha — mas o setup moderno completo usa seis linhas e cobre iOS, Android, modo escuro e PWA.
A tag que todo navegador respeita é <link rel="icon" href="/favicon.ico">. Coloque favicon.ico na raiz do site e você já tem 80 % do caminho feito.
Os 20 % restantes — apple-touch-icon, variantes PNG, SVG com suporte a modo escuro e webmanifest — separam um ícone genérico de uma experiência de marca polida.
Como funciona
- 1
Gere seu pacote de favicon
Use o gerador FetchFavicon — ele produz todos os arquivos e a marcação pronta para colar.
- 2
Coloque os arquivos na raiz do site
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Cole o snippet no <head>
Seis tags <link> + um <meta name="theme-color">.
Experimente agora
Obter o snippet HTML
Gerador de FaviconPerguntas frequentes
Onde ficam as tags <link>?+
Dentro de <head>, em qualquer posição — a ordem não importa desde que venham antes do </head>.
Preciso de .ico e PNG?+
Sim. O .ico é o fallback universal; o PNG renderiza com mais nitidez em telas de alta DPI.
E o modo escuro?+
Publique uma variante SVG com uma media query prefers-color-scheme no bloco <style>.