Favicon em 2023: Seis arquivos que atendem à maioria das necessidades

É hora de repensar como criamos um conjunto de favicons para navegadores modernos e parar a loucura do gerador de ícones. Atualmente, os desenvolvedores de front-end precisam lidar com mais de 20 arquivos PNG estáticos apenas para exibir um pequeno logotipo de site em uma guia do navegador ou em uma tela sensível ao toque. Continue lendo para ver como adotar uma abordagem mais inteligente e adotar um conjunto mínimo de ícones que atenda às necessidades mais modernas.

O tópico dos favicons provou ser mais exaustivo do que qualquer um jamais poderia desejar, então também resumi todo o artigo em apenas dois trechos de código para aqueles que já sofreram o suficiente e sabem exatamente o que fazer. Ainda assim, eu recomendo explorar o resto!

A versão extremamente curta

Em vez de servir dezenas de ícones, tudo o que você precisa é de apenas cinco ícones e um arquivo JSON.

Para o navegador que usa HTML:

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

E no manifesto do seu aplicativo da web:

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

É isso. Se você quer saber como cheguei aqui, os compromissos que tive que fazer e como construir um conjunto como este do zero passo a passo, fique ligado no restante do artigo.

A versão longa, onde tudo é explicado

A perfeição é alcançada, não quando não há mais nada a acrescentar, mas quando não há mais nada para tirar.

---

Antoine de Saint-Exupéry

Odisséia do aviador

O conceito de favicon, que é a abreviação de “ícone favorito”, existe desde o início dos anos 2000. Todos nós já vimos aquelas imagens fofas na barra de guias do navegador que nos ajudam a diferenciar nossos sites abertos. Os usuários esperam que seu site tenha um favicon. É uma daquelas pequenas coisas que fazem as outras pessoas te levarem a sério.

Até a Apple, que sempre teve algum tipo de problema estético com ícones que não vêm de Cupertino, minimizando os favicons no Safari por anos, finalmente desistiu e agora os exibe adequadamente em todos os seus dispositivos.

Se você tem um site voltado para o público, ele precisa ter um favicon. Infelizmente, o que os usuários percebem como um ícone é, na verdade, muitos deles.

Assim, é comum descarregar a cansativa tarefa de gerar esses arquivos necessários para uma lista cada vez maior de telas e dispositivos para ferramentas geradoras de favicon. Ninguém em sã consciência jamais iria querer passar horas criando-os à mão. Afinal, estamos aqui para criar sites, não para agradar os fornecedores de navegadores.

Como criador do NanoID e defensor do código aberto minimalista, tendo a pensar em uma direção um pouco diferente. Qual é o conjunto mais eficiente de ícones de sites? Quais formatos estão desatualizados? Quais tipos de ícones podem ser substituídos por pequenos compromissos?

Assim, decidi criar uma lista mínima de favicons que funcionarão em todos os casos e em todos os navegadores – exceto alguns casos extremos – e, mesmo assim, isso ainda funcionará, mas não 100% perfeitamente.

A melhor configuração de favicon

Em vez de criar muitas imagens com tamanhos diferentes, decidi confiar no SVG e no downscaling do navegador. Se você está preocupado com o desempenho, estou aqui para esclarecer as coisas:

• Os navegadores baixam favicons em segundo plano, portanto, uma imagem de favicon maior não afeta o desempenho do site.
• O SVG é uma ótima maneira de reduzir o tamanho da imagem para imagens que não deveriam ser bitmaps em primeiro lugar; para muitos logotipos , o arquivo resultante será muito menor que um PNG.
• Com apenas três imagens PNG neste conjunto mínimo, você pode usar ferramentas avançadas para otimizar seu tamanho. Isso resolve um problema para usuários de Internet que não possuem planos de dados ilimitados.

Agora vou revelar o conjunto mínimo de ícones que criei durante minha pesquisa e prática. Esta lista deve funcionar com todos os navegadores e dispositivos populares, antigos e novos.

