Como preparar um favicon em 2025

 (evilmartians.com)
50 pontos por xguru 2025-02-13 | 4 comentários | Compartilhar no WhatsApp
  • À medida que a forma de criar favicon ficou mais complexa, tornou-se comum usar mais de 20 arquivos PNG apenas para exibir o logo do site na aba do navegador ou na tela sensível ao toque
  • Como alternativa, é proposto um método que cobre a maioria dos ambientes com relativamente poucos arquivos de ícone e configuração mínima

Versão bem simples

  • Sem configuração complexa, bastam cinco ícones essenciais e um arquivo JSON

  • Exemplo de links básicos para inserir no HTML

    <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

  • Se você oferece suporte a PWA (Progressive Web App), adicione também o seguinte

    <link rel="manifest" href="/manifest.webmanifest">

  • Exemplo de estrutura do arquivo manifest.webmanifest

    {  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

  • Como ícones maskable podem ter parte das bordas cortadas, é recomendável deixar a área circular de 409×409 como zona segura

  • Só com essa configuração o favicon já funciona bem na maioria dos principais navegadores e dispositivos

Versão com explicação detalhada

  • Favicon vem de “favorite icon” e é o pequeno ícone exibido em abas do navegador e afins
  • O Safari também passou a oferecer suporte adequado a favicon recentemente
  • Em vez de criar conjuntos de ícones para várias resoluções, é possível lidar com isso de forma eficiente usando SVG, alguns ícones PNG e um manifest simples

A configuração definitiva de favicon

  • Com um arquivo SVG, alguns poucos arquivos PNG e um arquivo web manifest, é possível exibir ícones de forma consistente em vários navegadores e dispositivos
  • Como SVG é um formato vetorial, ele pode ser ampliado ou reduzido livremente conforme necessário, com baixo impacto de desempenho por ser baixado em segundo plano
  • Para PNG, prepare apenas os tamanhos realmente necessários, como o ícone da Apple (apple-touch-icon) e os ícones para PWA
  • Formatos antigos como ícone de bloco do Windows, Safari Pinned Icon e rel=“shortcut” deixaram de ser muito necessários nos navegadores recentes
  • Em navegadores ou ferramentas antigas, o ícone pode ser buscado diretamente no caminho /favicon.ico, então o favicon.ico na raiz continua sendo importante

Como montar o Ultimate Favicon Set

  • As etapas abaixo mostram o processo de criar e otimizar os ícones manualmente
  • Etapa 1: preparar o SVG
    • É necessário preparar um arquivo icon.svg mantendo proporção quadrada
    • Dentro de <svg>, é possível implementar troca de cores para modos claro e escuro usando media queries CSS
    • Como no exemplo, dá para definir cores do modo escuro com @media (prefers-color-scheme: dark)
  • Etapa 2: criar o arquivo ICO
    • Gere o favicon.ico convertendo icon.svg para imagem raster em 16×16 ou 32×32
    • Você pode usar ferramentas como GIMP ou Inkscape+ImageMagick
    • Tome cuidado para que o logo não fique borrado demais em resoluções pequenas
  • Etapa 3: criar as imagens PNG
    • Prepare ícones PNG nos tamanhos 512×512, 192×192, 180×180 e 512×512 (maskable)
    • Para o apple-touch-icon do iOS, trabalhe em 180×180 e considere adicionar cor de fundo ou uma margem adequada
    • O ícone maskable deve manter a área de 409×409 como zona segura
  • Etapa 4: otimizar PNG e SVG
    • Comprima o SVG com ferramentas como SVGO e aumente a taxa de compressão do PNG com Squoosh
    • Como o usuário pode estar em um ambiente com restrição de dados, reduzir ao máximo o tamanho dos arquivos é vantajoso
  • Etapa 5: conectar os ícones no HTML
    • Basicamente, conecte favicon.ico, icon.svg e apple-touch-icon.png na tag <head> 
      <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
    • Se você usa Webpack, por exemplo, também pode incluir hash no build para gerenciar cache
    • Você também pode usar favicons diferentes para distinguir ambiente de staging (desenvolvimento) e ambiente de produção
  • Etapa 6: criar o Web Manifest
    • Coloque as informações de ícones para PWA no arquivo manifest.webmanifest e conecte-o com <link rel="manifest" href="/manifest.webmanifest">
    • O exemplo abaixo define ícones 192×192, 512×512 (maskable) e 512×512 
      {  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}
    • Em ambientes com Webpack, é possível automatizar isso com plugins como webpack-pwa-manifest
  • Seguindo esse processo, mesmo com poucos arquivos é possível mostrar um favicon adequado na maioria dos navegadores e dispositivos
  • Fica ainda mais prático se você criar ferramentas de automação para operar isso

Leituras relacionadas

4 comentários

 
carnoxen 2025-02-15

O SVG Favicon ainda não é suportado no Firefox...
 
carnoxen 2025-02-15

Ah, era o Safari mesmo.
 
yeppyshiba 2025-02-13

Em um projeto que fiz na empresa anterior, implementei um webgame
por diversão, criei um favicon animado como easter egg
como implementei a animação com spritesheet, o resultado ficou bem convincente
 
xguru 2025-02-13

Resumo sobre favicons para 2021
Eu tinha postado isso uma vez há 4 anos, mas agora foi atualizado para os tempos atuais.