Como adicionar um favicon ao Shopify

Adicionar um favicon ao Shopify é uma personalização de tema simples. Você pode fazer upload de uma imagem do admin da Shopify sem editar o código do tema na maioria dos temas da Shopify. Neste tutorial, você aprenderá como preparar um favicon, adicioná-lo à sua loja Shopify, substituí-lo ou removê-lo, verificar se está funcionando e solucionar casos em que o favicon não aparece. Você também aprenderá o que fazer se o seu tema colocar a configuração do favicon em um local diferente.

Antes de começar, tenha uma imagem quadrada de favicon pronta. O Shopify recomenda um tamanho de favicon de 32 × 32 pixels, embora uma imagem de 16 × 16 pixels também esteja listada como tamanho ideal de favicon na documentação do Shopify. Imagens maiores que 32 × 32 pixels podem ser reduzidas para 32 × 32 pixels quando carregadas.

Como você adiciona um favicon ao Shopify?

Shopify fornece uma configuração de favicon por meio do editor de tema para lojas qualificadas. A localização exata da configuração pode variar de acordo com a versão do tema. As instruções atuais do Shopify colocam-no nas configurações do tema, onde pode aparecer como Favicon ou no logotipo.

1. Faça login no Shopify: Faça login no seu administrador do Shopify. Você precisa acessar a loja cujo favicon deseja alterar.
2. Abra Loja Online > Temas: No administrador do Shopify, acesse Loja Online > Temas. Localize o tema que você deseja modificar.
3. Abra o editor de temas: Clique Personalizar (ou Editar tema) ao lado do tema que você deseja personalizar. O importante é abrir o editor de temas do tema que você deseja alterar.
4. Abra as configurações do tema: Dentro do editor de temas, clique no botão Configurações de tema ícone (representado por um ícone de engrenagem no painel esquerdo).
5. Encontre a configuração do favicon: Dependendo da versão do seu tema, clique em Logotipo ou Favicon. Shopify observa especificamente que a localização pode variar dependendo da versão do tema. Não presuma que cada tema do Shopify exibirá uma configuração com nome idêntico no mesmo lugar.
6. Selecione sua imagem de favicon: Na seção de imagem do Favicon, clique em Selecione a imagem. Você pode então selecionar uma imagem que já foi enviada para seu administrador da Shopify ou clicar Adicionar imagens e carregue uma imagem do seu computador. Selecione o favicon que você preparou.
7. Clique em Concluído: Após selecionar a imagem, clique em Concluído. Shopify retornará você às configurações do favicon.
8. Adicione texto alternativo quando disponível: Alguns temas permitem adicionar texto alternativo ao favicon. Para fazer isso, clique Editar na seção de imagem do Favicon e insira uma breve descrição da imagem. Shopify observa que alguns temas oferecem essa opção. Um exemplo descritivo seria: Iniciais da marca em branco sobre fundo preto.
9. Salve suas alterações: Clique Salvar no canto superior direito. Isso aplica o favicon ao tema que você está editando.
10. Confira a loja ao vivo: Abra sua loja Shopify publicada em uma janela normal do navegador. Olhe para a aba do navegador e verifique se o seu novo favicon aparece ao lado do título da página. Não confie apenas na visualização dentro do editor de temas do Shopify. O Shopify observa que os favicons não são exibidos ao visualizar um tema por meio do Editor de temas porque o editor faz parte do administrador do Shopify, e não da vitrine ativa.

Onde está a configuração do favicon no Shopify?

Nas instruções atuais do Shopify, a configuração do favicon é acessada por meio do editor de temas:

Administrador do Shopify → Loja Online → Temas → Editar tema/Personalizar → Configurações do tema

A partir daí, a configuração pode aparecer como Favicon ou abaixo Logotipo, dependendo da versão do tema. Esta variação é importante porque um tutorial mais antigo pode solicitar que você clique no Favicon imediatamente, enquanto seu tema pode colocar a mesma opção dentro do Logo. Se você não conseguir encontrar a configuração, verifique o painel completo de configurações do tema em vez de procurar apenas um rótulo específico.

O Shopify também exige que os temas enviados à sua Loja de Temas tenham uma configuração de favicon, o que significa que se espera que os temas projetados para o ecossistema do Shopify forneçam suporte para essa personalização.

E se você não conseguir encontrar uma configuração de favicon?

Primeiro, confirme se você está editando o tema correto. Então verifique:

• Vá para Loja Online > Temas.
• Abra o tema que você realmente deseja publicar.
• Abrir Configurações de tema.
• Verifique ambos Favicon e Logotipo.
• Dê uma olhada no painel completo de configurações do tema. Alguns temas organizam suas configurações de maneira diferente.

Se o seu tema realmente não expõe uma configuração de favicon, o código do tema pode fornecer uma alternativa. Os temas do Shopify podem expor configurações globais por meio de settings_schema.json, e a documentação do desenvolvedor do Shopify mostra que as configurações do favicon podem ser renderizadas por meio do objeto de configurações globais do tema. A edição de código não deve ser a primeira opção quando o tema já oferece uma configuração de favicon.

