Aguarde...

4 de janeiro de 2021

Como usar o favicon em 2021: Seis arquivos que atendem à maioria das necessidades

Como usar o favicon em 2021: Seis arquivos que atendem à maioria das necessidades

É hora de repensar como preparamos 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 ter uma abordagem mais inteligente e adotar um conjunto mínimo de ícones que se adequa à maioria das necessidades modernas.

Os favicons provaram ser um tópico mais exaustivo que qualquer um poderia desejar, então também resumi um artigo inteiro em apenas dois trechos de código para aqueles que sofreram o suficiente e sabem exatamente o que fazer. Ainda assim, eu recomendo dar uma olhada no resto!

Versão extremamente curta

Em vez de servir dezenas de ícones, você só precisa de cinco ícones e um arquivo JSON.

Em seu HTML, para o navegador:

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

E no manifesto do seu aplicativo da web:

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

É isso. Se você quer saber como cheguei a isso, que compromissos tive que assumir e como construir um conjunto como esse do zero de forma passo a passo, fique atento para o resto do artigo.

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 a tirar.”

—Antoine de Saint-Exupéry, Airman’s Odyssey

O conceito de favicon, abreviação de “ícone favorito”, existe desde o início dos anos 2000. Todos nós vemos aquelas pequenas imagens fofas na barra de guias do seu navegador que ajudam a diferenciar os sites abertos todos os dias. 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 problema estético com ícones que não vêm de Cupertino e minimizou favicons no Safari por anos, finalmente desistiu e agora os exibe corretamente em todos os seus dispositivos.

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

Portanto, é comum se livrar da árdua tarefa de gerar os arquivos necessários para a lista cada vez maior de telas e dispositivos para ferramentas geradoras de favicon. Nenhum ser humano em sã consciência gostaria de passar horas criando-os manualmente. Afinal, estamos aqui para construir sites, não para agradar os fornecedores de navegadores.

Um conjunto de favicons gerados por um gerador online popular
Um conjunto de favicons gerados por um gerador online popular

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

Então, eu me propus a criar uma lista mínima de favicons que funcionará em todos os casos e em todos os navegadores, exceto alguns casos extremos em que ainda funcionará, mas não 100% perfeitamente.

A configuração definitiva do favicon

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

  • os navegadores baixam favicons em segundo plano, portanto, uma imagem maior do favicon não afeta o desempenho do site;
  • 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 do que um PNG;
  • Com apenas três imagens PNG neste conjunto mínimo, você pode usar ferramentas avançadas para otimizar seu tamanho. Ele resolve um problema para os usuários da Internet que não têm planos de dados ilimitados.

Aí vem o conjunto mínimo de ícones que criei em minha pesquisa e prática. 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 de 32 × 32, a menos que a que você tenha não diminua bem para 16 × 16 (fica borrada, 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 de pasta de ativos estáticos e inibidores de cache. https://example.como site deve ter um favicon ativado  https://example.com/favicon.ico. Algumas ferramentas, como leitores de RSS, apenas solicitam /favicon.icodo servidor e não se preocupam em procurar outro lugar.

II. Um único ícone SVG com versão claro / escuro para navegadores modernos

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

Sua página HTML deve ter uma  <link>tag em seu <head>com rel="icon"type="image/svg+xml"e  hrefcom um link para arquivos SVG como atributos.

SVG é um formato XML e pode conter uma  <style>tag que descreve CSS. Como qualquer CSS, ele pode conter consultas de mídia como @media (prefers-color-scheme: dark). Isso permitirá que você alterne o mesmo ícone entre os temas do sistema claro e escuro .

III. Imagem 180 × 180 PNG 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 de um iPhone ou iPad. Sua página HTML deve ter uma <link rel="apple-touch-icon" href="icon.png">tag em a  <head>.

Os iPads desde iOS 8+ requerem uma resolução de 180 × 180. Outros dispositivos reduzirão a escala da imagem, mas se fornecermos à fonte uma qualidade boa o suficiente, a redução não prejudicará o usuário final (voltarei a isso mais tarde).

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

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

  • O manifesto do aplicativo da web é um arquivo JSON com todos os detalhes de um navegador para instalar seu site como um aplicativo do sistema. O formato veio do Google para 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 exibido em uma tela inicial e 512 × 512 que será usado como uma tela inicial enquanto o PWA está carregando.
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Esquecemos 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 formatos de menos sucesso por aí.

Ícone do Windows Tile

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 afixado do Safari

O Safari costumava ter um requisito separado para exibir um ícone nas  guias fixadas . No entanto, desde o Safari 12, podemos usar um favicon regular para guias fixadas. Mesmo a apple.com não usa  mask-iconmais o.

rel = ”atalho”

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

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

Esteja avisado que shortcutnão é e nunca foi uma relação de link válida. Leia este artigo incrível de Mathias Bynens de dez anos atrás que explica por que nunca precisamos de atalhos e  rel="icon"está tudo bem.

Yandex Tableau

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

Costa da Ópera

O Opera Coast, um navegador experimental para iOS, costumava exigir um ícone especial de 228 × 228. O navegador saiu da App Store em 2017 e duvido que tenha sobrevivido a várias atualizações do iOS desde então.

Agora, enquanto acenamos adeus aos camaradas caídos, vamos ver como produzir um conjunto de favicon definitivo para aqueles que ainda estão de pé.

Como construir nosso conjunto Ultimate Favicon

Veja como construir nosso conjunto de favicon minimalista 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 esteja  quadrada . Abra o arquivo de origem no visualizador do sistema e verifique a largura e altura da imagem. É fácil ajustar o tamanho do SVG em qualquer editor de SVG. No  Inkscape , você pode alterar o tamanho do documento em Arquivo → Propriedades do documento e centralizar o logotipo usando Objeto → Alinhar e distribuir.

Salve seu arquivo como icon.svg. Agora vamos mexer no nosso SVG, para que funcione bem com temas de sistema modernos . Pergunte ao seu designer como as cores devem ser invertidas em um tema escuro (para logotipos em P&B, basta mudar o preto para o branco).

Agora, abra seu arquivo SVG em um  editor de texto . Encontre um  <path>com escuro ou ausente fill. Adicione uma consulta de mídia CSS que acione mudanças no tema e mude 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>

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 em 32 pixels. Exporte o arquivo  favicon.icousando 32 bpp, alfa de 8 bits, sem configurações de paleta .

Reduza a imagem para 16 × 16 e verifique a visibilidade do ícone. Se ficar muito borrado, é melhor pedir ao seu designer uma versão minúscula personalizada do logotipo.

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

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

Etapa 3: Criar imagens PNG

Abra o arquivo SVG de origem em um editor de gráficos raster novamente e crie uma imagem 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 exporte como apple-touch-icon.png.

Etapa 4: otimizar arquivos PNG e SVG

A melhor ferramenta para otimizar SVGs é o  SVGO . Corre:

npx svgo --multipass icon.svg

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

  1. Abra seu icon-512.pngno Squoosh.
  2. Altere a configuração Compactar para  OxiPNG.
  3. Habilite “Reduzir paleta”.
  4. Defina 64 cores.
  5. Compare antes / depois movendo um controle deslizante. Se você notar uma 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 ícones ao HTML

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

Para HTML estático:

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

No entanto, recomendamos o uso de um bundler para gerar inibidores de cache (inclua o hash do arquivo em um nome como uma impressão digital). Se você estiver usando o Webpack com [ html-webpack-plugin]:

  1. Crie um index.htmlmodelo.
  2. Adicionar modelo às opções de plug-in:new HtmlWebpackPlugin({ template: "./view/index.html" });
  3. Defina o modelo HTML com links (os exemplos usam ERB usado para incluir arquivos, mas podem ser a linguagem de modelo de sua escolha):<!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"> <link rel="icon" type="image/svg+xml" sizes="any" 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 grátis: ícone separado para teste

Os favicons são uma ótima maneira de distinguir seu ambiente de produção de um de preparação. Acho que usar um ícone alternativo para encenar é super eficaz para evitar confusões caras.

Crie um  favicon-dev.icocom o mesmo logotipo, mas inverta as cores (ou faça algo que faça sentido para você). O mesmo para SVG, criar 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">
+     <link rel="icon" href="<%=
+       process.env.NODE_ENV === 'production'
+         ? '/favicon.ico'
+         : require('./favicon-dev.ico').default
+     %>">
      <link rel="icon" type="image/svg+xml" sizes="any" 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">
  <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

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

  plugins: [
    …,
    new WebpackPwaManifest({
      name: 'My website',
      icons: [
        { src: resolve('./icon-192.png'), sizes: '192x192' },
        { src: resolve('./icon512.png'), sizes: '512x512 }
      ]
    })
  ]
Postado em Blog
Escreva um comentário