Como adicionar um Shopify Favicon para o seu Shopify Loja

Aprenda o básico do que é um Shopify Favicon e como colocá-lo em sua loja online.

Se você assinar um serviço de um link nesta página, a Reeves and Sons Limited pode ganhar uma comissão. Veja nosso Declaração de ética.

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.

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.

Shopify Exemplos de 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.

loja on-line

Na série Shopify personalizador, vá até o final da lista à esquerda e clique em Configurações do tema.

configurações de tema

Etapa 3: selecione o botão Favicon

Na nova seção, localize e selecione o botão Favicon.

ícone favorito Shopify 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.

selecione a imagem

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.

botão salvar

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.

exemplo Shopify favicon

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.
  • O Favicon fica ótimo quando você cobre cada pixel do espaço fornecido. Você não tem muito espaço, então você deve aproveitar cada square pixel no espaço de 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 arquivo ICO format 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 Loja

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.

baixar logo

Depois que o criador do logotipo faz seu trabalho, ele fornece um arquivo preenchido com vários logotipos formats, um dos quais é um Favicon.

Shopify Arquivo 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.

32 por 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, ampliei o design do Favicon para ter certeza de que se encaixa no square devidamente. Está embaçado, mas sei que ficará muito melhor quando eu diminuir o zoom.

versão grande

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.

versão 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.

baixar - Shopify favicon

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.

Pré-visualização de imagem

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.

o produto final - Shopify favicon

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.

Joe Warnimont

Joe Warnimont é um escritor baseado em Chicago que se concentra em ferramentas de comércio eletrônico, WordPress e mídia social. Quando não está pescando ou praticando ioga, ele coleciona selos em parques nacionais (mesmo que seja principalmente para crianças). Confira o portfólio de Joe para contatá-lo e ver o trabalho anterior.

Comentários Respostas 0

Deixe um comentário

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

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.