Adicione um favicon ao Espaço quadrado

Atualize a estética do seu site. Aprenda como configurar um favicon de aba limpa nas configurações do Squarespace.

Adicionar um favicon ao Squarespace leva apenas alguns minutos. Você precisa de uma imagem de favicon adequada, acesso ao site correto do Squarespace e a capacidade de abrir suas configurações de favicon. Neste guia, você aprenderá como preparar um favicon, carregá-lo no Squarespace, verificar se funciona, substituí-lo ou removê-lo e solucionar casos em que o novo ícone não aparece imediatamente.

O que é um favicon do Squarespace?

Um favicon, também chamado de ícone do navegador, é a pequena imagem quadrada associada ao seu site. Geralmente aparece próximo ao título da página nas guias e favoritos do navegador. Dependendo do navegador ou dispositivo, ele também pode aparecer em outras interfaces de navegador e, às vezes, em resultados de pesquisa.

Todo site do Squarespace começa com o cubo favicon padrão do Squarespace, a menos que você adicione um personalizado. Substituí-lo por seu próprio ícone fornece aos visitantes um identificador visual reconhecível do seu site.

Um favicon é separado do logotipo do seu site. Seu logotipo pode aparecer com destaque no cabeçalho do seu site, enquanto o favicon foi projetado para permanecer reconhecível em um tamanho muito pequeno.

O que você deve preparar antes de adicionar um favicon ao Squarespace?

Antes de abrir o Squarespace, prepare a imagem que deseja usar como favicon. A orientação atual do favicon do Squarespace recomenda o seguinte:

  • Usar PNG: O Squarespace recomenda arquivos .png para favicons e não permite o upload de arquivos .ico.
  • Use uma imagem quadrada: Uma tela quadrada funciona melhor porque os favicons são exibidos como pequenos ícones quadrados.
  • Procure 100 × 100 px a 300 × 300 px: O Squarespace recomenda esse intervalo para imagens de favicon. Embora os favicons possam ser exibidos em dimensões muito pequenas, como 16 × 16 px, uma imagem de origem maior dentro desse intervalo funciona melhor em todos os navegadores.
  • Mantenha o arquivo com menos de 100 KB: O Squarespace afirma que os arquivos favicon não podem exceder 100 KB.
  • Use um design simples: Um favicon é muito menor que um logotipo normal, então ilustrações complicadas e textos longos podem se tornar irreconhecíveis.
  • Use contraste forte: O ícone deve permanecer distinguível das interfaces claras e escuras do navegador.
  • Evite detalhes excessivos: Linhas finas, letras pequenas e vários elementos visuais são difíceis de identificar no tamanho do favicon.
  • Comece com uma fonte de alta qualidade: Reduzir a escala de uma fonte limpa e nítida geralmente produz um resultado melhor do que ampliar uma imagem minúscula.

Qual formato de arquivo o Squarespace recomenda?

Especificamente para um favicon, o Squarespace recomenda PNG e não suporta o upload de um arquivo .ico por meio de seu uploader de favicon.

Não confunda o suporte geral ao upload de imagens do Squarespace com requisitos específicos de favicon. O Squarespace oferece suporte a vários formatos em outras áreas de imagem, mas sua documentação de favicon recomenda especificamente PNG.

Como você adiciona um favicon ao Squarespace?

O processo atual do Squarespace usa um painel Favicon dedicado. A rota exata para esse painel pode variar dependendo da interface do Squarespace que você está usando, portanto, concentre-se em localizar o favicon do site ou a configuração do ícone do navegador, em vez de depender de um caminho de menu antigo.

  1. Faça login no Squarespace: Abra o Squarespace e faça login na conta que gerencia seu site. Certifique-se de ter permissões de edição para o site cujo favicon você deseja alterar.
  2. Abra o site correto: No painel da sua conta Squarespace, abra o site que deseja editar. Isso é importante se sua conta gerencia vários sites do Squarespace. Carregar um favicon para um site não alterará o favicon de outro site.
  3. Abra as configurações do favicon: Navegue pelas configurações do site ou controles de design até chegar ao painel Favicon. A documentação de ajuda atual do Squarespace refere-se a este destino especificamente como painel Favicon. Tutoriais mais antigos podem descrever a configuração com rótulos como Ícone do navegador ou colocá-la em diferentes áreas da interface. Não presuma que um caminho mais antigo ainda é idêntico na sua conta.
  4. Carregue seu favicon: Dentro do painel Favicon, arraste sua imagem de favicon para o uploader ou clique no uploader para selecionar o arquivo em seu computador. Selecione o favicon PNG que você preparou. Aguarde o upload terminar. Verifique se a imagem enviada aparece na área do favicon. Atualmente, o Squarespace oferece suporte a um favicon alternativo opcional para o modo escuro. Um favicon padrão deve ser adicionado antes de você adicionar a versão no modo escuro.
  5. Salve as alterações: Clique em Salvar após o upload da imagem. Salvar é importante porque carregar ou selecionar a imagem por si só não substitui o favicon publicado até que a alteração seja salva. As instruções atuais do Squarespace direcionam especificamente os usuários a clicarem em Salvar após o upload das imagens.
  6. Abra seu site e verifique a guia do navegador: Abra o URL publicado do seu site em um navegador. Observe a guia do navegador ao lado do título da página. Seu novo favicon deve substituir o ícone padrão do Squarespace.

