Favicons - Melhores práticas

Estou tentando entender todos esses tamanhos e formatos diferentes que são necessários para Favicons, ícones de toque e agora ícones de bloco também.

Eu li esta postagem: http://www.jonathantneal.com/blog/understand-the-favicon, mas ainda estou um pouco confuso sobre o que exatamente usar que ficará razoavelmente bom em todos os dispositivos e navegadores> = IE8 .

Acho que devo criar o seguinte:

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

Tile Icon
tileicon.png (144x144)

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152) com
base neste https://github.com/h5bp/html5-boilerplate/issues/1367

... e então usar este código para servi-los?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Estou perdendo alguma coisa?

Não tenho certeza se isso abrangerá o IE 10.

Favicon é muito mais complexo do que parece. 10 anos atrás, favicon.icoera o único item necessário. Em seguida, havia o ícone de toque, vários ícones de toque devido às várias resoluções de tela dos dispositivos iOS e, em seguida, o ícone de bloco para Windows ...

Algumas respostas aqui são muito abrangentes - e esmagadoras (tudo isso, apenas por um favicon?). Ainda assim, eles falham em indicar que o ícone do bloco 310x310 para Windows é recomendado como 558x558 . E, uma vez que foram escritos há alguns meses, eles não mencionam o manifesto recente do Android Chrome M39 ou o ícone da guia SVG fixada para Safari no OS X El Capitan .

O design por plataforma é outro tópico difícil, mas negligenciado. Por exemplo, favicon geralmente são transparentes. Mas o iOS não oferece suporte a transparência (para um exemplo disso, compare o ícone de toque do SO e o que você obtém ao adicionar o SO à tela inicial do seu iPhone).

Por essas razões, o que considero uma prática recomendada para o favicon é não criá-lo manualmente. Em vez disso, use uma ferramenta para automatizar todo o processo e aplicar as diretrizes da plataforma.

Aconselho você a usar RealFaviconGenerator . Ele gera todas as imagens e código HTML de que você precisa para fazer o trabalho:

• favicon.ico e ícones PNG para navegadores de desktop
• Ícone de toque da Apple para dispositivos iOS e Android
• Mosaicos do Windows 8
• Ícone de guia fixado para Safari no OS X El Capitan

Por exemplo, ele não apenas gera a msapplication-TileImageimagem e a marcação, mas também o browserconfig.xmlarquivo mais recente compatível com o IE11. Ele também foi atualizado há alguns meses para oferecer suporte ao manifesto do Android Chrome e Safari OS X El Capitan.

Divulgação completa: sou o autor deste site.

Aqui está o exemplo completo (como eu sei) de favicon para celular e tablet:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Para o IE11, aqui está uma FAQ

Existem vários ícones diferentes e até telas de abertura que você pode definir para vários dispositivos. Essa resposta explica como dar suporte a todos eles.

Aqui estão alguns trechos que usei com links relevantes para onde reuni as informações. Consulte meu blog para obter mais informações e mais informações sobre o modelo de projeto Boilerplate da ASP.NET MVC com tudo isso pronto para uso (incluindo arquivos de imagem de amostra).

Adicione a seguinte marcação ao seu cabeçalho html. As seções comentadas são totalmente opcionais. Enquanto as seções não comentadas são recomendadas para cobrir todos os usos de ícones. Não se assuste, mais se for comentários para te ajudar.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="https://stackoverflow.com/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="https://stackoverflow.com/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="https://stackoverflow.com/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="https://stackoverflow.com/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="https://stackoverflow.com/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="https://stackoverflow.com/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="https://stackoverflow.com/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="https://stackoverflow.com/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Meu arquivo browserconfig.xml. Explicação completa acima.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Meu arquivo manifest.json. Explicação completa acima.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Uma lista dos arquivos no projeto (observe que os nomes desses arquivos são importantes se você decidir colocar alguns deles na raiz do seu projeto para evitar o uso das meta tags acima):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Sobrecarga total

Se você retirar os comentários, terá 3 KB de HTML extra, se não der suporte a telas iniciais de 1,5 KB. Se você estiver usando compactação GZIP em seu conteúdo HTML, o que todos deveriam estar fazendo atualmente, isso deixa você com cerca de 634 bytes de sobrecarga por solicitação para suportar todas as plataformas ou 446 bytes sem telas iniciais. Pessoalmente, acho que vale a pena oferecer suporte a dispositivos IOS, Android e Windows, mas é sua escolha, estou apenas dando as opções!

Observação lateral sobre o ícone da web atual / tela inicial / situação das configurações

Esta situação com ícones específicos de fornecedores, telas de abertura e tags especiais para controlar o navegador da web ou ícones fixados é ridícula. Em um mundo perfeito, todos nós usaríamos um arquivo favicon.svg que poderia parecer bom em qualquer tamanho e poderia ser colocado na raiz da página. Apenas o FireFox oferece suporte para isso no momento da escrita (consulte CanIUse.com ).

No entanto, os ícones não são a única configuração atualmente, existem várias outras configurações específicas do fornecedor (mostradas acima), mas um arquivo favicon.svg cobriria a maioria dos casos de uso.

Atualizar

Atualizado para incluir a nova versão Android / Chrome M39 + opções de favicon / tema. Curiosamente, eles adotaram uma abordagem semelhante à da Microsoft, mas estão usando um arquivo JSON em vez de XML.

A solução mais simples é usar uma (!) Imagem PNG (em 2020).

Basta adicionar isto ao cabeçalho do seu documento:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

O último link é para Apple (tela inicial), o segundo para Android (tela inicial) e o primeiro para os demais.

Observe que esta solução NÃO oferece suporte a 'blocos' no Windows 8/10. Ele suporta imagens em atalhos, favoritos e guias do navegador.

O tamanho é exatamente o tamanho que a tela inicial do Android usa. O tamanho do ícone da tela inicial da Apple é 60px (3x), então 180px e será reduzido. Outras plataformas usam o ícone de atalho padrão, que também será reduzido.

Na verdade, eu estava me perguntando a mesma coisa e tentei procurar algum projeto simples que pudesse ser integrado a uma etapa de construção ou simplesmente simplificar a criação dos ativos e marcação necessária.

Não encontrei nada que atendesse aos meus requisitos, então criei o faviconbuild e o lancei sob a licença do MIT .

O objetivo deste projeto é criar um utilitário de plataforma cruzada central, sustentável e executável localmente para construir favicons e marcação de suporte. Ele aproveita o poder do Imagemagick, então você precisa baixá-lo para sua plataforma ou usar os que forneci em meus lançamentos . Fique à vontade para usar isso em projetos comerciais ou pessoais, contribuir, enviar solicitações de recursos ou simplesmente usar como fonte de inspiração para seus próprios utilitários.

O projeto consiste em um arquivo batch para Windows e um script bash para Unix / Mac (ou Windows via Cygwin). Você pode obter uma lista completa de opções com suporte na opção de ajuda interna -h ou --help.

ex:

./faviconbuild.sh -h

Ambos os scripts analisam um arquivo de texto simples que você também pode sobrescrever com a opção -p ou --parsed. O arquivo é basicamente apenas um modelo de comandos a serem executados para que você possa personalizar a saída com mais facilidade, se necessário.

Também publiquei uma postagem no blog sobre o desenvolvimento e como um mini tutorial sobre script bash / batch.