Qual deve ser o tamanho de um favicon do Shopify?

Shopify recomenda 32 × 32 pixels para um favicon. Sua documentação de ajuda também identifica 16 × 16 pixels como o tamanho ideal do favicon e explica que imagens maiores podem ser reduzidas para 32 × 32 pixels quando carregadas.

A prioridade prática não é simplesmente escolher um número. A imagem deve permanecer reconhecível após ser exibida no tamanho do favicon. Por exemplo, um ícone de 32 × 32 pixels contendo o nome inteiro de uma empresa pode caber tecnicamente, mas ainda assim ser impossível de ler. Um símbolo simples com forte contraste pode funcionar muito melhor.

Como você cria um favicon para o Shopify?

Você tem várias opções dependendo dos ativos de marca que já possui.

Crie um favicon a partir do seu logotipo

Comece com a parte mais reconhecível do seu logotipo. Um logotipo horizontal contendo um símbolo e um nome de empresa longo geralmente deve ser simplificado, em vez de reduzido proporcionalmente, até que o texto se torne ilegível. Use o símbolo sozinho ou combine uma ou duas iniciais reconhecíveis.

Crie um favicon a partir das iniciais

Se sua empresa não possui um ícone distinto, crie um favicon simples usando uma ou duas letras. Por exemplo, E poderia representar uma marca chamada North Star. Use uma fonte clara, espaçamento suficiente e contraste forte.

Converta um PNG existente em um favicon

Se você já possui uma imagem PNG quadrada, pode convertê-la em uma arte pronta para favicon antes de carregá-la. Uma ferramenta como PNGtoFavicon.com pode converter um PNG em um favicon, o que é útil quando você já tem uma imagem de marca, mas precisa de uma versão dedicada do favicon.

Após a conversão, inspecione o ícone resultante em tamanho pequeno antes de carregá-lo no Shopify.

Crie um favicon especificamente para exibição em telas pequenas

Não reduza simplesmente o tamanho do seu logotipo sem verificar o resultado. Remova elementos desnecessários, aumente o contraste quando necessário e certifique-se de que a parte importante do ícone permaneça visível. O favicon tem sucesso quando um visitante consegue identificar sua marca a partir do pequeno ícone sem precisar aumentar o zoom.

Como você verifica se o seu favicon do Shopify está funcionando?

Depois de salvar o favicon, verifique-o na loja ao vivo.

• Verifique a guia do navegador: Abra a loja publicada e procure ao lado do título da página na guia do navegador. Shopify identifica a guia do navegador como um dos principais locais onde um favicon aparece.
• Verifique o histórico do navegador: Visite outra página, volte à sua loja e verifique as entradas do histórico do navegador. Shopify lista o histórico do navegador como outro local onde um favicon pode aparecer.
• Verifique um marcador: Adicione a loja aos favoritos e verifique se o favicon aparece ao lado do favorito. O Shopify identifica especificamente as lojas marcadas como outro local onde o favicon pode ser exibido.
• Teste uma janela privada ou anônima: Se o favicon antigo ainda estiver visível em seu navegador normal, abra uma janela privada ou anônima e visite a loja ativa. Isso ajuda a separar um problema de cache do navegador de um problema de configuração do Shopify.
• Teste outro navegador: Abra a loja em outro navegador de desktop. Se o novo ícone aparecer em um navegador, mas não em outro, o cache do navegador ou o comportamento específico do navegador é uma explicação mais provável do que uma falha no upload do Shopify.
• Verifique o comportamento do celular: Não presuma que os navegadores de desktop e móveis exibirão o favicon de forma idêntica. Mais importante ainda, diferencie a vitrine ativa das interfaces administrativas do Shopify. Shopify afirma que os favicons não aparecem na visualização do Editor de Tema em si.

Por que meu favicon do Shopify não está aparecendo?

Vários problemas diferentes podem produzir o mesmo sintoma.

Como você corrige um favicon do Shopify que não está sendo atualizado?

Faça essas verificações em ordem:

1. Abrir Loja Online > Temas.
2. Confirme se você está editando o tema correto.
3. Abrir Configurações de tema.
4. Verifique o Favicon ou Logotipo configuração.
5. Confirme se a imagem correta está selecionada.
6. Clique Salvar.
7. Abra a vitrine publicada, não o Editor de temas.
8. Teste o site em uma janela privada ou anônima do navegador.
9. Teste outro navegador.
10. Verifique o favicon novamente na guia do navegador.

Essa sequência ajuda a identificar se o problema vem das configurações do Shopify, do tema selecionado ou do cache do navegador.

Como você altera ou substitui um favicon do Shopify?

A substituição de um favicon usa as mesmas configurações de tema do upload inicial.

