Quais dimensões favicon, formatos de arquivo e tags de meta / link devem ser usados ​​a partir de 2020? Isso inclui o ícone da apple, windows, android e outros dispositivos que as pessoas usam hoje.

Eu uso o Opera e posso ver que ele suporta o formato SVG. É a melhor solução para usar SVG hoje em dia? Existe alguma opção "um arquivo serve para todos"?

Tenho navegado em muitos sites e verificado diferentes "geradores de favicon". Todos eles têm anos e trabalham principalmente com arquivos png.

Por exemplo: Qual código deve ser usado para ico e svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

ou as dimensões devem ser especificadas se ico contiver mais tamanhos? Não encontrei uma boa resposta.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Forneça dimensões, formatos de arquivo e tags de meta / link de quais favicons devem ser usados.

Isenção de responsabilidade: eu sou o autor do RealFaviconGenerator, que espero estar atualizado (principalmente, veja abaixo). Portanto, não se surpreenda se essa resposta corresponder ao que RFG gera.

O mito do tamanho único

Não existe um ícone "tamanho único". Você não pode criar um único ícone SVG e esperar que funcione em qualquer lugar.

Do ponto de vista técnico, um único ícone SVG seria uma boa coisa. Mas do ponto de vista de UI e UX, esse não é um resultado desejável. Compare iOS e Android. No iOS, todos os ícones da tela inicial são quadrados com cantos arredondados (o iOS preenche as regiões transparentes dos ícones Touch com preto ). No Android, os ícones da tela inicial costumam usar formatos não quadrados e transparência (incluindo ícones do Google app). Envie um ícone de um único toque e o Android Chrome irá usá-lo. Mas você não será capaz de corresponder às diretrizes de ícone do Android , enquanto um ícone dedicado poderia.

Portanto, aconselho evitar deliberadamente o uso de um único ícone. Em vez disso, direcione cada plataforma individualmente, quando possível (nem sempre é o caso).

Ícones, plataforma por plataforma

iOS Safari

O iOS Safari espera um ícone de toque . A partir de hoje, esta é uma imagem PNG 180x180. Esta imagem não deve usar transparência e seus cantos serão arredondados automaticamente quando adicionados à tela inicial. Declarado com:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Com o passar dos anos, esse ícone se tornou o "ícone padrão de alta resolução" para muitos navegadores. Portanto, você o encontrará em outro lugar, ao adicionar aos favoritos, etc.

Android Chrome

O Android Chrome depende do Web App Manifest . Embora este manifesto não seja dedicado ao Android Chrome, atualmente é seu principal apoiador. Portanto, no momento, ainda é bastante seguro considerar os ícones do Web App Manifest como sendo do Android Chrome.

Como o nome sugere, o Manifesto do Web App é para, bem, aplicativos da web. Mas qualquer site pode usá-lo como uma forma de referenciar alguns ícones.

O Android espera um ícone PNG 192x192, transparência permitida e incentivada.

O manifesto é declarado com:

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

Edge e IE 12

A Microsoft introduziu o browserconfig , um documento XML que lista vários ícones que se encaixam na UI do Metro.

O arquivo e a cor de fundo são declarados com:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Navegadores de desktop clássicos

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Isto é onde as coisas estão um pouco mais borradas. Historicamente, havia um único favicon.icoarquivo, ainda com suporte. No entanto, os navegadores mais recentes preferem escolher ícones PNG, que são mais leves. Além disso, alguns navegadores não são capazes de selecionar o ícone adequado no arquivo ICO (este formato pode incorporar várias versões de um ícone), fazendo com que um ícone de baixa resolução seja usado incorretamente.

Alguém pode ficar tentado a abandonar favicon.icototalmente o antigo . Embora eu queira dar esse salto no RFG, não executei os testes necessários para avaliar o impacto nos navegadores antigos.

Portanto, o combo que ainda recomendo hoje, com favicon.icoícones de incorporação 16x16, 32x32 e 48x48:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Outros navegadores

Outros navegadores podem ter ícones dedicados. Por exemplo, Coast by Opera está procurando por um ícone 228x228 . A necessidade de se concentrar nesses navegadores não é óbvia. Eles geralmente usam o ícone de toque ou outros ícones quando não conseguem encontrar "seu" ícone.

Conclusão

Conforme anunciado no início, é exatamente isso que o RealFaviconGenerator cria.

Também vale a pena mencionar que junto com o favicon algumas outras tags devem ser adicionadas como tags OG, cartões de Twitter ou aplicativo MS. Tudo tem o mesmo propósito - a identificação visual de sua marca e também deve ser incluído.

O cartão do Twitter pode ser encontrado AQUI

Eu adiciono as seguintes tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Descobri que muitos usuários fazem imagens nos formatos 1300 por 650 pixels e jpg / png.

Depois de adicionar todas as tags, elas devem ser validadas AQUI

O Facebook OG tem mais opções, mas em geral são as seguintes:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

O Facebook recomenda a proporção específica da imagem e o tamanho do arquivo é limitado a 8Mb. Para manter imagens semelhantes com o cartão do Twitter, recomendo as dimensões de 1240px por 650px e o formato jpg / png. Facebook e twitter não aceitam svg ...

Descobri que algumas marcas globais usam essa tag em seus sites. Um tinha dimensões de 150x150 pixels e formato png. Esta imagem pode ser usada por navegadores para exibir nos resultados da pesquisa.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

O Real Favicon Generator também cobre favicons da Microsoft. Existem muitas outras meta tags para aplicativos MS para otimizar o arco da página e outras informações, como imagem, são exibidas. Este tópico também vale a pena ler.

Espero que isso seja útil para alguém e expanda o tópico de branding de seu site.