Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Configurar Tutoriais Blogger Vanessa S.

Personalizar Favicon no blogger

Você pode personalizar a barra de endereço do seu blog colocando um logo exclusivo no ícone da barra de endereços do navegador, para que apareça sempre que entrarem em seu blog.
Para isso, siga as instruções abaixo:

1. Criando seu favicon:
1) Você precisa criar ou escolher uma imagem no tamanho máximo de 16×16.
2) Armazenar sua imagem com as dimensões e o formato exato no tamanho 16×16.
3) Hospedar sua imagem no seu site preferido.(Se quiser veja a lista sites para hospedagem de arquivos)
4) vá ao editor de HTML do seu blog e cole o seguinte código depois da linha “<head>” , inserindo o url (endereço da imagem que você escolheu ou criou no local indicado:


<link rel="shortcut icon" href="URL-DA-SUA-IMAGEM"/>

5) Em seguida, encontre a linha “]]></b:skin>” no modelo de HTML do seu blog. (Não esqueça de clicar na caixa “Expandir modelos de widgets” para visualizar).
6) Adicione logo abaixo o seguinte código com as modificações:


<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/vnd.microsoft.icon'/>

Visualize e salve!

2. Usando Gerador de favicon online:
O site Dynamic Drive, oferece um serviço online de gerador de favicon, o "FavIcon Generator" onde você pode criar seu icone na extensão ".ico"
A única coisa que você precisará, é criar uma imagem (logotipo do seu blog) que o site faz o resto.

Criada a sua imagem, Entre Aqui neste site
Clique em “Browse” e ache a sua imagem.
Clica no botão “Create Icon”
Vai aparecer a imagem simulando a barra de endereços como seu ícone.
Se estiver do seu agrado,clique no botão “Download FavIcon”.
E seu icone está criado.
Hospede a imagem em seu site preferido e siga os mesmos procedimentos contidos nos itens 4, 5 e 6 acima.

Visualize e salve!
Veja o exemplo de um favicon personalizado:

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

9 Comentários

  1. daivarela disse:

    Criei o meu favicon.ico e fiz o upload em picpanda.com.

    Copiei o link e segui os passos mas o favicon só aparecia no Chrome enquanto que no Firefox e no IE insistia em não aparecer.

    Fiz então o ficheiro em .jpg no picasa.com e aparecia no Chrome e Firefox. No IE nada ainda.

    Resolvi ficar com a 2ª opção.

    PS: ficou uma sensação de que o blog ficou um pouco mais lento a carregar (talvez seja a conexão).

    Abraço desde as ilhas fantásticas de Cabo Verde

  2. .:: Clau ::. disse:

    Alexandrina
    Eu já te informei no outro comentário que vc fez no outro post que qdo vc altera um template as configurações dele passa a valer no blog. Deve haver alguma meta tag nesse template q define o nome do blog como link(endereço). Ou então pode ser q vc tenha colocado o endereço dele no cabeçalho, dá uma olhada e veja como está no nome do seu cabeçalho.
    Sobre sites com favicons pronto, dá uma procurada no google para ver se acha algum.

  3. Alexandrina Oliveira disse:

    Clau além de personalizar o Favicon tem como personalizar o nome que aparece na aba do navegador?? mudei meu template recentemente e o nome do meu blog não aparece mais na janela do navegador, no lugar está aparecendo o endereço do blog, existe uma forma de personalizar? e vc pode dizer onde tem pacotes de favicon prontos, pq sou péssima pra criar.

  4. Lukas disse:

    Nossa fica muito pequeno.
    Criei uma 30×30 e abri com o firefox e ainda ficou pequeno..rsrs

  5. Barbara disse:

    Eu consegui fazer funcionar, no firefox, com formato gif, enviado direto pro blogger e depois adicionando o code < link href = ' LINK-DA-IMAGEM ' rel = ' shortcut icon ' / > antes do < /head > (sem os espaços, claro).

  6. SocialLie disse:

    Fui só com png sem usar .ico e funcionou bem s2

  7. SocialLie disse:

    Onde upar um arquivo .ico o imagenshack não aceita nem o outro… .-.

  8. Um sonho de amor disse:

    aqui ta lindo, muito bom os textos. eu só nao conseguir fazer este! Parabéns!

  9. @adrianaarndt disse:

    Você e seu blog são um sonho! s2

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.