Se você ainda vir o favicon anterior, não presuma imediatamente que o upload falhou. Os navegadores podem armazenar favicons de forma agressiva, de modo que o ícone antigo pode continuar aparecendo mesmo depois que o novo favicon tiver sido salvo com sucesso.

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

A interface mudou com o tempo, e é por isso que diferentes tutoriais do Squarespace podem mostrar diferentes caminhos de navegação. A documentação atual do Squarespace identifica o destino como o painel Favicon.

Você pode encontrar instruções mais antigas referentes a:

  • Ícone do navegador
  • Logotipo e título
  • Projeto
  • Uma configuração de ícone do navegador nos controles de design ou branding do site

Esses rótulos não devem ser tratados como universalmente atuais. O Squarespace pode alterar a localização ou a nomenclatura dos controles entre interfaces e versões da plataforma. A configuração importante é aquela destinada especificamente ao favicon ou ícone do navegador do site. Não é a mesma configuração do logotipo do site ou do título da página.

Como você cria um favicon para o Squarespace?

Você não precisa criar um favicon do zero. A abordagem mais simples depende de quais ativos de marca você já possui.

Crie um favicon a partir do seu logotipo

Se você já possui um logotipo, crie uma versão quadrada simplificada dele. Não use automaticamente todo o logotipo horizontal. Um nome comercial longo pode se tornar ilegível quando reduzido às dimensões do favicon. Uma abordagem melhor geralmente é usar um símbolo reconhecível do logotipo, uma única inicial, um monograma ou uma marca simplificada.

Crie um favicon a partir de texto ou iniciais

Para um favicon baseado em texto, use uma ou duas letras em destaque em vez do nome comercial inteiro. Por exemplo, uma empresa chamada Digital Marketing Solutions poderia usar DM em vez de tentar encaixar o nome completo no ícone. Use uma fonte simples e em negrito e contraste suficiente para manter as letras reconhecíveis.

Converta um PNG existente em um favicon

Se você já possui um logotipo ou ícone PNG adequado, pode convertê-lo em arte pronta para favicon usando uma ferramenta de conversão de imagem. Por exemplo, PNGtoFavicon.com pode converter uma imagem PNG em um favicon. Isso é útil quando você já possui um PNG quadrado, mas precisa de um arquivo orientado a favicon para o seu site.

Antes de enviar o resultado para o Squarespace, verifique se a imagem final atende aos requisitos de favicon do Squarespace, principalmente o formato PNG, dimensões quadradas e tamanho máximo de arquivo de 100 KB.

Mantenha o design reconhecível em tamanhos pequenos

O teste de design mais importante é simples: reduza substancialmente o ícone e olhe para ele sem aumentar o zoom. Se você não conseguir identificar o símbolo ou letra rapidamente, simplifique-o. Um favicon normalmente funciona melhor como uma marca visual em negrito do que como uma versão em miniatura de todo o seu logotipo.

Como você verifica se o seu Squarespace Favicon está funcionando?