I. favicon.ico para navegadores legados

Na verdade, os arquivos ICO têm uma estrutura de diretório e podem compactar arquivos com diferentes resoluções. Eu recomendo manter uma única imagem 32×32, a menos que a que você tem não reduza bem para 16×16 (se ficar embaçada, por exemplo). Nesse caso, você pode pedir ao seu designer para criar uma versão especial do logotipo que seja adaptada para caber em pequenas grades de pixels.

Não fique esperto com a estrutura da pasta de ativos estáticos da pasta e os bloqueadores de cache. https://example.como site deve ter um favicon em https://example.com/favicon.ico. Algumas ferramentas, como leitores de RSS, apenas solicitam /favicon.icodo servidor e não se preocupam em procurar em outro lugar.

Precisamos arquivar para corrigir o sizes="any"bug <link>do Chrome em que ele escolhe um arquivo ICO em vez de um SVG..ico

II. Um único ícone SVG com uma versão clara/escura para navegadores modernos

SVG é um formato vetorial que descreve curvas em vez de pixels. Em tamanhos grandes, é mais eficiente do que imagens raster. No momento em que este livro foi escrito, 72% de todos os navegadores suportam ícones SVG.

Sua página HTML deve ter uma <link>tag <head>com rel="icon"e type="image/svg+xml"contendo hrefum link para o arquivo SVG como atributos.

SVG é um formato XML e pode conter uma <style>tag para descrever CSS. Assim como qualquer CSS, ele pode conter consultas de mídia como arquivos @media (prefers-color-scheme: dark). Isso permitirá que você alterne o mesmo ícone entre temas de sistema claros e escuros.

III. Imagem PNG de 180 × 180 para dispositivos Apple

O ícone de toque da Apple é uma imagem que os dispositivos da Apple usarão se você adicionar a página da Web como um atalho para a tela inicial em um iPhone ou iPad. Sua página HTML deve ter uma <link rel="apple-touch-icon" href="apple-touch-icon.png">tag dentro dela <head>.

Desde o iOS 8+, os iPads exigem uma imagem com resolução de 180 × 180. Outros dispositivos o reduzirão, mas se fornecermos à fonte uma qualidade alta o suficiente, o downscaling não prejudicará o usuário final (voltarei a isso mais tarde).

Nota pequena: um ícone de toque da Apple ficará melhor se você colocar 20pxpreenchimento ao redor do ícone e adicionar alguma cor de fundo. Você pode usar qualquer editor de imagem para fazer isso.

4. Manifesto de aplicativo da Web com ícones PNG de 192 × 192 e 512 × 512 para dispositivos Android

• Um manifesto de aplicativo da web é um arquivo JSON contendo todos os detalhes para um navegador instalar seu site como um aplicativo do sistema. Esse formato surgiu do Google por meio de sua iniciativa PWA.
• Sua página HTML deve ter uma <link rel="manifest" href="path.webmanifest">tag com um link para o arquivo de manifesto.
• O manifesto deve ter um iconcampo vinculado a dois ícones: 192 × 192, para exibição na tela inicial, e 512 × 512, que será usado como tela inicial durante o carregamento do PWA.

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

Esquecemos de alguém?

Existem, é claro, mais sabores de favicon por aí, alguns deles bastante obscuros, então vamos ver como nossa configuração se sai com eles. Talvez seja hora de dizer adeus a alguns dos formatos menos bem-sucedidos por aí.

Ícone de Bloco do Windows

O Microsoft Edge costumava oferecer suporte a um formato de ícone especial para fixar sites no menu Iniciar. Para versões recentes do Windows, isso não é mais necessário.

Ícone Fixado do Safari

O Safari anteriormente tinha um requisito de ícone monocromático SVG para guias fixadas. No entanto, desde o Safari 12, podemos usar um favicon regular para guias fixadas. Mesmo apple.com não usa mask-iconmais.

rel=“atalho”

Muitos tutoriais (agora desatualizados) incluirão um favicon.icoem HTML como este:

