O que é um Favicon? Guia Completo
Um favicon é o pequeno ícone quadrado que o navegador exibe para o seu site: na aba, ao lado de um favorito, no histórico e na tela inicial do celular. É um arquivo de imagem real servido a partir do seu domínio e referenciado no head da página, geralmente fornecido em vários tamanhos para que cada superfície possa escolher o que precisa.
Onde um favicon realmente aparece
A aba do navegador é a mais óbvia, mas é a menos exigente. Barras de favoritos, listas de histórico, páginas iniciais do navegador, resultados de busca, prévias de links em apps de mensagem e telas iniciais de celular todos recorrem a um ícone, e vários deles querem um arquivo bem maior do que a aba.
É por isso que um favicon é, na verdade, um conjunto em vez de um único arquivo. Um ícone de aba de 16 pixels e um ícone de tela inicial do iOS de 180 pixels são imagens diferentes com restrições de design diferentes, mesmo quando vêm da mesma marca.
A mesma marca nos tamanhos que importam
Perguntas frequentes sobre favicon
Um favicon é obrigatório?
Nenhum padrão exige um, mas os navegadores vão solicitar /favicon.ico de qualquer forma, e um ícone ausente aparece como um espaço em branco ou um marcador genérico. Em um produto novo, isso passa a impressão de algo inacabado.
Qual é a diferença entre um favicon e um ícone de app?
Um favicon identifica o seu site dentro de um navegador; um ícone de app representa um app instalado em uma tela inicial ou launcher. Na prática, ambos vêm da mesma arte e são entregues juntos, e é por isso que os geradores exportam os dois.