Como Colocar Favicon em Seu Website
Hoje decidi fazer este post sobre favicons, mostrar seus benefícios e como inserir favicons que funcione no IE (Internet Explorer) e em todos ou outros navegadores. Vai ser bem completinho:
O que é favicon?
Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Para maiores e melhores detalhes veja a descrição do Winkipédia:
Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.
Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.
Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.
Benefícios
Alguns benefícios que podemos conquistar com o uso de uma favicon são os listados abaixo:
- É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais;
- Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).
Preparando o terreno
Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o Photoshop ou Fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.
Com a imagem em mãos acesse este link e faça o upload de sua imagem, não precisa mudar nada, mais se quiser se aventurar fique a vontade…. Observe que logo abaixo você terá um preview de sua logo, algo parecido com isso:
Observe que há ainda algumas partes que ficaram imperfeitas… para isso temos um pouco acima deste preview um editor de favicons. Ajuste certinho sua favicon e faça o download.
Se você não quer fazer uma favicon, no mesmo site da www.favicon.cc há varias favicons grátis para download.
Agora começa a brincadeira…
Com a favicon definida vamos partir pra o upload e a programação que tambem é bem fácil. Upe sua imagem no local que deseja, recomendo que seja na pasta raiz de seu site ou se você usa o WordPress, Joomla ou Magento veremos o processo logo mais.
Como inserir uma favicon que funcione no Internet Explorer
Um do maiores problemas não só com favicon mas com tudo o que vamos fazer é bendito IE. Graças a Deus até para o IE temos uma solução… o principal problema é que o IE “não consegue entender” que uma favicon no formato png ou gif é realmente um favicon, por isso que mais acima já fizemos o processo para deixa no formato .ico
Para o código temos que ter 2 linhas:
<link rel="shortcut icon" href="https://mateussouzaweb.com/favicon.ico" /> <link rel="icon" href="https://mateussouzaweb.com/favicon.ico" type="image/x-icon" />
Porque 2 linhas? Elas fazem exatamente a mesma coisa mais como dizem uma é para o Internet Explorer e a outra é para o Firefox (Firefox aqui se refere aos demais navegadores). Copie e cole este código antes de fechar a tag <head>(</head>), altere o caminho (href) para o caminho correto de sua favicon, salve o arquivo, teste e veja funcionando.
Como inserir favicon no WordPress
Não tem segredo:
Primeiramente salve a favicon na pasta do seu tema. Ex:
../wp-content/themes/seutema/
Agora temos que editar o arquivo header.php do tema que está em uso :
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
Este código em php pegara o caminho do template e incluira no href, produzirá algo semelhante a isto:
<link rel="shortcut icon" href="https://mateussouzaweb.com/wp-content/themes/mateussouza/favicon.ico" /> <link rel="icon" href="https://mateussouzaweb.com/wp-content/themes/mateussouza/favicon.ico" type="image/x-icon" />
Agora salve, e faça o upload novamente para o seu servidor se você não editou diretamente. Pronto.
Como Inserir ou alterar a favicon do Joomla
Para o Joomla o processo é bem parecido. Faça o upload na pasta de seu tema ../templates/seutema/ e cole o código a seguir no arquivo index.php:
<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" /> <link rel="icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" type="image/x-icon" />
Observe se já não existe um código parecido, se tiver apenas teste, se já estiver com a favicon certa nem é necessário editar o arquivo.
Obs. Alguns site falam que é necessário fazer o upload da favicon na pasta imagens também… creio que este processo seja necessário para a versão 1.0 do Joomla. Por via das dúvidas recomendo que upe sua favicon lá também.
Como Inserir ou alterar a favicon de sua loja Magento
E pra acabar, mas, não menos importante vamos para o processo em um loja Magento. Aqui o processo é bem mais simples apenas faça o upload para a pasta raiz de sua loja e também para a pasta de seu template. Observe os caminhos:
Se você usa o template default, sua favicon está localizada em:
/skin/frontend/default/default/favicon.ico
Se você usa um template personalizado sua favicon está localizada em:
/skin/frontend/default/SEU_ TEMA/favicon.ico
Teste e confira se não deu nada de errado.
Considerações Finais
É possivel que já tenha uma favicon nos diretorios listados neste tutorial, se houver apenas substitua por sua nova favicon.
Pode acontecer de sua favicon não ser alterada no mesmo momento da alteração devido ao cache de seu website. Limpe-o ou espere algum tempo e teste novamente. Uns F5 também ajudam (na verdade é Ctrl+F5 :)).
Até a próxima.
11 Comentários
Melo disse:
22 de outubro de 2009 às 17:55
Super dica parabens é muito melhor salvar nos meus favoritos quando tem um favicon
rafael disse:
17 de novembro de 2009 às 17:06
me ensina php o meu email é rafinha12.gato@hotmail.com
joao disse:
30 de novembro de 2009 às 13:14
muito bom valeu cara obrigado pelo seu trabalho
The king of game disse:
14 de fevereiro de 2010 às 23:28
caramba cara
me desculpa eu ja instalei hacks varios programas criei meu proprio site n to consseguindo da pra falar minha lingua
Rodrigo Moncks disse:
17 de agosto de 2010 às 21:55
Realmente úitl, muito obrigado pelo post ;)
Catinha disse:
2 de setembro de 2010 às 23:13
Valeu!
Tentei fazer com tutoriais de outros sites, mas só com este consegui.
Obrigadão por compartilhar conosco.
Deus continue te abençoando!
Claudio Siqueira disse:
21 de julho de 2015 às 12:50
Muito obrigado!
Usei no WordPress e funcionou perfeitamente.
Muiiiito obrigado!
http://www.junesse.com.br
Paulo disse:
18 de agosto de 2017 às 18:17
Caríssimo, obrigado! Salvou.
Paulo disse:
18 de agosto de 2017 às 18:20
Show de bola!
Magas Neto Magas disse:
31 de maio de 2019 às 19:16
Obrigado pelo detalhe. Tentei primeiramente com o tamanho superior a 16×16 não funcionou, tentei novamente mas com tamanho 16×16 e funcionou.
Sinesio Santos disse:
11 de julho de 2019 às 13:53
Valeu!!!!!!!!!