Como adicionar um favicon ao WordPress

Adicionar um favicon ao WordPress é feito por meio do recurso Site Icon integrado do WordPress. Normalmente você não precisa criar um arquivo favicon.ico, editar seus arquivos de tema ou instalar um plugin favicon. No WordPress, o favicon é chamado de ícone do site. Você pode adicionar um nas Configurações Gerais do WordPress 6.5 e posterior. Versões mais antigas do WordPress usam o Personalizador, enquanto os temas de bloco também podem gerenciar o ícone através do bloco Logotipo do Site.

Antes de começar, prepare uma imagem quadrada com pelo menos 512 × 512 pixels. WordPress recomenda PNG para o ícone do site.

Como você adiciona um favicon ao WordPress?

Para WordPress 6.5 e posterior, o WordPress mudou a configuração do ícone do site para Configurações gerais. Este é o método principal a ser usado nas instalações atuais do WordPress.

1. Faça login no painel do WordPress: Abra sua área de administração do WordPress e faça login. Você precisa de acesso de administrador ou permissões suficientes para alterar as configurações do site.
2. Abra Configurações Gerais: No painel do WordPress, abra Configurações → Geral.
3. Encontre a configuração do ícone do site: Procure a seção Ícone do site. Você deverá ver uma opção rotulada Escolha um ícone do site.
4. Faça upload ou selecione seu favicon: Clique Escolha um ícone do site. O WordPress permitirá que você selecione uma imagem da sua biblioteca de mídia ou carregue a imagem preparada. Escolha sua imagem quadrada de favicon (pelo menos 512 × 512 pixels, PNG recomendado).
5. Confirme a imagem: Após selecionar a imagem, verifique cuidadosamente a visualização. Certifique-se de que a imagem correta esteja selecionada, que a parte importante do seu design esteja visível, que o ícone não seja desnecessariamente complicado e que a imagem seja quadrada. Se a imagem contiver um logotipo com texto muito pequeno, considere preparar uma versão simplificada antes de usá-la como Ícone do Site.
6. Salve o ícone do site: Salve as alterações nas configurações gerais. O ícone do site agora est�� associado ao seu site WordPress.
7. Abra o site ao vivo: Abra seu site em uma nova aba do navegador. Verifique o ícone ao lado do título da página. Não julgue o resultado apenas pela tela de administração do WordPress. O verdadeiro teste é o site publicado em um navegador.

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

A localização depende principalmente da versão do WordPress e da configuração do tema.

Onde está a configuração do favicon no WordPress 6.5 e posterior?

Para WordPress 6.5 e posterior, use:

Administrador do WordPress → Configurações → Geral → Ícone do site

O WordPress moveu o ícone do site do Personalizador para Configurações gerais no WordPress 6.5. Esta é a rota padrão atual.

Onde estava a configuração do favicon nas versões mais antigas do WordPress?

Nas versões 4.3 a 6.4 do WordPress, o ícone do site era gerenciado através do Customizer:

Administrador do WordPress → Aparência → Personalizar → Identidade do site → Ícone do site

Em seguida, você selecionou ou carregou uma imagem quadrada de pelo menos 512 × 512 pixels. Isso explica por que os tutoriais mais antigos do WordPress podem mostrar um caminho de navegação diferente. Se o seu painel não corresponder a essas instruções, primeiro verifique a sua versão do WordPress antes de presumir que o recurso desapareceu.

Onde está a configuração do favicon em um tema de bloco?

Os temas de bloco fornecem outro fluxo de trabalho por meio do Editor de Site. O bloco do logotipo do site inclui um Usar como ícone do site opção. Quando ativado, a imagem atribuída ao bloco Logotipo do Site também é usada como Ícone do Site. Isso é especialmente relevante quando você trabalha com um tema de bloco moderno e passa a maior parte do tempo Aparência → Editor.

Como você adiciona um favicon a um tema de bloco WordPress?