Depois de salvar o favicon, verifique-o no site publicado.

  • Verifique a guia do navegador: Abra seu site e observe o ícone ao lado do título da página na guia do navegador. Este é o teste mais direto porque as guias do navegador são um dos principais locais onde os favicons aparecem.
  • Teste uma nova sessão do navegador: Se o ícone antigo permanecer visível, abra uma janela privada ou anônima, visite seu site e verifique a guia do navegador novamente. Isso ajuda a determinar se o problema é causado por dados de favicon armazenados em cache na sessão normal do navegador.
  • Verifique outro navegador de desktop: Teste o site em outro navegador, como Chrome, Edge, Firefox ou Safari. Um favicon exibido corretamente em um navegador, mas não em outro, pode indicar cache específico do navegador ou comportamento de exibição, em vez de um problema de upload do Squarespace. O Safari pode exibir ícones favoritos de maneira diferente de outros navegadores. O Squarespace observa que o Safari pode mostrar o favicon quando você clica na barra de endereço ou quando várias guias estão abertas, e pode adicionar uma borda ou fundo para contraste.
  • Verifique no celular: Não trate a ausência de um favicon em um navegador móvel como prova de que o upload falhou. O Squarespace afirma que a exibição do favicon no celular depende do navegador do celular e, em alguns casos, o favicon nem será exibido.

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

Um favicon que não aparece imediatamente geralmente é um problema de cache ou configuração, e não um motivo para reconstruir o site inteiro.

Cache do navegador

Problema: Seu navegador ainda está exibindo o antigo favicon.
Consertar: Limpe o cache do navegador, feche e reabra o navegador e visite novamente o seu site. O Squarespace recomenda especificamente limpar o cache do navegador e reiniciá-lo quando um favicon não for atualizado imediatamente.

O favicon não foi salvo

Problema: A imagem foi carregada, mas a alteração não foi salva.
Consertar: Retorne ao painel Favicon, confirme se a imagem correta está presente e clique em Salvar.

Você editou o site errado

Problema: O favicon parece inalterado porque a imagem foi carregada em outro site do Squarespace na sua conta.
Consertar: Confirme o nome do site e o domínio antes de alterar o favicon.

A imagem não atende aos requisitos do favicon

Problema: O arquivo é muito grande, usa um formato inadequado ou possui dimensões que produzem um resultado ruim.
Consertar: Exporte novamente a imagem como PNG, mantenha-a abaixo de 100 KB e use uma imagem quadrada entre 100 × 100 px e 300 × 300 px, conforme recomendado pelo Squarespace.

O favicon foi alterado recentemente

Problema: O Squarespace salvou o novo favicon, mas seu navegador ainda mostra uma versão mais antiga.
Consertar: Teste em uma janela anônima/privada ou em outro navegador antes de fazer alterações adicionais.

Você está testando o domínio ou página errada

Problema: Você está verificando um domínio de teste, de visualização, integrado ao Squarespace ou um domínio diferente daquele que você editou.
Consertar: Abra o URL exato do site publicado associado ao site do Squarespace que você alterou.

Comportamento do navegador móvel

Problema: O favicon aparece na área de trabalho, mas não no telefone.
Consertar: Verifique o mesmo site em um navegador de desktop antes de presumir que o upload falhou. O comportamento do favicon móvel varia de acordo com o navegador, e o Squarespace observa que os navegadores móveis podem não exibir nenhum favicon.

Quanto tempo leva para um favicon do Squarespace ser atualizado?

Existem três eventos separados para distinguir:

  1. Squarespace salva o favicon: Isso acontece quando você carrega a imagem e salva as configurações do favicon.
  2. Seu site exibe o novo favicon: A configuração do site salva deve fornecer o ícone atualizado aos visitantes.
  3. Seu navegador exibe o novo favicon: O navegador pode continuar usando um favicon previamente armazenado em cache.

Como os navegadores podem reter dados de favicon, não existe um tempo de atualização universal confiável que garanta que o novo ícone aparecerá imediatamente. O Squarespace alerta especificamente que os navegadores podem ser persistentes em relação aos favicons armazenados em cache. Teste uma janela privada do navegador ou um navegador diferente antes de concluir que a alteração falhou.

Como você altera ou substitui um favicon do Squarespace?

A substituição de um favicon existente segue essencialmente o mesmo processo de adição de um pela primeira vez.

  • Faça login no Squarespace.
  • Abra o site que você deseja alterar.
  • Abra o painel Favicon.
  • Selecione o uploader de favicon existente.
  • Carregue a nova imagem PNG. (Se você usar um favicon de modo escuro, atualize essa versão separadamente conforme necessário.)
  • Clique em Salvar.
  • Abra o site publicado e verifique a guia do navegador. Teste em uma janela privada se o favicon anterior continua aparecendo.

O Squarespace permite um favicon de modo escuro opcional, mas o favicon padrão deve existir antes que uma versão alternativa de modo escuro possa ser adicionada.

Como você remove um favicon do Squarespace?