<link rel="shortcut icon" href="/favicon.ico" sizes="any">

Esteja avisado que shortcutnão é, e nunca foi, uma relação de link válida.

Tabela Yandex

O Yandex Browser é um navegador baseado em Chromium do maior mecanismo de pesquisa russo. Na Rússia, detém 20% do mercado. Ele tem um recurso interessante que permite que um site exiba dados ao vivo em widgets em uma tela inicial por meio de um manifesto JSON especial fornecido pelo yandex-tableau-widgetlink. No entanto, esse recurso provou não ser muito popular e o Yandex agora removeu a documentação técnica correspondente de seu site. Manifestos de ícones regulares também funcionarão.

Costa da Ópera

No passado, o Opera Coast, um navegador experimental para iOS, exigia um ícone especial de 228×228. Este navegador saiu da App Store em 2017 e duvido que tenha sobrevivido às várias atualizações do iOS desde então.

Agora, enquanto nos despedimos de nossos camaradas caídos, vamos ver como produzir um favicon definitivo para aqueles que ainda estão de pé.

Como construir nosso Ultimate Favicon Set

Veja como construir nosso favicon definitivo e minimalista definido em seis etapas rápidas. Tudo o que você precisa para começar é um arquivo SVG para o logotipo que deseja usar.

Etapa 1: preparar o SVG

Certifique-se de que a imagem SVG seja quadrada . Abra o arquivo de origem no visualizador do sistema e verifique a largura e a altura da imagem. É fácil ajustar o tamanho do SVG usando qualquer editor de SVG. No Inkscape, você pode alterar o tamanho do documento selecionando Arquivo → Propriedades do documento e centralizar o logotipo usando Objeto → Alinhar e distribuir.

Como usar cores P3 com SVGs

Salve seu arquivo como icon.svg. Agora vamos mexer no nosso SVG e fazê-lo funcionar bem com os temas modernos do sistema . Pergunte ao seu designer como as cores devem ser invertidas para um tema escuro (para logotipos em preto e branco, basta alterar o preto para o branco).

