Como Adicionar um Favicon ao Seu Site no Framer

Para adicionar um favicon no Framer: Abra as Configurações do Site (⌘ + ,), role até "Site Images" → "Favicon", faça upload de um arquivo PNG de 64x64 pixels e publique seu site. É só isso.

Agora vamos cobrir os detalhes e resolver qualquer problema que você possa encontrar.

Especificações de Favicon para o Framer

O Framer exige especificações específicas para favicon:

• Tamanho: 64 x 64 pixels
• Formato: PNG (recomendado)
• Fundo: Transparente

Passo 1: Abra as Configurações do Site

Duas formas de acessar as configurações:

• Atalho de teclado: Pressione ⌘ + , (Mac) ou Ctrl + , (Windows)
• Menu: Clique no ícone do Framer → Site Settings → Open Settings

Passo 2: Encontre a Seção do Favicon

• Role para baixo até "Site Images"
• Localize a área de upload do "Favicon"

Passo 3: Faça Upload do Seu Favicon

O Framer oferece dois campos de upload:

• Favicon para Tema Claro: Exibido em navegadores no modo claro
• Favicon para Tema Escuro: Exibido em navegadores no modo escuro

Faça upload da mesma imagem em ambos os campos se você tiver apenas uma versão.

Passo 4: Publique Seu Site

• Clique no botão Publish
• O favicon só aparece no site publicado, não na pré-visualização

Suporte para Modo Claro e Escuro

Por Que Usar Duas Versões?

• Logos escuros desaparecem em abas escuras do navegador
• Logos claros desaparecem em abas claras do navegador
• Versões separadas garantem visibilidade em todos os modos

Como Criar as Versões

1. Comece com seu favicon normal
2. Inverta as cores para a versão alternativa
3. Mantenha o mesmo formato e design
4. Use fundos transparentes em ambas

Configuração do Apple Touch Icon

Desde setembro de 2024, o Framer suporta ícones Apple touch:

• Localização: Mesma seção Site Images
• Tamanho: 180 x 180 pixels
• Função: Ícone da tela inicial em dispositivos iOS

Solução de Problemas: Favicon Não Aparece

Verifique o Básico

• Você publicou o site?
• Atualize forçadamente: Cmd+Shift+R ou Ctrl+Shift+R
• Tente uma janela anônima

Verifique o Local de Upload

• Deve estar em Site Settings, não nas configurações da página
• O arquivo deve ser um PNG válido

Solução de Problemas: Google Mostra o Favicon Antigo

O Google atualiza favicons lentamente (dias a semanas).

Passos para Acelerar

1. Certifique-se de que o favicon está no ar no seu site
2. Abra o Google Search Console
3. Use a ferramenta de Inspeção de URL na página inicial
4. Solicite a indexação

Solução de Problemas: Problemas no Safari

O Safari armazena favicons em cache de forma agressiva.

Passos para Corrigir

1. Limpe o cache do Safari completamente
2. Delete o cache de favicons: ~/Library/Safari/Favicon Cache/
3. Feche e reabra o Safari

Solução de Problemas: Logo do Framer Ainda Aparece

Causas comuns:

• Site não publicado após o upload do favicon
• Problema de cache do navegador
• Visualizando a pré-visualização em vez do site publicado

Solução: Publique o site e limpe o cache do navegador.

Boas Práticas

• Faça backup dos arquivos: Mantenha os arquivos originais do favicon salvos
• Teste em todos os lugares: Verifique no Mac, Windows, iOS, Android
• Use ferramentas de verificação: Favicon.im valida sua configuração
• Documente as cores: Registre os códigos hex exatos para consistência da marca

Perguntas Frequentes

Como adiciono um favicon no Framer?

Abra as Configurações do Site com ⌘ + ,, role até "Site Images", clique em "Favicon", faça upload de um arquivo PNG de 64x64 pixels e publique seu site.

Qual tamanho deve ter o favicon do Framer?

O Framer recomenda 64 x 64 pixels em formato PNG com fundo transparente.

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

Motivos mais comuns: site não publicado, cache do navegador ou local de upload incorreto. Publique seu site, atualize forçadamente a página ou tente uma janela anônima.

Quanto tempo o Google leva para atualizar um favicon?

O Google atualiza favicons lentamente — geralmente dias a semanas. Solicite a reindexação pelo Google Search Console para acelerar o processo.

O Framer suporta favicons para modo escuro?

Sim. Desde setembro de 2024, o Framer permite que você faça upload de favicons separados para temas claro e escuro nas configurações de Site Images.

Referências

1. How to set up a favicon in Framer - Framer Official Help
2. September 2024 Update: Apple Touch Icon and Favicons - Framer Updates
3. Why isn't Safari displaying the favicon? - Framer Troubleshooting
4. Favicon.im - Ferramenta de teste e validação de favicons