Um tema de bloco pode gerenciar o ícone do site por meio do bloco Logotipo do site.

1. Abra Aparência → Editor: No painel do WordPress, vá para Aparência → Editor. Isso abre o Editor de Site WordPress para um tema de bloco.
2. Encontre ou adicione o bloco do logotipo do site: Seu tema pode já ter um bloco de logotipo do site em seu cabeçalho. Selecione-o. Se não existir, adicione um bloco de logotipo do site por meio do insersor de bloco. A documentação do WordPress explica que o bloco pode ser inserido em templates no Editor de Sites.
3. Adicione sua imagem: Selecione o bloco Logotipo do Site e carregue uma imagem ou escolha uma da Biblioteca de Mídia.
4. Abra as configurações de bloqueio: Com o bloco Logotipo do site selecionado, abra a barra lateral de configurações. Procure o Usar como ícone do site opção.
5. Ative "Usar como ícone do site": Ligar Usar como ícone do site. O WordPress usará essa imagem como ícone do site.
6. Salve suas alterações: Salve as alterações no Editor de Site, abra o site ativo e verifique a guia do navegador.

O logotipo e o ícone do site também podem ser diferentes. O WordPress documenta um fluxo de trabalho do logotipo do site onde o logotipo pode ser usado para definir inicialmente o ícone e, em seguida, um ícone do site diferente pode ser selecionado posteriormente.

Como você cria um favicon para WordPress?

Você tem várias maneiras de criar a imagem antes de carregá-la.

Como você cria um favicon a partir do seu logotipo?

Comece com o logotipo da sua marca existente. Se o logotipo já for um símbolo quadrado simples, talvez seja necessário apenas redimensioná-lo e exportá-lo. Se o logotipo for horizontal, simplifique-o primeiro. Remova o texto desnecessário ou use a parte mais reconhecível do logotipo. Não traduza o logotipo nem altere o nome da marca como parte do processo de criação do favicon. Preserve a identidade original da marca enquanto adapta a arte para um pequeno formato quadrado.

Como você cria um favicon a partir de iniciais ou texto?

Um favicon pode usar uma ou duas letras em vez de um logotipo completo. Por exemplo, uma empresa chamada North Star Digital poderia usar E em vez de tentar encaixar o nome completo no ícone. Use caracteres grandes e legíveis com contraste suficiente.

Como você converte um PNG em um favicon?

Se você já possui uma imagem PNG, pode usar uma ferramenta de conversão de favicon para preparar uma versão de favicon. Por exemplo, PNGtoFavicon.com pode converter um PNG existente em arte de favicon. Isso é útil quando você já possui um logotipo ou ícone adequado, mas precisa preparar uma versão do favicon antes de carregá-lo no WordPress. Após a conversão, verifique a imagem resultante em um tamanho pequeno antes de usá-la como ícone do site.

O importante requisito do WordPress ainda é o mesmo: a imagem deve ser quadrada e ter pelo menos 512 × 512 pixels.

Qual deve ser o tamanho de um favicon do WordPress?

O WordPress exige que o ícone do site seja quadrado, com pelo menos 512 × 512 pixels, e recomenda o formato PNG. Estes são os requisitos documentados atuais do WordPress.

Não confunda o tamanho da imagem que você carrega com o tamanho em que o navegador exibe o favicon. Um navegador pode exibir o ícone em um tamanho muito menor do que a imagem original carregada. É por isso que é importante começar com uma imagem suficientemente grande e limpa.

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

Depois de salvar o ícone do site, verifique o site ativo.

