O que você está procurando?

Aperte Enter para buscar ou ESC para fechar

Como adicionar um favicon para seu site WordPress

2 min de leitura

Vamos a uma dica muito legal para adicionar um favicon ao seu blog no WordPress, encontrada no Blog do The Best e ajustada e simplificada para tirar a dúvida de uma visitante de nosso blog que me mandou um email e motivou esta dica 🙂

O que é o tal do favicon?

Ele nada mais é que um ícone que fica ao lado do endereço do site/blog na barra do navegador.

Para que serve?

Ele serve para criar uma identidade do seu logotipo ao endereço do site/blog e para um melhor design (digamos assim).

Como criar um favicon.ico do meu logo?

Para isso basta você usar o serviço gratuito e online do site Dinamic Drive. Nele você envia uma imagem nos formatos gif, jpg, png e bmp, até 150 KB, que ele tranforma em um arquivo favicon.ico prontinho para ser usado.

Como colocar no Blog?

É bem simples !

Existe até um plugin do WordPress que o faz, mas julgo que seja totalmente desnecessário instalar um plugin que apenas adiciona 1 linha no cabeçalho de seu blog , então vou mostrar aqui a forma mais simples de fazer.

Entre as tags <head> e </head> de seu tema, normalmente encontradas no arquivo de cabeçalho (header.php) adicione a seguinte linha:

<link rel=”shortcut icon” href=”/favicon.ico”>

Lembrando que o href é o url de onde se encontra o favicon.ico. O indicado é que esteja na raiz do site.

Pronto, simples não ?

Compartilhar este artigo
Guga Alves

Guga Alves

• WordPress e web

Desbravando o mundo WordPress desde 2007, me especializei também em SEO e entreguei grandes projetos no mercado brasileiro para a partir de 2015 me dedicar ao mercado fora do Brasil. Trabalhei na empresa do criador do WordPress por 4 anos (no WordPress.com, da Automattic) e mais 4 anos em uma das maiores empresas de hospedagens do mundo, a Liquid Web, gerenciando uma equipe de suporte do plugin The Events Calendar. No Brasil, atendi grandes marcas como canal Futura, Corpo Perfeito, Catraca Livre, Hostgator Brasil e Hostnet, também palestrei em diversos eventos e dei aula em cursos livres e pós-graduação (no Rio de Janeiro e em Brasília). Trabalho remoto, viajo bastante, mas minha base é no Rio de Janeiro/RJ.

X GitHub Sobre mim
Leituras Complementares

Continue lendo

Ver todos em Dicas WordPress →

Discussão & Respostas (35)

