Como funcionam os formatos de favicon
Entender como cada formato funciona ajuda a diagnosticar o inevitável "meu favicon não aparece".
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
O contêiner .ico
Um arquivo .ico é um header seguido de uma ou mais entradas de imagem. Cada entrada pode ser BMP ou PNG, e possui largura, altura e profundidade de bits.
Navegadores leem o diretório, escolhem a entrada que corresponde ao tamanho solicitado e decodificam apenas essa.
PNG dentro de .ico
Para tamanhos a partir de 64×64, a compressão PNG reduz o peso em 5–10× sem perda visual. Geradores modernos (incluindo o nosso) fazem isso automaticamente.
Favicons SVG
Um favicon SVG é um arquivo SVG normal. Os navegadores o renderizam como qualquer outro SVG, e o bloco <style> pode adaptar cores com base em prefers-color-scheme.
Como os navegadores escolhem
Se você publicar múltiplas tags <link rel="icon">, os navegadores escolherão a que melhor corresponde à superfície (aba vs favorito vs instalação). SVG é preferido quando suportado; .ico é o fallback.
Perguntas frequentes
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.