15

Sempre utilizei apenas o favicon.ico nas páginas HTML, com ele na raiz e com o respectivo link rel no HEAD:

<link rel='shortcut icon' href='https://site/favicon.ico'>

Mas recentemente, observando o log do servidor, vi que os erros por falta de outras versões de favicons são uma constante, principalmente os da apple, gerando logs como o abaixo:

... [core:info] ... File does not exist: /home/meusite/www/apple-touch-icon.png

Fiquei em dúvida se estas requisições que não completam podem afetar o desempenho do servidor, e hoje encontrei um gerador de favicons que além de gerar para diversas versões e tamanhos (apple, android etc), gera também vários caminhos com <link rel> para cada versão, e alguns atributos meta, e até um json, como no exemplo abaixo:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

No entanto pareceu muita coisa pra incluir em todas as páginas HTML, e olhando os fontes de alguns sites de referência, vi que nenhum utiliza todos esses link rels e meta names sugeridos pelo gerador.

Então a pergunta é se é mesmo uma boa prática incluir todos essas imagens no /, e todos esses links rels e meta names no código HTML de todas as páginas do site, tanto por usabilidade quanto performance?

4
  • 4
    Acho que nesses casos o desenvolvedor deve se perguntar "Que navegadores preciso suportar?", "Se em 1 dos meus 1000 usuários o ícone aparecer com uma resolução ruim, é um problema?". Tem que colocar na balança o custo beneficio
    – Costamilam
    Commented 18/06/2019 às 11:03
  • @Costamilam A ideia é suportar todos os navegadores, e se para 1 dos meus 1000 usuários o ícone não aparecer para mim é a morte! :) Mas sério, detesto a ideia do ícone não aparecer, acho que quebra o design totalmente, fica aquela coisa meio porca haha. A questão é, se tenho, digamos, 200 páginas no site, vai valer a pena (pq um pouco deve afetar o desempenho global do site né) incluir este monte de HTML nas páginas.
    – gustavox
    Commented 18/06/2019 às 13:01
  • 1
    É mais coisas para carregar, mas considero pouca coisa, não é só não aparecer, como pode ver, no HTML você adiciona de diversos tamanhos (16x16, 32x32, etc), tavez um ou dois de cada rel diferente resolva seu problema, pode não ficar perfeito em todos os devices, mas precisa?
    – Costamilam
    Commented 18/06/2019 às 13:29
  • 1
    Rapaz se fosse eu no comando do projeto e fosse mesmo necessário eu faria uma programação javascript para pegar o tamanho da tela do usuário e com base no resultado obtido criaria a tag em tempo de execução e add ela no DOM e boa teria sempre 1 tag somente Commented 19/06/2019 às 19:12

2 Respostas 2

18
+100

Acho que essa resposta não vai abordar todos os pontos, mas tenho uma dicas para te dar...

O recomendado é que se use os Favicons no diretório raiz, pq é onde o browser primeiramente busca por eles. "Originally, the favicon was a file called favicon.ico placed in the root directory of a website." Fonte: https://en.wikipedia.org/wiki/Favicon#cite_note-10

Mas por exemplo, se vc tem vários sites dentro de um host, cada site com seu favicon, o caminho deles não está na raiz pai, e nem por isso podem deixar de funcionar. Isso é só uma observação feita em 2005 pela própria W3C https://www.w3.org/2005/10/howto-favicon

Então mesmo que seja recomendado, não é regra usar o favicon na raiz.

Veja nessa imagem o que acontece quando vc coloca seu pack de favicon em uma pasta separada. Nesse site os favicons não estão na raiz, eles estão em em url/favicons e o que acontece é que quando você acessa diretamente a URL de uma imagem (url/imgs/imagem.png) por exemplo o favicon não parece na aba no navegador!

inserir a descrição da imagem aqui

Se você colocar os favicon na raiz do site isso não vai acontecer! Dica do @costamilam


Sobre a quantidade de variações acho que essa tabela ajuda a esclarecer.

inserir a descrição da imagem aqui

Fonte: https://realfavicongenerator.net/favicon_compatibility#.XPqmXIhKjcs

Agora como o Browser gerencia qual dessas versões ele vai usar eu não sei dizer ao certo, acredito que isso faça parte do site.webmanifest

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Ou pelo browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Outra coisa curiosa, é que se houver um favicon com a extensão .ico ele parece ser a versão preferida pelos browsers antigos, o provavelmente ele vai ser o escolhido entre as versões indexadas para ser exibido no navegador....

Outra coisa é que para manter o favicon cross-OS além de cross browser, você tem que manter o pack de favicons disponível no host, o indicado é que seja na raiz como já mencionando. Tenha em mente que quando um usuário salva um "atalho" para o seu site na área de trabalho do Android ou iOS, é o favicon que vai ser utilizado como ícone na área de trabalho. Então é bom que você tenha versões para todas as resoluções.

inserir a descrição da imagem aqui

DICA: Uma forma de controlar o cache é colocando um versionamento no href do arquivo, assim você pode controlar facilmente o cacheamento do seu favicon, e ter certeza em qual versão você está do seu favicon, por exemplo fazendo assim: href="favicon.ico?v=rv123"

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon.png?v=7koL0owN">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=7koL0owN">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=7koL0owN">
<link rel="manifest" href="site.webmanifest?v=7koL0owN">
<link rel="mask-icon" href="safari-pinned-tab.svg?v=7koL0owN" color="#5bbad5">
<link rel="shortcut icon" href="favicon.ico?v=7koL0owN">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Sobre as requisições

