Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result
banner-horizontal-3

Início » WordPress Mobile » O que você precisa saber sobre os ícones para Web App ou Página Web

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

Leandro Vieira by Leandro Vieira
5 anos ago
Reading Time: 4 min
2
Ícones para Web App ou Página web
Compartilhe no FacebookCompartilhe no LinkedIn

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.

Conteúdo relacionado

O conceito e aplicabilidade do Mobile First

WordPress e o desenvolvimento de aplicativos móveis

Não use Design Adaptativo. Considere o Design Responsivo

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

Design de ícones para App
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.

Você insere os ícones para sua Web App através de meta tags ou do manifest.json? #WP #PWA

Click To Tweet

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

Imagem representando o impacto da resolução em ícones
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.

Tags: íconesJSONManifestPWA
Share8Share1SendShare
Previous Post

Tudo sobre Varnish – a solução de cache mais poderosa para WordPress

Next Post

Performance de sites e estratégia de marketing digital andam juntas

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como personalizar sua mobile branding no Google
WordPress Mobile

Como personalizar sua mobile branding no Google

4 de agosto de 2020
Twitter Card – o recurso para seu tweet ir além dos 140 caracteres
WordPress Mobile

Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

28 de julho de 2020
Como implementar Mobile First
WordPress Mobile

Como implementar Mobile First em projetos WordPress

15 de janeiro de 2021
O protocolo Open Graph no WordPress
WordPress Mobile

O protocolo Open Graph no WordPress

15 de janeiro de 2021
Next Post
Performance de sites e estratégia de marketing digital andam juntas

Performance de sites e estratégia de marketing digital andam juntas

WAF (Web Application Firewall) em sites WordPress

WAF (Web Application Firewall) em sites WordPress

Comments 2

  1. Rodrigo Vieira da Silva says:
    5 anos ago

    Querido Leandro, mais uma vez parabéns por este excelente artigo produzido. Você não sabe o quanto este conteúdo, me enriqueceu de conhecimento.

    Vou já começar abandonar as velhas práticas usadas e já adotar esse novo método.

    Isso sim que é blog de verdade, trazendo conteúdo relevante sobre wordpress e web.

    Abraços

    Responder
  2. MotoTuristas says:
    5 anos ago

    Sou assinante da lista da APIKI, mas não conhecia PWA ou Progressive Web Apps. Vou ler o material que aliás, nunca li sobre PWA no artigo: PWA é o mínimo que você precisa saber a respeito. Continuem com o material tutorial por e-mail. Grato pela paciência.

    Responder

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

banner-lateral-3
Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.
  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.