A identidade de sua loja de comércio eletrônico reúne vários elementos, como logotipo, cores do site e seu materiais de marketing. Essa identidade fortalece sua marca como um todo e cria um lembrete saudável para seus clientes, evocando sentimentos de conforto e confiabilidade ao verem as imagens e cores de sua marca.
Embora pequeno em tamanho, o Favicon também está vinculado a essa estratégia de marca. Neste tutorial, mostraremos como criar e adicionar um favicon ao seu Shopify loja, aprimorando sua aparência online e tornando mais fácil reconhecer sua loja quando os clientes a visitam.
Neste artigo
O que é um Shopify Favicon?
A Shopify Favicon, ou qualquer Favicon para esse assunto, é um pequeno ícone para o seu site que aparece na guia do navegador ao lado do nome do seu site.
A barra de endereço do navegador é a área mais comum para visualizar o Favicon do site, mas também aparece nos seguintes locais:
- Aplicativos da barra de ferramentas
- Bookmarks
- Resultados da história
- Barras de busca
- Às vezes, quando compartilhado nas redes sociais
Essencialmente, sempre que o navegador precisa mostrar um link para o seu site e não há muito espaço para outro conteúdo, ele substitui seu logotipo normal de tamanho real pelo Favicon.
Por padrão, o Shopify adiciona o Shopify logo para o seu Favicon, então precisamos mudar isso.
Um bom favicon geralmente é uma versão menor do seu logotipo, mas às vezes eles variam um pouco porque você deseja garantir que eles sejam visíveis, ocupar todo o espaço alocado e adicionar um pouco de cor ao lado do nome do seu site.
Por padrão, todos os navegadores suportam Favicons de 32 × 32 pixels. Essa é uma imagem bastante pequena, mas com a ajuda de alguns geradores online você pode fazer o seu próprio Shopify Favicon para seu site. Além disso, imagens maiores são reduzidas de qualquer maneira, então você não precisa necessariamente obtê-las exatamente para 32 × 32.
Um Favicon faz muito sentido para lojas online em Shopify uma vez que são fáceis de adicionar e é importante fortalecer a identidade da sua marca como vendedor online. Alguns também argumentam que isso ajuda no SEO.
Continue lendo para saber mais sobre como adicionar Favicon ao seu Shopify armazenar.
Como adicionar um favicon ao seu Shopify Loja – Guia rápido
Conforme mencionado, ao executar um site por meio de Shopify adiciona automaticamente um Shopify logo como Favicon do seu site. Não há nada de errado com isso, mas é muito mais profissional e voltado para a marca incluir seu próprio logotipo. Aqui estão as etapas que você precisa seguir:
Etapa 1: vá para o seu Shopify Painel
Portanto, vá para o seu Shopify painel de controle e clique em Loja Online em Canais de Vendas.
Etapa 2: navegue até as configurações do tema
Navegue até seus Temas e clique no botão Personalizar ao lado do seu tema atual. Embora as configurações mudem de tema para tema, todos os mais recentes Shopify temas têm uma seção para alterar o Favicon.
Na Shopify personalizador, vá até o final da lista à esquerda e clique em Configurações do tema.
Etapa 3: selecione o botão Favicon
Na nova seção, localize e selecione o botão Favicon.
Isso revela um botão para selecionar imagem ou explorar imagens gratuitas. Não consigo imaginar que eles tenham imagens gratuitas que correspondam ao seu logotipo, então é melhor clicar em Selecionar imagem para fazer o upload de uma imagem personalizada do seu computador.
Etapa 4: faça upload do seu favicon
Escolha o arquivo Favicon e envie-o para Shopify.
Depois disso, você verá uma prévia do ícone do seu Favicon. Para tornar as alterações permanentes, selecione o botão Salvar em Shopify.
Para ver o seu Shopify favicon em ação, vá para o front-end do seu site e olhe para a guia atual do navegador. Você deve ver o Favicon próximo ao título do seu site.
Dicas para criar seu favicon
Embora pareça fácil gerar um pequeno ícone, é importante acertar, considerando que os clientes veem o Favicon sempre que acessam seu site. Também é fácil fazer um Favicon que está borrado ou que não preenche todo o espaço, contrariando o propósito do Favicon, uma vez que não é tão visível a olho nu.
Para resolver quaisquer problemas, aqui estão algumas dicas para criar seu Shopify Favicon:
- Comece seu projeto maior que 32 × 32 e reduza-o se necessário. Você provavelmente terá uma imagem mais borrada se tentar esticar uma imagem menor no espaço. Por exemplo, pegar uma imagem de 32 × 32 da Hatchful e tentar esticá-la para se livrar da parte escrita do logotipo pode causar problemas.
- Normalmente, você não pode simplesmente pegar seu logotipo atual e esperar que funcione perfeitamente como um Favicon.
- Os favicons ficam ótimos quando você cobre cada pixel do espaço fornecido. Você não tem muito espaço, então deve aproveitar cada pixel quadrado no espaço 32×32.
- Remova todo o texto, pois é difícil ler em um favicon. A exceção é se o elemento principal do logotipo for uma letra grande.
- Fotografe para cores sólidas e mais brilhantes. Logotipos simples e de desenho animado funcionam melhor.
- Veja os Favicons de suas marcas favoritas. O que eles fizeram para garantir que sua imagem online passasse por um favicon?
- Considere preencher todo o espaço com um plano de fundo de cor sólida ou fazer um plano de fundo transparente com o elemento do primeiro plano esticado de forma que toque apenas as bordas. Você notará que muitas marcas maiores têm fundos transparentes para seus Favicons.
- O formato de arquivo ICO funciona bem para imagens menores. Se você não estiver familiarizado, use um PNG para fundos transparentes ou um JPG para Favicons de alta resolução com fundos sólidos.
Como gerar um favicon para o seu Shopify Store
Você tem a opção de criar um Favicon em qualquer software de design de sua escolha. Se você preferir Photoshop, vá com ele. Se você preferir um software livre como o GIMP ou Pixlr, todos eles funcionam, contanto que você se atenha às dimensões exigidas de 32 × 32.
Você também tem a opção de fazer um Favicon com Shopify's Hatchful Logo e Free Favicon Generator. Veja nosso guia completo Ao usar Arrogante para construir um logotipo.
Depois que o criador do logotipo faz seu trabalho, ele fornece um arquivo com vários formatos de logotipo, um dos quais é um Favicon.
Lembre-se de que muitos dos logotipos que você faz com Arrogante (leia nosso Revisão chocante) use um espaço em branco ao redor do logotipo, portanto, pode ser necessário ajustá-lo para que o gráfico cubra a maior parte do espaço. Em geral, descobri que você só deve usar o favicon Hatchful fornecido se já tiver uma boa aparência (ele ocupa a maior parte do espaço e não contém pequenos elementos como texto).
Se não for esse o caso, use um software de edição de terceiros como Photoshop ou Pixlr para cortar alguns dos elementos desnecessários.
importante: Você precisa usar uma versão maior da imagem se estiver planejando esticá-la sobre uma tela para cortar o texto e o espaço em branco. Para isso, usei o Hatchful para gerar logotipos, mas na verdade peguei um dos logotipos grandes (não o arquivo Favicon fornecido), pois não quero que ocorra desfoque quando o esticar sobre a tela de 32 × 32.
Dentro do seu software de edição, escolha uma nova tela com a largura e altura definidas em 32.
Faça uma camada para a nova imagem e certifique-se de que a imagem seja maior do que a tela de 32 × 32, pois você pode esticá-la. Em seguida, carregue ou coloque a imagem na tela.
Na captura de tela a seguir, eu tenho o design do Favicon ampliado para que eu possa ter certeza de que ele se encaixa no quadrado corretamente. Está borrado, mas eu sei que ficará muito melhor quando eu diminuir o zoom.
Como você pode ver, a versão reduzida do Favicon no designer do Pixlr parece boa. Cobri a maior parte do espaço alocado, optei por um ícone de cor sólida e brilhante e removi todos os sinais de texto menor.
A última etapa é baixar o arquivo. Você pode optar por torná-lo um PNG transparente neste ponto. Mas, para este tutorial, estou usando um JPG de alta resolução para que pareça o mais nítido possível. E não me importo de ter um fundo com uma cor sólida.
Volte para o seu Shopify painel de controle. Clique em Loja Online> Temas> Personalizar.
Em seguida, vá para Theme Settings> Favicon.
Faça upload desse novo Favicon e clique no botão Salvar no Shopify editor.
Novamente, a principal maneira de testar e visualizar seu Favicon é simplesmente abrir uma guia com o URL do site da sua página inicial. Como você pode ver, o Favicon aparece bem e na verdade é um pouco melhor do que o meu Favicon anterior, visto que aquele não preencheu todo o espaço 32 × 32 fornecido.
Conclusão
A Shopify O Favicon não leva mais do que alguns minutos para criar e adicionar ao seu site, mas fornece um lembrete maravilhoso para os visitantes em que site eles estão. Além disso, pode servir como uma forma de as pessoas encontrarem seu site em seus favoritos e históricos do navegador, considerando que é mais provável que estejam pesquisando em uma longa lista de outros sites ao passar por essas seções.
Lembre-se de que você não deve se contentar com um borrão ou ilegível Shopify Imagem Favicon. Se você achar que o primeiro Favicon não parece muito certo, ou se você gostaria de cortar algum texto ou adicionar um fundo transparente, volte ao início e acerte. Embora não seja uma boa ideia não ter nenhum Favicon, um Favicon borrado ou difícil de ver faz sua marca parecer pouco profissional e um tanto boba.
Se você tiver alguma dúvida sobre como adicionar Favicons ao Shopify, ou fazendo o seu próprio Shopify Favicon, avise-nos na seção de comentários abaixo.
Comentários Respostas 0