Não entendo muito do assunto, mas uma requisição que falha gera um erro no console, mesmo sendo um favicon, mas como uma requisição que não retorna nada afeta o browser eu não sei dizer, mas acredito que deva "lagar" o site, pois ele fica verificando a conexão e não acha nada...

inserir a descrição da imagem aqui

Aqui tem um validador de favicons que você pode testar para ver se seu site está totalmente crossbrowser.

https://realfavicongenerator.net/favicon_checker

inserir a descrição da imagem aqui

7
  • 2
    @gustavox acho que pra ter certeza disso só indo pesquisar a documentação de cada browser, pois não é um padrão definido pela W3C. O que posso te dizer é que ainda no HTML4 já se usava chamar favicon pela URL em caminho absoluto http://example.com/myicon.png no link que cite da W3C eles têm esse exemplo aplicado
    – hugocsl
    Commented 7/06/2019 às 18:38
  • 1
    Sobre as requisições, é certo que elas vão usar recurso do servidor, acho que principalmente por não achar o arquivo né, mas a dúvida é se isso é insignificante ou não... de qualquer forma valeu pela resposta, ajudou bastante +1
    – gustavox
    Commented 7/06/2019 às 18:39
  • 1
    É, vou dar uma pesquisada e fazer uns testes aqui, depois retorno o resultado se achar algo relevante. Valeu!
    – gustavox
    Commented 7/06/2019 às 18:40
  • 2
    @gustavox como falei não é uma resposta 100% completa rss, me falta conhecimento para confirmar algumas coisas..., mas valeu a força 💪 posta o que descobrir sim! Parece que até existe uma técnica para usar requisição de favicon para saber quantas pessoas estão logadas no sistema etc. rss
    – hugocsl
    Commented 7/06/2019 às 18:41
  • 1
    O browser faz um GET, o servidor retorna um 404 e acaba por ai. É uma requisição a mais, mas acredito ser pouco significativa, já que, como dito, não retorna nada, e o tamanho da resposta acaba ficando menor (pelo menos deveria). Um outro detalhe, manter o ícone na raiz (não sei se ele busca o favicon mais próximo ou pega direto o da raiz) faz com que quando o usuário ir em algum arquivo estático que não seja HTML (uma imagem, por exemplo), esse ícone aparecerá, mesmo sem ter configurado nada, se deixar numa pasta separada, pode não aparecer
    – Costamilam
    Commented 18/06/2019 às 10:57
5

é mesmo uma boa prática incluir todos essas imagens no / e todos esses links rels e meta names no código HTML de todas as páginas do site

Ao favicon principal, é melhor para compatibilidade entre navegadores não usar HTML algum. Um favicon.ico (tamanhos 16x16 e 32x32) na raiz vai bem -- um arquivo .ico é um container para múltiplos ícones .bmp ou .png. Isso vai funcionar em qualquer navegador, desde o IE6, exceto o SeaMonkey.

Além disso, é interessante você se atentar a:

  • Touch icon para iOS 2.0+ and Android 2.1+ (tamanho 152x152):
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">
  • IE 10 Metro tile icon (tamanho 144x144):
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
  • IE 11 Tile para o Windows 8.1 Start Screen
<meta name="application-name" content="Name">
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/path/to/ieconfig.xml">

No ieconfig.xml (tamanhos 128x128, 270x270, 558x270, 558x558, respectivamente):

<?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
        <tile>
          <square70x70logo src="/path/to/smalltile.png"/>
          <square150x150logo src="/path/to/mediumtile.png"/>
          <wide310x150logo src="/path/to/widetile.png"/>
          <square310x310logo src="/path/to/largetile.png"/>
          <TileColor>#FFFFFF</TileColor>
        </tile>
      </msapplication>
    </browserconfig>

Os caminhos não importam.

-

tanto por usabilidade quanto performance?

Na prática, não faz muita diferença quanto à performance, mas ganha em "usabilidade" ou adaptabilidade.

Por exemplo, se os apple touch icons não forem especificados no HTML, o Safari do iOS vai procurar no diretório raiz ícones com o prefixo apple-touch-icon ou apple-touch-icon-precomposed. Por exemplo, se o tamanho do ícone apropriado ao dispositivo for 57×57 pixels, o iOS vai procurar pelos nomes de arquivo, na ordem:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Portanto, para iOS, não é necessário usar HTML aos touch icons -- e isso está sendo a sua preocupação com o servidor web, mas esse tipo de requisição foge ao seu controle. Enfim, é uma boa ideia incluir ambos apple-touch-icon.png e apple-touch-icon-precomposed.png na raiz para o máximo de compatibilidade.

Para completar, como a abordagem sem HTML não funciona no Android browser (versões mais antigas), é melhor usar os apple-touch-icons no HTML (do maior ao menor, desse modo versões mais antigas do iOS baixam o ícone menor em vez do maior, como apenas o último é usado):

<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->

Espero ter ajudado. Por favor, veja esta compilação e suas referências.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .