Favicon para Shopify
Shopify permite fazer upload de um favicon do editor de tema em segundos. Todo tema Shopify moderno expõe um campo Favicon nas configurações do tema, e o CDN do Shopify exibe o ícone em todas as páginas da sua loja. Use favicon generator para criar um quadrado 512×512 PNG primeiro – Shopify irá redimensioná-lo para o tamanho de exibição 32×32 necessário automaticamente.
Um favicon é um dos primeiros sinais de marca que um cliente em potencial vê ao abrir várias guias. Nas lojas Shopify, o favicon aparece na guia do navegador, na barra de favoritos e na barra de endereço. Um favicon nítido e reconhecível reforça a confiança na marca e ajuda os compradores a encontrar a aba da sua loja rapidamente entre dezenas de abas abertas.
Cada tema Shopify moderno (Dawn, Refresh e a maioria dos temas premium) inclui um campo Favicon no Theme Editor em Configurações do tema. Para acessá-lo, faça login em seu administrador Shopify, vá para Loja Online > Temas e clique em Personalizar ao lado do seu tema ao vivo. Na barra lateral esquerda, clique em Configurações do tema (ou no ícone de engrenagem) e procure a seção Favicon.
Shopify recomenda fazer upload de um PNG quadrado de 32×32 pixels para o campo favicon. Na prática, carregar um PNG 512×512 produz um resultado mais nítido porque Shopify reduz a resolução para 32×32 com melhor qualidade do que se você começar com um original 32×32. Sempre comece com a maior fonte quadrada que você tiver – o gerador torna isso mais fácil.
Após enviar seu favicon, clique em Salvar no canto superior direito do Theme Editor. Shopify processa a imagem, carrega-a em seu CDN e a propaga em todas as páginas da loja em poucos minutos. Você não precisa republicar seu tema ou fazer qualquer outra alteração no código.
Temas Shopify mais antigos ou altamente personalizados podem não expor um campo Favicon nas configurações do tema. Nesse caso, você precisa editar diretamente o código Liquid do tema. Abra o editor de arquivo de tema (Loja Online > Temas > Editar Código), encontre o arquivo theme.liquid e localize a seção `<head>`. Insira `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` após enviar seu favicon.png para a pasta Assets do tema.
Para lojas Shopify na estrutura de tema 2.0, o favicon é gerenciado por meio do site.webmanifest que Shopify gera automaticamente a partir das configurações do seu tema. Se sua loja usa um shell Progressive Web App, o manifesto do Shopify inclui o favicon como ícone do aplicativo. Atualizar o favicon do tema atualiza automaticamente o ícone do manifesto – nenhuma edição JSON extra é necessária.
Fundos transparentes funcionam corretamente em favicons Shopify. O editor de tema preserva o canal alfa PNG ao fazer upload para o CDN. No entanto, se o seu logotipo tiver fundo branco, ele aparecerá com uma caixa branca nas guias do navegador no modo escuro. Exporte seu logotipo sem preenchimento de fundo antes de carregá-lo para evitar isso.
Se você administra várias lojas Shopify (uma configuração comum para vitrines internacionais), cada loja deverá ter seu favicon definido de forma independente. O favicon é uma configuração por loja, não um parceiro Shopify ou uma configuração em nível de organização. Faça login no administrador de cada loja e repita as etapas Theme Editor.
A invalidação do cache pode atrasar as atualizações do favicon em Shopify. O CDN do Shopify armazena ativos em cache com TTLs longos. Depois de alterar o favicon, os navegadores podem continuar exibindo o antigo por horas. Abra uma janela privada/anônima para ver o ícone atualizado sem interferência de cache. Alternativamente, instrua seu navegador para atualizar (Ctrl+Shift+R em Windows, Cmd+Shift+R no Mac).
Shopify não injeta nativamente um apple-touch-icon ou uma tag de link de manifesto de aplicativo da web, a menos que seu modelo de tema os inclua. Se você deseja que as instalações da tela inicial do iOS mostrem seu logotipo em vez de uma captura de tela da página, adicione a tag apple-touch-icon manualmente em Loja Online > Temas > Editar Código > theme.liquid. Coloque `<link rel='apple-touch-icon' tamanhos='180x180' href='{{ 'apple-touch-icon.png' | asset_url }}'>` na seção `<head>` e carregue o PNG 180×180 para Assets.
Para lojas Shopify Plus, você pode usar a marca de checkout para personalizar o favicon no fluxo de checkout separadamente do favicon da vitrine principal. A marca do Checkout é configurada em Configurações > Checkout e contas > Personalizar. Isso permite que suas páginas de checkout mostrem um favicon diferente da loja principal, o que é útil para configurações multimarcas.
Para verificar se seu favicon Shopify está funcionando, use live favicon tester e insira o URL da sua loja. O testador confirma que o ícone está acessível publicamente e mostra como ele é renderizado em 16, 32 e 48 pixels. Verifique também best favicon size para entender quais tamanhos adicionais melhorariam sua experiência de instalação do PWA.
Erros comuns de favicon Shopify incluem o upload de um logotipo retangular sem cortá-lo primeiro em um quadrado (produz um ícone comprimido), o upload de uma imagem muito pequena (desfoque nas telas retina) e o esquecimento de clicar em Salvar após o upload (a alteração não é confirmada até que você salve explicitamente). O favicon generator exporta um PNG devidamente quadrado em 512×512 pronto para upload direto de Shopify.
Como funciona
- 1
Gere um quadrado PNG de 512×512
Use o [favicon generator](tool:favicon-generator) com seu logotipo ou marca. Exporte 512×512 PNG do pacote de download – este é o tamanho de entrada correto para Shopify.
- 2
Abra seu tema no Theme Editor
No admin do Shopify, vá para Loja Online > Temas e clique em Personalizar ao lado do seu tema ao vivo.
- 3
Navegue até Configurações do tema > Favicon
Na barra lateral esquerda, clique em Configurações do tema (o ícone de engrenagem na parte inferior na maioria dos temas) e procure a seção Favicon ou Marca. O rótulo exato varia de acordo com o tema.
- 4
Carregue seu PNG e salve
Clique no campo de upload do favicon, selecione 512×512 PNG e confirme. Clique em Salvar no canto superior direito. Shopify carrega o ícone em seu CDN e o propaga por todas as páginas.
- 5
Verifique em uma janela anônima
Abra uma janela privada/anônima do navegador e navegue até o URL da sua loja. Confirme se o novo favicon aparece na guia do navegador. Use o [favicon tester](utility:favicon-tester) para uma verificação externa rápida.
Experimente agora
Gere um favicon pronto para Shopify
Gerador de FaviconPerguntas frequentes
Onde adiciono um favicon em Shopify?+
Loja Online > Temas > Personalizar > Configurações do Tema > Favicon. Faça upload de um PNG quadrado (recomendado 512 × 512), clique em Salvar e Shopify injeta o ícone em cada página da loja automaticamente.
Qual tamanho de favicon o Shopify usa?+
Shopify exibe o favicon em 32×32 pixels nas guias do navegador. Faça upload de 512×512 para obter o resultado mais nítido – Shopify reduz a resolução para 32×32. Nunca carregue uma fonte menor que 32×32 ou ela parecerá desfocada.
Por que meu favicon Shopify parece desfocado ou esticado?+
Você provavelmente carregou uma imagem não quadrada ou uma fonte muito pequena. Corte seu logotipo em um quadrado perfeito antes de carregá-lo e comece com pelo menos 256×256 pixels. O [favicon generator](tool:favicon-generator) produz automaticamente um quadrado 512×512 PNG pronto para Shopify.
Por que meu novo favicon Shopify não está sendo exibido?+
Navegadores e caches CDN atrasam as atualizações. Abra uma janela anônima/privada e navegue até o URL da sua loja para ver o favicon atualizado sem interferência de cache. Se ainda mostrar o ícone antigo na navegação normal, aguarde algumas horas até que o cache do CDN expire.
Posso adicionar um apple-touch-icon à minha loja Shopify?+
Sim, mas requer edição manual de código. Faça upload de um apple-touch-icon.png de 180×180 para a pasta Assets do seu tema e adicione `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>` em theme.liquid dentro da seção `<head>`.
Shopify suporta favicons SVG?+
O upload do favicon Theme Editor integrado não aceita SVG. Para usar um favicon SVG, adicione a tag do link manualmente em theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` após fazer upload do SVG para a pasta Assets.
Preciso que um desenvolvedor altere meu favicon Shopify?+
Não. Usando o Theme Editor (Loja Online > Temas > Personalizar > Configurações do Tema > Favicon), você pode carregar e salvar um novo favicon em menos de dois minutos sem código. O acesso do desenvolvedor só é necessário para adições SVG ou apple-touch-icon.