Agora, abra seu arquivo SVG em um editor de texto . Encontre um <path>com um escuro ou ausente fill. Adicione uma consulta de mídia CSS que acionará as alterações de tema e mudará fillpara as cores desejadas:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+   <style>
+     @media (prefers-color-scheme: dark) {
+     .a { fill: #f0f0f0 }
+     }
+   </style>
-   <path fill="#0f0f0f" d="…" />
+   <path class="a" fill="#0f0f0f" d="…" />
  </svg>

Você também pode usar esta técnica de consulta de mídia com SVGs para adicionar cores P3 de ampla gama aos seus favicons.

Etapa 2: criar um arquivo ICO

Abra seu icon.svgarquivo em um editor de gráficos raster. Eu recomendo o GIMP; é gratuito e multiplataforma.

Aceite a renderização de SVG para raster. Defina a largura e a altura como 32 pixels. Exportar arquivo para favicon.icousar 32 bpp, alfa de 8 bits, sem configurações de paleta.

Se você não possui o GIMP, pode instalar o Inkscape e o ImageMagick e converter SVG para ICO no terminal:

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png

Reduza a imagem para 16×16 e verifique a visibilidade do ícone. Se ficou muito embaçado, seria melhor pedir ao seu designer uma pequena versão personalizada do logotipo.

Para incluir uma versão 16×16 separada de um ícone:

1. Abra favicon.icocom o ícone 32×32.
2. Crie uma nova camada com tamanho 16×16.
3. Coloque a versão 16×16 de um ícone nesta camada.
4. Exporte o arquivo. O GIMP salvará cada layout como uma versão separada do ícone.

Ou você pode fazer o mesmo no ImageMagick:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Etapa 3: criar imagens PNG

Abra seu arquivo SVG de origem em um editor de gráficos raster novamente e crie uma imagem de 512 × 512. Exporte-o como icon-512.png.
Dimensione a imagem para 192×192 e exporte-a para icon-192.png. Agora dimensione a própria imagem para 140 × 140 e defina a tela para 180 × 180 e, em seguida, exporte-a como apple-touch-icon.png.

Ou você pode fazer o mesmo no Inkscape:

inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"

Etapa 4: otimizar arquivos PNG e SVG

A melhor ferramenta para otimizar SVGs é SVGO. Para usá-lo, execute:

npx svgo --multipass icon.svg

Squoosh é um ótimo aplicativo da web para otimizar imagens raster:

1. Abra o seu icon-512.pngno Squoosh.
2. Altere a configuração Compactar para OxiPNG.
3. Habilite “Reduzir paleta”.
4. Conjunto de 64 cores.
5. Compare o antes/depois movendo o controle deslizante. Se notar alguma diferença, aumente o número de cores.
6. Salve o arquivo.

Repita essas etapas para icon-192.pnge apple-touch-icon.png.

Etapa 5: adicionar os ícones ao HTML

Você precisa adicionar links de favicon.icoe para apple-touch-icon.pngem seu HTML.

Para HTML estático:

  <title>My website</title>
+ <link rel="icon" href="/favicon.ico" sizes="any">
+ <link rel="icon" href="/icon.svg" type="image/svg+xml">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">

No entanto, recomendamos usar um bundler para gerar cache busters (inclua o hash do arquivo no nome como uma impressão digital). Se você estiver usando o Webpack com HtmlWebpackPlugin:

1. Crie um index.htmlmodelo.
2. Adicione o modelo às opções do plugin:new HtmlWebpackPlugin({ template: "./view/index.html" });
3. Defina um modelo HTML com links (os exemplos são usados HtmlWebpackPlugin​​para incluir arquivos, mas pode ser sua linguagem de modelo preferida):<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" > </head> <body></body> </html>
4. Use copy-webpack-plugin para copiar favicon.ico sem adicionar um hash ao nome do arquivo.

Dica bônus: crie um ícone separado para teste

Os favicons são uma boa maneira de distinguir seu ambiente de produção de um de teste. Acho que usar um ícone alternativo para encenação é super eficaz para evitar qualquer caso caro de confusão.

Crie um favicon-dev.icocom o mesmo logotipo, mas inverta as cores (ou faça algo que faça sentido para você). Faça o mesmo para SVG e crie icon-dev.svg.

Agora, substitua os ícones em seu modelo HTML dependendo da process.env.NODE_ENV === 'production'condição:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>My website</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
-     <link rel="icon" href="/favicon.ico" sizes="any">
+     <link rel="icon" sizes="any" href="<%=
+       process.env.NODE_ENV === 'production'
+         ? '/favicon.ico'
+         : require('./favicon-dev.ico').default
+     %>">
      <link rel="icon" type="image/svg+xml" href="<%=
-       require('./icon.svg').default
+       process.env.NODE_ENV === 'production'
+         ? require('./icon.svg').default
+         : require('./icon-dev.svg').default
      %>">
      <link rel="apple-touch-icon" href="<%=
        require('./apple-touch-icon.png').default
      %>">
    </head>
    <body></body>
  </html>

Etapa 6: criar um manifesto de aplicativo da Web

Para HTML estático, crie um arquivo JSON chamado manifest.webmanifest:

{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Vincule-o em seu HTML:

  <title>My website</title>
+ <link rel="manifest" href="/manifest.webmanifest">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Com o Webpack, você pode usar o plugin webpack-pwa-manifest :

  plugins: [
    …,
    new WebpackPwaManifest({
      name: 'My website',
      icons: [
        { src: resolve('./icon-192.png'), sizes: '192x192' },
        { src: resolve('./icon-512.png'), sizes: '512x512 }
      ]
    })
  ]

Obrigado por ler! Como você pode ver, com os padrões modernos da web, a tarefa de criar nosso Ultimate Favicon Set torna-se bastante direta.