Como adicionar um favicon para seu site WordPress

Publicado em

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 ?

Especialista em WordPress & SEO

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.

Posts Similares

  • Utilizando o operador de módulo no loop

    Na maior parte das linguagens de programação existe um operador específico, por vezes esquecido pelos programadores, para operações de módulo. Seu símbolo, na maioria das linguagens, é a % (o que pode causar alguma confusão para os novatos). O PHP não foge à regra e também possui este operador de módulo, sendo o seu símbolo…

  • Como alterar link e tooltip da logo na página de login do WP

    Atualizado em

    Ao entrar na página de login de um site WordPress, a logo exibida é a do WordPress, e por muitas vezes, para personalizar a página de login para nossos clientes, trocamos esta logo pela logo do cliente, conforme explicado no post ‘Como alterar o logotipo da página de login do WordPress‘. Isso já dá o…

  • Corrigindo o erro ‘Allowed memory size Exhausted’ no WordPress

    Um pequenho hackzinho que pode ajudar aqueles que passaram pelo mesmo problema que passamos por aqui. Ao atualizar nosso site para o WordPress 2.8 (após um lógico backup de tudo), a seção administrativa do site apresentava a seguinte mensagem de erro: Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 2348617 bytes)…

  • Como listar os últimos usuários registrados no seu blog?

    Se você tem um blog em que é permitido o registro de novos usuários (sejam eles autores, contribuidores, etc), você pode mostrar em sua sidebar (ou qualquer outra área escolhida por você) os últimos a terem se registrados, bastando apenas incluir o código abaixo no local desejado. Vale destacar que onde sê lê LIMIT 10…

  • Como exibir o número de resultados na busca do WordPress

    Abra o arquivo search.php. Nele, procure pela seguinte linha: <h2 class=”pagetitle”>Resultado da busca</h2> E a substitua pela linha abaixo: <h2 class=”pagetitle”>Resultado da busca por <?php /* Search Count */ $allsearch = &new WP_Query(“s=$s&showposts=-1″); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(”); _e(‘<span class=”search-terms”>’); echo $key; _e(‘</span>’); _e(‘ — ‘); echo $count . ‘ ‘; _e(‘artigos’);…

  • Como colocar expiração automatica de artigos no seu blog

    Uma vez que o WordPress não inclui por defeito uma função que permita ao editor definir quanto tempo um determinado artigo deverá ficar online, muitos editores sentem dificuldades em automatizar o periodo de expiração de artigos, tendo geralmente de recorrer a métodos manuais. Eis no entanto uma forma muito eficiente e engraçada de colocar expiração…

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

35 Comentários

    1. Pasta Raiz é a pasta inicial de seu site.. como eu seu pc, onde a pasta raiz do HD é C: , e todas as pastas dentro dele são sub-pastas.. entendeu ?
      No caso em questão, pasta-raiz do site, esta é a pasta /public_html ou /www , variando de acordo com a hospedagem usada.

      Responder

  3. 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?!

    Responder

    1. Olá Augusto,

      Tal alteração é permitida apenas usando o WordPress em seu servidor.. no WordPress.com tal alteração não é permitida, visto que necessitaria da edição do arquivo .css do tema usado, e no WordPress.com não é dada permissão para que os temas sejam alterados.

      Abraços

      Responder

    1. Oi Rapha,

      Isso é bem simples, basta colocar os arquivos na pasta wp-content/themes através de seu ftp. Mas, sempre lembrando que isso apenas é permitido se o WordPress estiver instalado em seu servidor, sites hospedados no wordpress.com apenas podem usar os temas disponibilizados por lá.

      Abraços e qualquer outra dúvidas é só falar 🙂

      Responder

  5. 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

    Responder

    1. Olá Caynan,

      O erro está no caminho do arquivo: a pasta ‘www’ em seu servidor corresponde ao endereço de seu site.

      Ao invés de escrever ‘/www’, digite o endereço de seu site ‘http : // www . seusite . com . br/favicon.ico’ (Sem os espaços)

      Responder

  6. 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.

    Responder

  7. 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!

    Responder

  10. 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 –'-{@

    Responder

  11. 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

    Responder

  19. 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.

    Responder

  25. 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

    Responder