Padrão Favicon - 2020 - svg, ico, png e dimensões?

113

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.

Jakub Muda
fonte
8
realfavicongenerator.net é atualizado regularmente ( realfavicongenerator.net/change_log )
Sphinxxx
3
@Sphinxxx Como autor de RFG, preciso agradecê-lo aqui :-)
philippe_b
favicon.pro
nourza
7
Pessoalmente, eu usaria apenas uma imagem PNG grande : em 2019, todos os navegadores modernos suportam PNG e podem redimensioná-la. Devemos absolutamente parar com essa proliferação maluca de favicons e boicotar navegadores que não cumprem o padrão. No futuro, também uma única imagem SVG seria adequada, mas no momento não é amplamente suportada.
Collimarco de

Respostas:

185

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.

philippe_b
fonte
3
@Will Nenhuma mudança recente. Isso ocorre por causa de uma reviravolta: se você colocar seus ícones no diretório raiz (por exemplo /favicon.ico), o IE o encontrará por convenção. Assim, nenhuma declaração neste caso particular. Gere um favicon novamente com /path/to/iconso caminho e desta vez a declaração estará presente.
philippe_b
1
@philippe_b Ah, certo, isso faz sentido! Obrigado por esclarecer.
Será
2
@RobertBaker Isso mesmo. Ele ainda está em desenvolvimento, então por enquanto o browserconfig ainda é o caminho a percorrer.
philippe_b
2
Você quer dizer a possível remoção de favicon.ico? Preciso de um dia para obter e instalar o Win XP e o Vista para poder testar vários pacotes ... Este verão?
philippe_b
4
pessoas como você não recebem o amor que merecem. Estou aqui para lhe dar um beijo molhado e desleixado de vovó com muito beijo de batom na testa. Usei o seu gerador, um encanto me bom homem, um encanto. ENTÃO a polícia que se dane, estou agradecendo!
Michael Tranchida
11

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.

Jakub Muda
fonte