Como funcionam os formatos de favicon

Entender como cada formato funciona ajuda a diagnosticar o inevitável "meu favicon não aparece".

6 min de leitura

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.

Experimente as ferramentas

Continuar lendo

Explorar FetchFavicon

Categorias

Conversores

Utilitários

Guias

Tutoriais