Espaço moderado para debates técnicos
  1. Thomy
    Thomy
    ↳ Responder

    Não estou conseguindo fazer funcionar.

    Uso o tema inove no meu blog.

  2. Jefferson Rezende
    Jefferson Rezende
    ↳ Responder

    cara, o que significa exatamente qdo vc diz que o favicon deve estar preferencialmente na pasta-raiz do sitee ?

  3. Augusto
    Augusto
    ↳ Responder

    Ola!
    Estou iniciando minhas experiências com o wordpress e gostaria de saber se possível,como faço para ultilizar uma imagem que está no meu PC no fundo do meu blog?!

  4. rapha
    rapha
    ↳ Responder

    Olá, eu tenho vários temas de templates do wodpress no meu pc, e gostaria de saber como eu add no meu blog
    abraços.

  5. Caynan
    Caynan
    ↳ Responder

    Ola Guga, eu segui o seu tutorial, porem por alguma razão desconhecida o favicon insiste em não aparecer.

    ja coloquei o favicon no diretorio ” / ” e no ” /www ” porem ele insiste em não aparecer.

    alguma ideia do que possa ser?

    abraços

  6. Caynan
    Caynan
    ↳ Responder

    Ola Guga,
    So tenho a agradecer o seu blog esta sendo uma maravilha para mim que estou sainda do blogger e engatinhando no WordPress.

    muito obrigado por tudo.

    espero poder um dia compartilhar experiência com você.

    parabens pelo blog.
    e obrigado pela ajuda.

  7. Jana
    Jana
    ↳ Responder

    Olá! comecei a usar o wordpress agora, aliás, estou aprendendo a usar. Muito obrigada pela dica. Mas, não consegui colocar do modo como você mostrou… Então, peguei o código que vc ofereceu e, no lugar de favicon.ico, coloquei um direct link. Só assim funcionou! rs
    Beijuh!

  8. Allec Gomes
    Allec Gomes
    ↳ Responder

    Obrigado!

  9. Alexandre Coimbra
    Alexandre Coimbra
    ↳ Responder

    Muito bom!!!
    Estava mesmo querendo saber onde eu colocaria o código e instalar um Plugin somente para isso ia pesar o blog a toa!

  10. Tiago P.
    Tiago P.
    ↳ Responder

    A melhor solução para quem está iniciando wordpress é:

    Coloque um icone com nome e formato: (favicon.ico) na raiz do template e depois insira o seguinte comando dentro do <HEAD>:
    <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" media="screen" />
    =D OK –'-{@

  11. Roberta
    Roberta
    ↳ Responder

    Oi segui seu passo a passo e deu tudo certinho porem o favicon só aparece quando entro como o link de painel de administradora. O que faço??
    Obrigada

  12. Jefferson
    Jefferson
    ↳ Responder

    Boa, funcionou perfeitamente.

  13. Emerson
    ↳ Responder

    Obrigado pela dica, faz tempo que estava tentando colocar o favicon, coloquei a linha no arquivo header e apareceu na hora podem ver

  14. Davi
    Davi
    ↳ Responder

    Opa! perfeito…

  15. Renato Paiva
    Renato Paiva
    ↳ Responder

    <link rel="shortcut icon" href="/favicon.ico”>

    Obs.: não coloquei a tag php correta porque o sistema não aceita.

  16. Diego
    Diego
    ↳ Responder

    Funcionou, mas apenas funciona na primeira página, o que pode ser?

  17. Bel Kock Allaman
    Bel Kock Allaman
    ↳ Responder

    Como eu instalo o favicon na raiz do site?

  18. anark
    anark
    ↳ Responder

    Funcionou! Parabéns

  19. Marly
    Marly
    ↳ Responder

    Oi, queria ajuda para remover um favicon. Instalei o Joomla mas não gostei, então instalei o WordPress mas o favicon do Joomla permaneceu na minha home e não sei como tirá-lo. Já procurei em em todos os arquivos para exclui-lo mas não achei. Agradeço imensamente se puder me ajudar.

  20. Leo Campos
    Leo Campos
    ↳ Responder

    Não estou encontrando o arquivo header.php ou algo semelhante.

    1. Alan
      ↳ Responder

      o arquivo header.php fica em:

      /wp-content/themes/”Seu tema”/header.php

  21. Angelino Gonsalves
    Angelino Gonsalves
    ↳ Responder

    show simples e facil

  22. Jobert
    Jobert
    ↳ Responder

    Muito bom Guga, agora minha comunidade em buddypress vai ganhar um aspecto mais profissional

  23. Ederson
    ↳ Responder

    Vlw Guga!

    Já estava caçando um plugin kkkk…

    Alguns pontos para ajudar:
    1 – Trabalhe a transparência ao redor ícone para que quando o icone for renderizado no browser o acabamento fique mais legal. Depois de pronto salve o arquivo em .png e depois converta para .ico

    2 – Talvez quando colar o comando indicado pelo Guga, vocês terão que digitar as aspas duplas que tem nele de novo para que o WordPress possa reconhecer, digo pois isto aconteceu comigo.

    Abraço

  24. Carolmay
    Carolmay
    ↳ Responder

    Obrigada! Fácil e funcionou.

Deixe sua contribuição técnica

Seu e-mail não será publicado. Blocos de código em markdown são aceitos com crases triplas.