• Verifique a guia do navegador: Abra seu site e veja a guia do navegador. O ícone do site deve aparecer ao lado do título da página. Esta é a maneira mais fácil de confirmar se o favicon está sendo veiculado pelo seu site.
• Verifique um marcador: Marque o site como favorito e verifique se o ícone aparece ao lado do favorito. Os favicons também podem ser usados ​​no histórico do navegador e em outras interfaces do navegador.
• Teste o site em uma janela privada ou anônima: Se o seu favicon antigo ainda estiver visível, abra o site em uma janela privada ou anônima. Isso fornece um teste mais limpo porque a sessão normal do navegador ainda pode ter o favicon anterior armazenado em cache.
• Teste outro navegador: Abra o site em um segundo navegador. Se o novo favicon aparecer lá, mas não no seu navegador principal, a configuração do WordPress pode já estar correta e o problema restante pode ser o cache do navegador.
• Verifique o domínio ativo: Certifique-se de visitar o domínio publicado correto. Não teste acidentalmente um site de teste, uma instalação de desenvolvimento, um domínio antigo ou uma instalação diferente do WordPress.

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

Um favicon ausente não significa automaticamente falha no upload do ícone do site. Vários problemas diferentes podem causar o mesmo resultado.

Como você limpa o cache do WordPress ou do navegador após alterar um favicon?

O cache deve ser verificado somente após a confirmação de que o ícone do site foi realmente salvo. Use esta sequência:

1. Confirme se o ícone do site está correto no WordPress.
2. Salve a alteração.
3. Limpe o cache do plugin de cache do WordPress, se houver algum instalado.
4. Limpe o cache do CDN, se o seu site usar um CDN.
5. Abra o site em uma janela privada ou anônima.
6. Teste o site em outro navegador.
7. Verifique o favicon na guia do navegador.

Isso separa o problema de configuração do WordPress do problema de cache. Não substitua repetidamente o favicon simplesmente porque seu navegador continua exibindo a imagem anterior.

Como você altera ou substitui um favicon do WordPress?

Substituir um ícone de site é semelhante a adicionar um.

Para WordPress 6.5 e posterior

• Faça login no WordPress.
• Vá para Configurações → Geral.
• Encontre o ícone do site.
• Escolha uma imagem diferente da Biblioteca de Mídia ou carregue-a.
• Confirme a imagem.
• Salve as configurações.
• Abra o site ativo e verifique a guia do navegador.

A documentação atual do WordPress coloca o ícone do site nas configurações gerais do WordPress 6.5 e posterior.

Para versões mais antigas do WordPress

No WordPress 4.3 a 6.4, use Aparência → Personalizar → Identidade do site → Ícone do sitee selecione a imagem de substituição e salve as alterações.

Como você remove um favicon do WordPress?

O processo de remoção depende se você está usando as Configurações Gerais, o Personalizador ou um tema de bloco.

Remova o ícone do site do WordPress atual

Abra os controles do ícone do site em Configurações → Geral e use o controle de remoção ou substituição disponível fornecido pela instalação do WordPress. Como as interfaces do WordPress podem variar entre versões e temas, não confie no nome de um botão específico de um tutorial mais antigo.

Remova o ícone do site do personalizador

Instalações mais antigas do WordPress gerenciam o ícone por meio de Aparência → Personalizar → Identidade do site. O painel Identidade do Site contém o controle Ícone do Site e permite que a imagem seja alterada ou removida.

Remova o ícone do site de um tema de bloco

Os temas de bloco podem usar o bloco Logotipo do Site para controlar o Ícone do Site. Abrir Aparência → Editor, selecione o bloco Logotipo do site e revise suas configurações de imagem e ícone do site. Remover a imagem do bloco do logotipo do site e remover o ícone do site não são necessariamente a mesma operação, portanto, verifique a própria configuração do ícone do site quando seu objetivo for especificamente remover o favicon.

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

Sim, mas a codificação geralmente é desnecessária. O WordPress possui funcionalidade integrada de ícone de site, portanto, sites normais devem usar a configuração integrada em vez de adicionar manualmente a marcação de favicon aos arquivos de tema. O WordPress fornece o recurso Site Icon desde a versão 4.3.

