Glossário de favicons

Um favicon é o pequeno ícone que o navegador exibe para o seu site nas abas, favoritos e histórico. O que é, os tamanhos e formatos necessários e como adicionar um.

Um ícone de app representa um app instalado em uma tela inicial ou launcher, não um site em uma aba do navegador. De onde cada plataforma o lê e o que entregar.

Um favicon é o pequeno ícone da aba; uma imagem Open Graph é a prévia grande quando o seu link é compartilhado. Arquivos diferentes para trabalhos diferentes: veja qual é qual.

Um logotipo é a sua marca completa; um favicon é uma pequena derivação que precisa ser legível a 16 pixels. Por que você não pode só encolher o logotipo, e como derivar um que funciona.

Fazer um favicon à mão significa exportar cada tamanho e escrever as tags você mesmo; um gerador faz ambos em segundos. Quando fazer à mão serve e quando não.

Guia completo dos tamanhos de favicon. Todas as dimensões para navegadores, iOS, Android e PWA, quais são essenciais e onde cada arquivo vai.

A tag <link rel="icon"> informa ao navegador onde está o seu favicon. O que rel, href, type e sizes fazem, onde a tag vai e o conjunto moderno que vale a pena entregar.

"shortcut icon" é um valor de rel legado para favicons. Por que a palavra-chave "shortcut" é redundante, se você ainda precisa dela e o que escrever no lugar.

Os navegadores fazem cache de favicons de forma mais intensa e por mais tempo do que a maioria dos assets, e separadamente da página. Por que são tão persistentes e como forçar a atualização de um favicon.

Um favicon pode responder à configuração clara ou escura do SO: um SVG com uma media query dentro, ou dois PNGs trocados via prefers-color-scheme na tag de link.

O Google mostra um favicon ao lado do seu resultado, principalmente no celular. O tamanho e formato que ele precisa, como encontra o ícone e por que o seu pode não aparecer.

Navegadores e crawlers solicitam /favicon.ico da raiz do seu domínio quer você o referencie ou não. Por que o arquivo pertence à raiz, e como os frameworks mudam onde você o coloca.

O BIMI mostra o logotipo da sua marca ao lado dos e-mails em caixas de entrada compatíveis: o favicon do e-mail. O que ele precisa: um logotipo SVG Tiny PS, imposição de DMARC e, muitas vezes, um certificado.

Favicons são renderizados em espaços quadrados, então uma imagem não quadrada fica com bordas ou é esticada. Por que o quadrado é praticamente obrigatório, e como lidar com um logotipo largo.

Favicons são minúsculos: um favicon.ico costuma ter poucos kilobytes e os tamanhos PNG bem abaixo de 100KB. O que determina o tamanho, e por que um favicon superdimensionado é um sinal de alerta.

ICO vs PNG favicon comparados: profundidade de cor, transparência, tamanho do arquivo e suporte de navegadores, além das tags do head para entregar ambos sem conflitos.

Um favicon SVG é um arquivo vetorial que permanece nítido em qualquer tamanho e pode reagir ao modo escuro. Suporte dos navegadores, a tag de link e os fallbacks a manter.

favicon.ico é o ícone que os navegadores solicitam da raiz do seu site quando nenhum ícone é declarado. O que há dentro do arquivo, onde colocá-lo e por que mantê-lo.

Você pode embutir um favicon como um data URI base64 em vez de um arquivo separado. Quando isso poupa uma requisição, e as superfícies onde ele silenciosamente quebra.

Alguns navegadores animam um favicon GIF na aba. Quais dão suporte, por que os sites usam JavaScript para status ao vivo, e quando mantê-lo estático.

Favicons WebP funcionam na maioria dos navegadores modernos, mas não em todos, e nunca para /favicon.ico. Quando um ícone WebP serve e por que PNG e ICO continuam a escolha segura.

Favicons transparentes ficam limpos em uma aba, mas quebram nas telas iniciais do iOS, que compõem sobre preto. Quando a transparência ajuda e quando usar um fundo sólido.

Você pode usar um emoji como favicon com um SVG inline de uma linha: útil para um marcador de posição rápido. Por que ele renderiza de forma diferente em cada SO, e quando exportar um arquivo real.

Ícones do manifest são as entradas do array icons de manifest.json. O que cada campo faz, os tamanhos a declarar e como os navegadores escolhem um.

Um ícone maskable preenche todo o quadrado para que as plataformas possam recortá-lo em qualquer formato. A zona de segurança de 80%, o campo purpose do manifest e como testá-lo.

O web app manifest é um arquivo JSON que informa aos navegadores como o seu site se comporta quando instalado: seu nome, ícones, cores e modo de exibição. O que contém e por quê.

Um PWA precisa de ícones específicos antes que um navegador ofereça a instalação: 192x192 e 512x512 no manifest, idealmente um maskable, além do apple-touch-icon para iOS.

A propriedade display do manifest decide como um PWA instalado aparece: browser, minimal-ui, standalone ou fullscreen. O que cada modo mostra e qual escolher.

Um manifest tem duas cores que fazem trabalhos diferentes: theme_color tinge a interface do SO ao redor do seu app, background_color pinta a tela de abertura. Além da meta theme-color.

O apple-touch-icon é o PNG que o iOS usa quando um site é adicionado à Tela de Início. O tamanho 180x180, a tag de link e por que a transparência vira preto.

A meta tag theme-color informa aos navegadores qual cor pintar na interface ao redor da sua página. Onde aparece, variantes de modo escuro e o equivalente no manifest.

Abas fixadas do Safari usam um SVG monocromático declarado com rel="mask-icon". Como o arquivo deve ser, o atributo color e se ainda importa.

A variante precomposed dizia ao iOS antigo para não adicionar seu brilho lustroso a um ícone da tela inicial. Se ela ainda faz algo, e o que usar hoje.

browserconfig.xml e as meta tags msapplication-* definiam blocos de site fixado para o Windows e o Edge legado. O que faziam e se você ainda precisa deles.

A meta tag apple-mobile-web-app-capable executa um web app de tela inicial em tela cheia no iOS. O que faz, a tag da barra de status e a alternativa moderna do manifest.

apple-touch-startup-image define a tela de lançamento de um web app adicionado à tela inicial do iOS. Por que ela precisa de uma imagem por tamanho de dispositivo e as media queries envolvidas.