Se você quiser parar de usar seu favicon personalizado, abra as configurações do favicon e procure o controle de remoção ou exclusão disponível próximo à imagem enviada. O controle exato pode variar de acordo com a interface atual do Squarespace, portanto, não confie em um tutorial mais antigo que especifica um nome de botão específico.

Após remover o favicon personalizado, salve as configurações e teste o site novamente. O Squarespace afirma que sites sem um favicon personalizado começam com seu favicon de cubo padrão.

Erros comuns do favicon do Squarespace a serem evitados

  • Usando uma imagem complicada: Simplifique o design para que o ícone permaneça reconhecível em tamanho pequeno.
  • Usando uma pequena imagem de origem: Comece com uma fonte limpa e de tamanho adequado, em vez de ampliar uma imagem de baixa resolução.
  • Contraste ruim: Um ícone que se mistura ao plano de fundo do navegador pode parecer invisível.
  • Usando muito texto: Os nomes completos das empresas raramente permanecem legíveis em um favicon.
  • Carregando o tipo de arquivo errado: O Squarespace recomenda PNG para favicons e não permite uploads de .icon.
  • Excedendo o limite de tamanho de arquivo: Os arquivos Favicon não podem exceder 100 KB.
  • Esquecendo de salvar: Sempre salve após a conclusão do upload da imagem.
  • Verificando apenas um navegador: Use outro navegador ou uma janela privada ao testar.
  • Presumir que um ícone em cache significa que o upload falhou: Limpe o cache antes de fazer alterações desnecessárias.
  • Esperando que os navegadores móveis se comportem como navegadores de desktop: O suporte e a exibição do favicon móvel variam de acordo com o navegador.

Perguntas frequentes sobre favicons do Squarespace

Posso adicionar um favicon PNG ao Squarespace?

Sim. O Squarespace recomenda PNG para uploads de favicons. A documentação atual do favicon do Squarespace também afirma que os arquivos .icon não podem ser carregados por meio da configuração do favicon.

Qual deve ser o tamanho de um favicon do Squarespace?

O Squarespace recomenda fazer upload de um favicon entre 100 × 100 px e 300 × 300 px. Ele também afirma que o arquivo favicon não deve ter mais de 100 KB.

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

A explicação mais comum é o cache do navegador. Limpe o cache do navegador, reinicie-o ou teste o site em uma janela privada ou em outro navegador. Confirme também se você salvou o favicon e está verificando o site publicado correto.

Posso alterar meu favicon do Squarespace?

Sim. Abra o painel Favicon, carregue a imagem de substituição e salve a alteração.

O Squarespace redimensiona automaticamente um favicon?

A documentação atual do Squarespace recomenda o upload da arte do favicon entre 100 × 100 px e 300 × 300 px, ao mesmo tempo em que observa que os favicons são exibidos em tamanhos muito pequenos, como 16 × 16 px. A abordagem mais segura é preparar a imagem em um tamanho quadrado apropriado, em vez de depender de um pequeno arquivo de origem.

Como faço um favicon para o Squarespace?

Crie um ícone quadrado simples a partir do seu logotipo, iniciais ou símbolo de marca reconhecível. Exporte-o como PNG, mantenha-o abaixo de 100 KB e use dimensões entre 100 × 100 px e 300 × 300 px. Uma ferramenta de conversão como PNGtoFavicon.com pode ajudar a transformar um PNG existente em uma arte pronta para favicon.

Quanto tempo leva para um favicon do Squarespace ser atualizado?

Não existe um horário universal confiável para a atualização da tela do navegador. O Squarespace pode salvar a alteração imediatamente, mas o navegador pode continuar exibindo uma versão em cache do favicon anterior. Limpe o cache ou teste em uma janela privada ao verificar a atualização.

Posso usar meu logotipo como favicon do Squarespace?

Sim. Um logotipo pode ser usado como favicon, mas deve ser simplificado quando necessário para que permaneça reconhecível em pequenas dimensões. O Squarespace também observa que sua própria ferramenta Squarespace Logo pode criar logotipos PNG que podem ser usados ​​como favicons.

Conclusão

Para adicionar um favicon ao Squarespace, prepare um PNG quadrado simples, abra o painel Favicon do site, carregue a imagem e salve a alteração. Em seguida, verifique-o em uma guia do navegador. O ponto de solução de problemas mais importante é o cache. Um upload de favicon bem-sucedido pode não aparecer imediatamente porque os navegadores podem reter o favicon anterior. Teste em uma janela privada, limpe o cache ou verifique outro navegador antes de presumir que o upload do Squarespace falhou.