Se olhar para o separador desta página no browser, ao lado do título, deverá ver o seguinte ícone:
Isto é chamado um favicon. É pequeno, mas trabalha muito pela sua marca e pela experiência de quem visita o seu site. Se não utilizar um favicon, os utilizadores vão ver o ícone genérico do browser, o que faz uma loja parecer inacabada.
Vamos ver onde aparecem os favicons, porque são importantes numa loja online, que formatos e tamanhos usar e como configurá-los na sua loja online Jumpseller.
Onde aparece o favicon
O favicon surge em mais sítios do que se costuma pensar:
- Separadores do browser, ao lado do título da página.
- Marcadores, histórico e sugestões da barra de endereço.
- Ecrã principal do telemóvel, quando um cliente guarda a sua loja como atalho no telemóvel ou tablet.
- Resultados de pesquisa: o Google mostra o favicon de um site ao lado do nome nos resultados, por isso é muitas vezes o primeiro elemento da sua marca que um novo cliente vê.
Porque é que o favicon é importante numa loja online
-
Dá à sua marca um sinal reconhecível. O mesmo ícone em todas as páginas reforça a sua identidade, tal como o logótipo.
-
Os clientes encontram-no mais depressa. Quando alguém tem muitos separadores abertos a comparar produtos de várias lojas, consegue identificar a sua num relance.
-
Os marcadores ficam mais fáceis de percorrer. O favicon ajuda os clientes que regressam a localizar a sua loja mais rapidamente nas páginas guardadas ou no histórico.
-
Transmite confiança. Um ícone em falta ou genérico é um pormenor, mas pode fazer uma loja parecer menos profissional precisamente quando alguém está a decidir se compra.
-
Destaca-se nos motores de busca. Como o favicon aparece ao lado do seu resultado no Google, um ícone claro e coerente dá ao seu site um ar consolidado. É uma pequena parte de um bom SEO: não é um fator de posicionamento por si só, mas ajuda as pessoas a reconhecer a sua loja entre os resultados.
Formatos e tamanhos do favicon
Formatos
-
ICO: o formato clássico. Um único ficheiro
.icopode conter vários tamanhos (por exemplo 16×16, 32×32 e 48×48) e todos os browsers o aceitam. - PNG: muito compatível e fácil de exportar de qualquer ferramenta de design. É a escolha habitual para ícones maiores, como o ícone tátil da Apple.
- SVG: um formato vetorial que se mantém nítido em qualquer tamanho. A maioria dos browsers modernos aceita favicons em SVG, mas não todos, por isso mantenha uma versão PNG ou ICO como alternativa.
Tamanhos recomendados
| Onde é usado | Tamanho | Formato |
|---|---|---|
| Separadores do browser | 16×16 e 32×32 px | ICO ou PNG |
| Resultados do Google | Um quadrado múltiplo de 48 px (48×48, 96×96, 144×144…) | Qualquer formato de favicon válido, incluindo SVG |
| Ecrã principal do iPhone e iPad (ícone tátil da Apple) | 180×180 px | PNG |
| Ecrã principal do Android e atalhos | 192×192 e 512×512 px | PNG |
A regra comum: use sempre uma imagem quadrada. Se só fizer um ficheiro, parta de uma versão quadrada grande (512×512 funciona bem) e reduza-a, em vez de ampliar um ícone pequeno.
Como desenhar um bom favicon
- Simplifique o logótipo. Um logótipo completo com texto transforma-se numa mancha ilegível a 16 píxeis. Use a inicial, um símbolo ou a parte mais reconhecível do logótipo.
- Aposte no contraste. Escolha cores que se distingam entre si e do fundo do browser. Verifique o aspeto com o tema claro e com o tema escuro.
- Mantenha a coerência. Use as mesmas cores do logótipo e do tema da loja, para que o favicon pareça parte da marca.
- Teste-o no tamanho real. Abra a sua loja num separador ao lado de uma dezena de outros e veja se ainda a distingue. Se não, simplifique mais.
- Dê um fundo sólido ao ícone tátil da Apple. As zonas transparentes podem ficar com um aspeto inesperado no ecrã principal.
Utilizar o Favicon com uma loja Jumpseller
Os Favicons são muito fáceis de criar, nem é preciso um designer para o fazer.
O ícone do separador do browser é apresentado a 16x16 pixels, mas é preferível carregar uma imagem quadrada maior para que o favicon se mantenha nítido em ecrãs de alta resolução e nos resultados de pesquisa.
Para gerar/criar o seu favicon recomendamos que utilize um dos seguintes recursos:
Agora que já tem o seu favicon, pode carregá-lo em Definições > Branding no painel de administração, onde encontra a opção de favicon junto ao logótipo e à cor principal. O nosso guia de personalização de branding explica todas as opções dessa página.
Alguns temas também incluem um campo para o favicon nas opções do tema. Para o encontrar, vá à secção Theme Options por baixo de Themes.
Assim que lá estiver, clique no botão delineado na imagem para submeter o favicon (esta opção poderá estar numa sub-secção em temas diferentes).
Depois de ter submetido, espere uns segundos e visite a sua loja num novo separador para ver os resultados. Os browsers guardam os favicons em cache durante muito tempo, por isso, se ainda vir o ícone antigo, experimente uma janela privada ou limpe a cache. O Google também precisa de voltar a rastrear o seu site antes de mostrar o novo favicon nos resultados.
Para mais ideias sobre como dar uma imagem coerente à sua loja, leia o nosso guia sobre branding e posicionamento da sua empresa.
Se tiver algum problema em relação a este assunto, estamos dispostos a ajudar, contacte-nos..
