O que você precisa saber sobre os ícones para Web App ou Página Web

Os favicons são muito conhecidos e usados, mas na era mobile você precisa conhecer sobre os ícones para Web App ou Página Web.

A representatividade da sua presença digital deve ser pensada para o mundo multifacetado dos dispositivos móveis.

Falo do Web App ou Página Web, porque seu endereço na internet pode ser as duas coisas.

Podemos estar falando de um blog, site institucional, portal, ou uma aplicação web em PWA, por exemplo.

O que são os ícones para Web App ou Página web

Crédito da imagem https://v1.designcode.io/iosdesign-guidelines

Os ícones são uma representação visual de um endereço ou atalho exibidos em uma interface.

O endereço, ou atalho, pode ser uma página web, um Web App, um aplicativo ou outras possibilidades de acesso representado por um ícone que te leva ao destino com o toque do seu dedo.

Esses ícones estão por todos os lados. Na tela inicial do seu smartphone, na primeira página do seu browser, nas dashboards diversas e, claro, no desktop do seu computador.

Como os ícones eram inseridos

Através do uso de meta tags do HTML inseridas no cabeçalho da sua página.

Quando essas metas tags não existem, o famigerado favicon é utilizado no lugar.

Um exemplo dessa inserção:

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="icon" sizes="72x72"href="/google-icon-72x72.png">
<link rel="icon" sizes="114x114"href="/google-icon-114x114.png">
<meta name="msapplication-square70x70logo" content="/ms-icon-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/ms-icon-square.png"/>

Visualizando o código acima encontramos inúmeros problemas com essa metodologia de inserção de ícones para Web App ou páginas da web.

Primeiro, preciso fazer a mesma coisa três vezes. Uma para o iOS da Apple, outra para o Google e outra para a Microsoft.

Para garantir melhor visualização nos diferentes tamanhos de tela, preciso informar vários arquivos e essa lista sempre se multiplica por três, considerando o cenário apresentado.

Além disso precisamos escrever muito código para realizar uma coisa simples.

Além, ainda, de aumentar o tamanho do arquivo e por conseguinte impactando no tempo de carregamento da página.

Como os ícones são inseridos na era do PWA

Com o advento dos Progressive Web Apps a inserção dos ícones ficou mais eficiente, elegante e prática.

Não precisamos mais fazer uso das inúmeras meta tags como exemplificado.

Especificamos os ícones desejados no manifest.json e na página vinculados esse arquivo.

A implementação do manifest.json é simples e realizada através de tag HTML.

<link rel="manifest" href="/blog.apiki.com/manifest.json">

No arquivo especificamos os tipos e tamanhos desejados para os ícones da nossa Web App ou página web.

{
  "short_name": "Apiki Blog",
  "name": "Blog sobre WordPress da Apiki",
  "icons": [
    {
      "src": "icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "https://blog.apiki.com/?pwa_launcher=true"
}

Inserir os ícones através do manifest.json é muito mais simples.

Eu não preciso mais me preocupar com o padrão de nomenclatura utilizada pelos diferentes sistemas.

E quando novos sistemas surgirem, eu não preciso inserir outras meta tags. Esses novos sistemas vão considerar o padrão do manifest.json.

Os diferentes universos e tamanhos a serem considerados

Há diferentes tamanhos de telas para os mais variados tipos de dispositivos móveis.

Cada um considera um tamanho de ícone específico. Além de diferentes resoluções.

É necessário atender os requisitos de tamanho e resolução para a representatividade da sua aplicação ficar atraente.

Caso contrário teremos um ícone com imagem distorcida e nada convidativa ao cliente.

Sobre tamanhos e resoluções

Crédito da imagem https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/

Imagens com alta resolução são consideradas por dispositivos que a suportam.

Essas imagens tem um fator de escala que pode ser 1x, 2x ou 3x.

Considerando essa escalas, um ícone de 120px x 120px deverá ter duas outras versões com 240px x 240px para o fator 2x e 360px x 360px para o fator 3x.

Os aparelhos mais recentes da Apple como o iPhone X, iPhone 8 Plus, iPhone 7 Plus e iPhone 6s Plus utilizam o fator 3x.

Os demais dispositivos dela que suportam alta resolução utilizam o fator 2x (e os demais, obviamente, 1x).

Citei um exemplo da Apple, iOS, mas é preciso se inteirar das especificidades dos diferentes universos.

Os universos, leia-se sistemas ou softwares, são diversos, a saber: Apple iOS, Android, Chrome Webstore, Opera Coast, Windows Metro. Novos poderão surgir no futuro – e certamente irão.

Conclusão

Às vezes pouco nos preocupamos com os ícones a serem utilizados em nossa Web app ou Página web.

Mas precisamos lembrar que sua atratividade será essencial para o sucesso do projeto digital.

E como percebido o desafio é grande, dado os diferentes tamanhos, resoluções e sistemas.

É preciso integrar o time de desenvolvimento para a implementação através do manifest.json e o time de criação para os diferentes tamanhos e resoluções.