Quando você deve usar o ícone de site integrado do WordPress?

Use a opção integrada quando estiver disponível. É mais simples, mais fácil de manter e evita modificações desnecessárias nos arquivos de tema.

Quando o código personalizado pode ser necessário?

O código personalizado pode fazer sentido para um tema personalizado ou uma implementação especializada onde os controles integrados não fornecem o comportamento necessário. Antes de editar o código do tema, determine se o tema existente já suporta o recurso Site Icon. Não adicione uma segunda implementação de favicon simplesmente porque você não consegue encontrar a configuração imediatamente.

Você precisa de um plugin para adicionar um favicon ao WordPress?

Não. Um plugin de favicon dedicado normalmente é desnecessário. O WordPress possui a funcionalidade interna do Site Icon, e a documentação oficial recomenda usá-la em vez de criar e instalar manualmente uma implementação separada do favicon.ico. Um plug-in pode ser relevante para um requisito especializado, mas instalar um simplesmente para adicionar um ícone de site padrão adiciona uma dependência desnecessária.

Erros comuns de favicon do WordPress a serem evitados

• Usando uma imagem não quadrada: O WordPress exige que o ícone do site seja quadrado.
• Carregar uma imagem menor que 512 × 512 pixels: Prepare o ícone nas dimensões mínimas exigidas, em vez de começar com uma pequena imagem de origem.
• Usando um logotipo complicado: Um logotipo detalhado pode se tornar impossível de reconhecer quando reduzido ao tamanho de um favicon.
• Tornando o texto muito pequeno: Nomes comerciais e slogans longos geralmente se tornam ilegíveis.
• Usando contraste ruim: Um favicon de baixo contraste pode desaparecer da interface de um navegador.
• Começando com uma fonte de baixa qualidade: Uma imagem borrada ou muito compactada não produzirá um resultado limpo.
• Esquecendo de salvar: Selecionar uma imagem não ajuda se a configuração não for salva.
• Verificando apenas um navegador: Use uma janela privada ou outro navegador ao verificar um favicon alterado recentemente.
• Confundir o logotipo do site com o ícone do site: Eles servem a propósitos diferentes. O logotipo do seu site aparece no design do site, enquanto o ícone do site é usado como um pequeno navegador e ícone do aplicativo.
• Editando código desnecessariamente: Use a funcionalidade interna do Site Icon do WordPress antes de modificar os arquivos do tema.
• Supondo que o favicon falhou porque o ícone antigo permanece visível: O cache do navegador pode fazer com que uma alteração bem-sucedida pareça malsucedida.

Perguntas frequentes sobre favicons do WordPress

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

Use este fluxo de trabalho quando você ainda não tiver um ícone de site adequado:

1. Comece com seu logotipo, símbolo ou iniciais existentes. Mantenha o logotipo original e a identidade da marca intactos.
2. Simplifique a arte para que ela permaneça reconhecível quando exibida em tamanho muito pequeno.
3. Crie uma tela quadrada.
4. Faça a imagem com pelo menos 512 × 512 pixels.
5. Exporte-o como PNG.
6. Verifique o ícone em tamanhos de tela pequenos.
7. Converta um PNG existente em arte de favicon quando necessário.
8. Carregue a imagem finalizada no WordPress como ícone do site.

Conclusão

Para adicionar um favicon ao WordPress, prepare uma imagem quadrada de pelo menos 512 × 512 pixels e abra Configurações → Geral → Ícone do site no WordPress 6.5 e posterior. Selecione ou carregue a imagem, salve as configurações e verifique o site ativo em um navegador. Instalações mais antigas do WordPress usam Aparência → Personalizar → Identidade do site, enquanto os temas de bloco também podem gerenciar o ícone por meio do bloco Logotipo do site. Se o novo favicon não aparecer imediatamente, verifique o cache do navegador, WordPress, CDN ou servidor antes de presumir que o upload falhou.