• Faça login no seu administrador do Shopify.
• Vá para Loja Online > Temas.
• Encontre o tema que deseja atualizar.
• Clique em Editar tema/Personalizar.
• Abra as configurações do tema.
• Clique em Logo ou Favicon, dependendo do seu tema.
• Na seção de imagem do Favicon, clique em Selecionar imagem.
• Escolha o favicon substituto ou carregue uma nova imagem.
• Clique em Concluído.
• Clique em Salvar.
• Abra a loja ativa e verifique o novo ícone.

A documentação atual do Shopify confirma esse fluxo de trabalho e a variação do logotipo/favicon dependente do tema.

Como você remove um favicon do Shopify?

O processo de remoção depende dos controles expostos pelo seu tema.

Abrir:

Loja Online → Temas → Editar tema/Personalizar → Configurações do tema

Em seguida, abra a área Favicon ou Logo e procure o controle associado à imagem do favicon atualmente selecionada.

Se o seu tema oferece uma opção de remover ou limpar, use-a e salve o tema. Não adicione código personalizado simplesmente para remover um favicon quando seu tema já fornece uma configuração para gerenciá-lo.

Você pode adicionar um favicon do Shopify com código personalizado?

Sim, mas a maioria das lojas deve usar primeiro a configuração de tema integrada.

A arquitetura de tema do Shopify oferece suporte a configurações globais por meio de settings_schema.json. Um tema pode definir uma configuração de imagem de favicon e acessar seu valor através do objeto de configurações do Liquid. A documentação do desenvolvedor do Shopify inclui um exemplo que renderiza um favicon PNG de settings.favicon.

Para um tema personalizado, o código pode, portanto, fazer parte da implementação. Para uma loja normal do Shopify, entretanto, editar o Liquid apenas para adicionar um favicon é desnecessário quando o tema já fornece a configuração.

Quando você deve usar configurações de tema em vez de código?

Use a configuração de tema integrada quando estiver disponível. É mais fácil de gerenciar, tem menos probabilidade de introduzir erros de tema e pode ser alterado posteriormente sem modificar os arquivos Liquid.

O que você deve verificar antes de editar o código do tema?

Se você precisar editar o código, primeiro identifique o tema publicado, a implementação do favicon do tema, o arquivo de layout relevante, se já existe uma configuração global de favicon e se o tema é atualizado ou mantido por outro desenvolvedor. Não cole o código do favicon em um arquivo de tema aleatório sem entender como o tema lida com as configurações globais.

Erros comuns de favicon do Shopify a serem evitados

• Usando todo o seu logotipo: Um logotipo longo pode se tornar ilegível quando reduzido às dimensões do favicon.
• Usando texto minúsculo: Uma ou duas iniciais podem funcionar. Um slogan completo geralmente não funciona.
• Usando uma imagem complicada: Uma simples marca de marca é mais fácil de reconhecer do que uma ilustração detalhada.
• Usando uma imagem não quadrada: Comece com arte quadrada para que o favicon não dependa de cortes ou redimensionamentos agressivos.
• Usando uma fonte de baixa qualidade: Uma imagem de origem borrada produzirá um favicon de baixa qualidade, mesmo após o redimensionamento.
• Esquecendo de salvar: Selecionar uma imagem não é suficiente. Salve as alterações do tema.
• Verificando apenas o Editor de Temas: O favicon pode não aparecer na visualização do Editor de temas do Shopify. Em vez disso, teste a vitrine publicada.
• Verificando apenas um navegador: Um favicon desatualizado em um navegador não significa automaticamente que a configuração do Shopify está errada.
• Testando um tema não publicado: Você pode personalizar um tema que não esteja ativo no momento, mas isso não altera o favicon que os visitantes veem na vitrine publicada.
• Editando código desnecessariamente: Se o tema já tiver uma configuração de favicon, use-a em vez de alterar o Liquid.

Perguntas frequentes sobre favicons do Shopify

Como criar um favicon antes de enviá-lo para o Shopify

Se você ainda não possui um favicon, use este fluxo de trabalho simples:

1. Comece com seu logotipo, símbolo de marca ou iniciais.
2. Crie uma versão quadrada do design.
3. Remova detalhes que desaparecerão em tamanhos pequenos.
4. Use forte contraste entre o ícone e o fundo.
5. Prepare a imagem em torno do tamanho de 32 × 32 pixels recomendado pelo Shopify ou use uma fonte maior e limpa que o Shopify possa reduzir.
6. Converta um PNG existente com uma ferramenta favicon quando necessário.
7. Carregue a imagem finalizada através das configurações do tema.
8. Salve o tema.
9. Teste o favicon na vitrine ao vivo.

Conclusão

Adicionar um favicon ao Shopify é principalmente uma tarefa do editor de tema. Abra Loja Online> Temas, edite o tema relevante, abra as configurações do tema, encontre Favicon ou Logotipo, selecione sua imagem e salve o tema. Use um ícone quadrado simples que permaneça reconhecível em um tamanho muito pequeno. Quando o novo favicon não aparecer imediatamente, verifique a loja publicada em uma janela privada ou em outro navegador antes de alterar novamente as configurações do Shopify. O cache do navegador pode fazer com que um favicon atualizado com sucesso pareça inalterado.