Crie um favicon para seu site
Publicado em: 2007-03-5 — 111.347 visualizacoes
FavIcon é o acrônimo para Favorite Icon, palavras em inglês que podem ser traduzidas como Ícone para Favoritos.
Trata-se daquela pequena imagem (de dimensões 16 x 16px) que você vê na barra de endereços do navegador e colocada a esquerda do endereço do site e que também aparece na sua relação de favoritos quando você acresenta o site nos seus arquivos para favoritos. Se você olhar para a barra de endereços do seu navegador vai perceber que existe um favicon para o Blog do Maujor que na data que este post foi escrito é um quadrado na cor verde contendo uma letra M.
Criar um favicon para seu site ou blog é muito simples e compreende basicamente duas etapas:
- Gerar a imagem
- Colocar o favicon no HTML
Gerar a imagem
A pequena imagem de 16 x 16px do favicon é um arquivo com extensão .ico. Se o seu editor de imagens for capaz de salvar a imagem como ícone (com a extensão .ico) ótimo, você pode pular esta etapa. Contudo, os editores de imagens mais usados, como Fireworks, PhotoShop, Gimp, Corel, etc. não são capazes de salvar imagens como ícones (me corrijam por favor se algum destes editores for capaz).
Então terei que me virar em um editor de imagens para ícones?
Não, felizmente existem inúmeras ferramentas na Web que geram favicons online e você poderá usar uma delas.
[php_everywhere]
Vou conduzir esta matéria baseado no gerador de favicons online do site da HTML-Kit que considero bastante simples e versátil além de oferecer possibilidades de criação de favicons animados e combinações de imagens com textos.
A sua primeira providência será desenhar o ícone com dimensões de 16 x 16px, no seu programa editor de imagens preferido e salvá-lo no HD com extensão GIF ou JPG.
Abra no navegador, o gerador de favicons online do site da HTML-Kit e você verá uma tela, cuja parte que interessa mostro a seguir:
Clique o botão para escolher o arquivo de imagem para o qual você pretende criar o favicon e esta ação fará com se abra uma janela popup com a árvore do seu HD. Vá até o arquivo do ícone que você criou conforme explicado acima, marque-o e clique “Abrir” na janela popup. A janela fecha e o endereço do ícone no seu HD aparece ao lado do botão da escolha. Clique o botão para gerar o favicon e pronto. Está gerado seu favicon que será mostrado em nova tela contendo a visualização do seu favicon e várias outras opções para personalizar (explore a tela á vontade).
Faça o download do favicon para seu HD clicando um link para download do Favicon e o favicon será gravado na sua pasta padrão de downloads ou seja lá onde você escolher, como arquivo zipado. Descompacte o arquivo e você terá um arquivo nomeado favicon.ico. Mova este arquivo para o diretório raiz do seu site ou blog e faça upload para o servidor.
Colocar o favicon no HTML
O código HTML que faz funcionar o favicon deverá ser inserido na seção HEAD da página. Se você usa um template que inclui a seção HEAD via script em todas as páginas do site ótimo, basta acresentar a marcação em um só arquivo. Mas, se suas páginas são estáticas você terá que acresentar a marcação em cada página onde você quer que apareça o favicon.
Acresente a seguinte marcação na seção HEAD do seu HTML
<link rel="shortcut icon" href="http://www.seusite.com.br/favicon.ico" type="image/x-icon" />Pronto! Você agora tem um favicon no seu site.
Nota: Você não é obrigado a usar o nome favicon para seu arquivo e poderá renomeá-lo para o nome a sua escolha.
Mas atenção, não esqueça de renomear não só a imagem como também o link na marcação HTML. 🙂
Conclusão
A não ser que você tenha uma boa justificativa para usar um favicon animado (por exemplo: o cliente que está pagando pelos seu serviços exige uma animação apesar de você ter tentado de todas as maneiras demovê-lo desta péssima idéia) recomendo vivamente não usar animação. Afinal é horrível para o usuário estar em uma página sendo obrigado a aturar aquela imagenzinha chata se mexendo sem parar.
Isto é tudo o que você precisa saber para gerar seu favicon personalizado. Se você não gostou da ferramenta faça uma busca no Google por “favicon” que será indicado uma grande quantidade de links para geradores de favicon online.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2007-03-5 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/03/05/crie-um-favicon-para-seu-site/trackback no seu site.
Usei as dicas e criei meu favicon. Ficou excelente! Obrigado.
Olá @Rodrigo,
Não! O favicon só pode ser inserido na marcação HTML.
Olá Maujor! Tem como colocar um Favicon por meio do css? tenho um site com muitas páginas e se for fazer pelo html terei que alterar o código página por página… valew!
Bacana! Há algum tempo não trabalho mais com programação nível bruto. rsrs
A moda agora são os tais CMS, e eu estou me amarrando neles.
legal
Realmente o problema todo do favicons não aparecer no IE é resolução do icone. Estava me matando para resolver este problema de não aparecer no IE e fiquei um bom tempo me atendo a tag HTML, mas na verdade foi só mudar a resolução para 256 cores que já funcionou no IE
OBS: Estou usando o IE8. Só vale lembrar como nosso amigo já disse que no IE6 somente aparece o icone se a URL for adicionado aos favoritos.
Valeu pela dica.
gostei do tutorial, está de parabéns e obrigada por sua ajuda
mas, não queria que o icone ficasse em um quadradinho, recortei a imagem (detalhes redondos), mas ela fica em um quadrado :(, como faço pra ficar somente o icone da imagem, sem estar dentro de um quadrado???
Podem fala oque quizer eu fiz e deu serto @__@
Bem objetivo, fácil de enserir o favicon, para quem ainda não tem o seu icone, você mesmo pode produzir o seu com um pouco de criatividade e o Paint do windows abra um novo arquivo com atributos de 16 x 16 amplie a área de desenho e faça algo simples depois salve como .ico e veja o resultado, esse icone pode ser utilizado sem problema no seu site.
Sou mais Brasil!
Abs.
Rápido e direto, resolvendo o problema.
Valeu amigo !
Não precisa usar essas ferramentas on-line. É só criar a imagem onde quiser: Fireworks, PhotoShop, Gimp, Corel, etc. e renomear a extensão. Fácil!
No meu caso eu já tinha tentado de diversas maneiras, e nada do favicon aparecer no IE. Resolvi recomeçar do zero, reconverter usando esse site indicado pelo Maujor, colocar na raiz e não na pasta “imagens” e usar as tags exatamente do jeito indicado, e funcionou.
Acredito que o problema tenha sido o citado acima, outros serviços online que realmente não convertem o número de cores do ícone. Antes só aparecia corretamente no Firefox e no Chrome (aliás, engraçado ver que o tópico é tão antigo que nos primeiros comentários o Chrome nem é citado, já que não existia… 😀 ).
“me corrijam por favor se algum destes editores for capaz”
o Photoshop e o Gimp e suas últimas versões permite isso sim…
quanto aos outros não sei
rodrigo eu consegui por no meu site com esse codigo aqui
e o tamanho tem que ser 16×16 mesmo mais naum pode ser e menor vai fica muito ruim a imagem blz espero te ajudado
Adendo:
link rel=”icon” href=”http://www.seusite.com.br/favicon.ico” type=”image/x-icon”
link rel=”SHORTCUT ICON” href=”http://www.seusite.com.br/favicon.ico” type=”image/x-icon”
link rel=”apple-touch-icon” href=”http://www.seusite.com.br/favicon.ico” type=”image/x-icon”
acrescentar no final.
Marco o html de três formas para compreender a amioria dos navegadores disponíveis. Seguem as mesmas, talvez possa ajudar.
Também tenho uma dúvida. O tamanho da figuriha influencia? Tem que ser 16×16px ou pode variar um pouco?
Abraços
oi galera alguem poderia me ajuda pois fiz tudo como o maujor fala mais naum consegui fazer com que o favicon aparece no mozila fire fox alguem poderia me ajuda
Ola todos, estou de volta…
Estava tudo OK no FF e no IE, hoje no lugar de aparecer o meu iconi esta aparecendo o inconi do windows (so no IE no FF esta normal), alguem sabe dizer porque???
Fala galera,
No final de tudo deu certo, coloquei o codigo nas minha paginas e esta tudo OK, como falei antes a principio nao dava pra ver, depois de um tempo o “favicon” (meu iconi) apareceu perfeito em todas as paginas, no firefox mostra ao lado do end do site e no internet explorer aparece ao lado do end do site e na aba de titolo.
Valeu pela dica e pelo e-mail estarei sempre aqui para aprender cada vez mais com todos voces.
Abraço a todos!
O que me deixa com a pulga atraz da orelha é que consigo ver os outros “favicon” em outros site com este! Mais no meu site sò consigo ver no firefox. Gostaria muito de saber como colocar o “favicon” no meu site (no internet explorer), se nao for pedir muito pode passar por e-mail thiagoeduardofronza@gmail.com
Obrigado!
abriuo icone no explorer só no firefox não ta abrindo
Po amigo sua dica me ajudou bastante viu, compreendi muito bem até coloquei um favicon no meu site, muito obrigado mesmo abraço e parabéns pelo blog.
Muito boa a dica
Valeu MAJOR!!!!!!!!!!!!!!!!
Olá pessoal, boa tarde!!!
muito bacana este fórum…
Mas até o momeno ainda nao conseguí reproduzir o favicon no ie7!
Alguém poderia me ajudar com isso?
Obrigado!
Aos que não conseguiram reproduzir os ícones no IE, a causa provável foi postada em 07-03-2007 (comentário 8). As versões 6 e 7 do IE não reproduzem os favicons que possuam resolução acima de 256 cores. Apenas o Firefox (talvez o Opera e o Safari também) suporta arquivos com resolução de 24 bits.
Não aparece de jeito nenhum no IE7, já tentei de tudo:
– copiei um favicon.ico de outro site que aparece no meu IE7
– meta tags de todo jeito
– limpeza de temporários
– reiniciar browser
Alguém tem mais alguma idéia?
Abraço!
Almir
Obs: não aparece de cara em nem uma versão do IE, mas aparece direto no FF.
Não funciona no IE7 nem a porrete!!!
Alguém tem alguma dica?
não considera a pergunta anterior..ok…e considere está, limpei o historico e funcionou perfeitamente, antes lógico que primeiro fiz o procedimento do site e depois limpei……obrigado….show este site…..agradeço mais uma vez peda dica…..
Galera aqui só funcionou no fire fox, quem conseguiu no IE7 poderia colocar o código por completo?..eu agradeço pq já tentei de tudo e nada para o IE7…por favor….
Faz tempo que “ando” por aqui e sempre tem novidades.
Mas estou inserindo o ícone e mostra correto porém quando adiciono ao favoritos FF ou IE o ícone não fica como este.
Quem sabe o motivo?
Muito bom mesmo.
Dica excelente.
Valeu!
Coloquei até dois links
e não funcionou no IE7
Alguém pode me dar uma ajuda?
Loko cara. Seu blog já está no meus favoritos. Abraços Rodrigo
Amei,com tutoriais como o seu eu vou aprender muito rápido esse bicho de sete cabeças que é o mundo dos blogueiros pra mim.Bjs!
localizar imagens /gpj,gif,png,bpm/
Não uso conversores. Desenho no fireworks, exporto para GIF (256) e mudo a extensão para .ico … funciona normalmente.
Essas diferenças nos navegadores realmente são muito intrigantes. No meu ponto de vista penso também que é a forma dos concorrentes Microsoft e Mozila chamarem atenção. Principalmente a Microsoft é cheia de criar metodologias.
Qualquer dúvida sobre gerar o favicon, tem um site bem legal q gera também.
http://www.dynamicdrive.com
no menu lateral esquerdo tem a opção para criar favicon
😉
à um programa francês (escrito em inglês) chamado photofiltre que grava em .ico.
E o velhinho MS Pain também o faz, quando vão guardar a imagem (16×16) escrevam favico.ico
Cumprimentos
Parabéns pelo blog, é um ótimo ponto de referência para profissionais da área e iniciantes.
Quanto a ferramenta, adorei a dica, facilita bastante na conversão dos arquivos de imagem e não preciso instalar nenhum outro software para esta função.
Pessoal , aqueles q estão colocando o codigo com o icone no site.
AVISOOOOOOOOO:
não esqueçam d limpar os arquivos temporários antes d testar.
Valeu!
Parabéns pelo blog!!!
Ótimo conteúdo!!!
Quanto ao Photoshop, é possível salvar uma em ico sim, basta instalar um plugin e pronto.
http://www.flashmasters.com.br/forum/index.php?showtopic=31872
valeu!
manera essa ferramenta ,nao sabia que tinha esse tipo de ferramenta
online ,sempre faço no photoshop aqui mesmo ,mais valeu a dica
maujor
um abraço
De fato, o IE 6 só mostra o ícone depois de adicionado aos favoritos. Quanto aos softwares geradores de .ico, o Photo-Paint faz isso ( acabei de criar um 😀 ), mas parece que o filtro que permite salvar como .ico não é instalado por padrão, mas pode ser instalado posteriormente. Agora, observando alguns sites tenho notado a presença de marcação dupla, como nesse exemplo:
e
no qual só difere o valor de REL. Isso faz alguma diferença?
Espero q o photoshop nunca saia do ar…
Nota dez! Muito legal ess blog de vocês , se puderem acessar meu site também , eu agradeço http://www.centraldoemprestimo.com.br .
muito legal os tutorias de vocês!
abraços
André M.,
Pelo que pude apurar, o IE 6 resolve a visualização dos favicons diferente do IE 7. Conforme tua constatação, a versão 6 só mostra ao adicionarmos o site nos Favoritos. Já a versão 7 comporta-se melhor, ela reproduz os favicons ao abir-se a página. Entretanto, favicons criados com resolução superior a 256 cores não são reproduzidos. Mas o Firefox não faz restrição à resolução. Até a publicação desta matéria, eu usava um aplicativo livre, Conversor de Imagens v1.0, desenvolvido por Suemar Éverton Contessoto (data de 2003). Eu, primeiramente, reduzia a imagem para as dimensões 16 x 16 no formato bitmap; aí usava o aplicativo, que fazia a conversão para o formato ico. Nunca consegui visualizar em versões do IE. Mas ao ler teu comentário fui constatar que a resolução dos favicons criados continuava em 16,7 milhões de cores; o aplicativo executava parcialmente a conversão. Ao usar o serviço do site sugerido pelo Maujor a conversão ocorre completamente, reduzindo a resolução para 256 cores. Sequer é necessário ter uma imagem em tamanho reduzido (16 x 16), até porque as dimensões geradas são 32 x 32 pixels. Quanto ao formato PNG, apenas o Firefox reproduz os favicons. As duas versões do IE ficam de fora. Como temos que contemplar a predominância de versões do IE na base instalada, a matéria e seu desdobramento foram muito úteis.
José Carlos,
Essa de gerar os favicons em 32×32 pixels eu não conhecia, foi bom você falar. Se não me engano, alguns browsers modernos suportam favicons em formato PNG e GIFs animados. Creio que os favicons só aparecem no Internet Explorer (pelo menos testei com o 6) quando o usuário acrescenta o site em seus bookmarks (Favoritos, no IE). Você conseguiu assim, ou bastou entrar no site?
A título de contribuição: no endereço http://www.alvit.de/handbook/ na coluna miscelaneous tools você encontra alguns geradores de favicon.
Após postar comentário de ontem, sobre a limitação das versões 6 e 7 do IE não reproduzirem os favicons, chamou-me a atenção o comentário do André M., quando afirmou que a resolução deveria ser limitada em 256 cores. Verifiquei nos favicons que havia criado e constatei que todos estavam com 16,7 milhões de cores (24 bits), em formato BPM, embora com a extensão ico. O Firefox suporta esses arquivos mas o IE não. Utilizei a sugestão do Maujor e recriei todos eles. A diferença visual que apurei é que os favicons são gerados em 32 x 32 pixels, ao invés de 16 x 16. Em conseqüência, o tamanho subiu de 1 KB para 4 KB. Mas agora o IE apresenta o ícone. Presumo, então, que o IE não suporta esses ícones em resolução 24 bits, o que é indiferente para o Firefox.
Mauricio, o site http://www.html-kit.com/favicon/ não está abrindo, nem o http://www.html-kit.com/ a não se que esteja em manutenção. Vc poderia indicar algum outro site que faça a conversão da imagem para ico?
Obrigado,
Ivan
Corrigindo, o Gimp pelo menos salva .ico, sim.
Há também uma outra ferramenta bastante simples, que se chama png2ico (http://www.winterdrache.de/freeware/png2ico/) que é para Linux, Windows, Unix. Se não me falha a memória, o favicon precisa ser de no máximo 256 cores, não? Alguém pode informar sobre o suporte do Internet Explorer 6 e 7 aos favicons? Parece que funcionam somente quando o link é acrescentado nos bookmarks (favoritos). Alguém pode confirmar? Me parece, também, que o Firefox teria suporte aos favicons em png, não? No entanto, o IE 6… Excelente artigo, Maurício.
Grande Maujor, muito boa matéria, já conhecia como fazer uma Favicon, mas aprendi de novo! bem, sobre o photoshop, ele realmente não salva com a extenção .ico….a não ser que você use um plugin. 😉
Interessante como vários recursos interessantes são implementados mas necessitam de um bom tempo pra cairem no gosto popular. Seria tudo culpa do medo de incompatibilidade entre browsers?
Uso esta marcação HTML em alguns sites mas, pra variar, o IE (6 e 7) não reproduz o ícone. Apenas o Firefox cumpre a missão. No início, usava nomes distintos para os “.ico”. Mas intrigado do porquê do IE não reproduzi-los resolvi adotar o nome padrão ‘favicon.ico’. Sem sucesso. Talvez houvesse alguma restrição para a seqüência de meta tags antes dessa declaração; removi todas as meta tags, preservando apenas marcação para o favicon e, mesmo assim, o IE não mostrou o icone. O mais curioso é que a instruções que utilizo na seção HEAD diferem pouco das instrução do site do Maujor. E meu IE reproduz o ícone do Maujor. Onde estarei me equivocando?
Bom recurso .. Coisas simples q fazem uma graaande diferença .