Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Crie um favicon para seu site

Publicado em: 2007-03-5 — 96.159 visualizacoes         

um favicon de 16 x 16px exemplo 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:

  1. Gerar a imagem
  2. Colocar o favicon no HTML

Gerar a imagem

um favicon de 16 x 16px exemplo 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.

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:

Tela do formulario de entrada de dados para gerar favicon

Clique no botão “Procurar” (1) 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 no campo de texto “Sorce Image” (2). Clique no botão “Generate Favicon.ico” (3) e pronto. Está gerado seu favicon que será mostrado logo abaixo do formulário de geração conforme figura a seguir:

Tela do formulario de entrada de dados para gerar favicon

Na área “Preview” (1) você verá como ficou seu favicon.
Para visualizar o favicon no navegador, clique no botão “Teste in Browser” (2). Este passo eu considero desnecessário e aconselho você a não executá-lo.
Faça o download do favicon para seu HD clicando no botão “Download Favicon” (3) 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. 🙂

Extras

Voltemos à primeira figura mostrada lá em cima e vamos observar que existem duas opções adicionais para gerar o favicon. As opções são (ver na figura) “Animate Favicon” (4) e “Scrolling Text (Opcional)” (5).

Se você fizer tudo como foi explicado no primeiro passo e também marcar a opção “Animate Favicon” (4), será gerado um favicon que fica rolando a imagem verticalmente em um loop infinito. Experimente! Você verá o favicon rolando no “Preview” sem precisar fazer download.

Nota: 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.

A outra opção “Scrolling Text (Optional)” (5) permite que você digite um texto qualquer na caixa de texto e o seu favicon será animado também mas agora rolando na horizontal a imagem e a seguir o texto digitado em loop infinito. Experimente! Você verá o favicon rolando no “Preview” sem precisar fazer download.

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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://www.maujor.com/blog/2007/03/05/crie-um-favicon-para-seu-site/trackback no seu site.

59 comentários na matéria: “Crie um favicon para seu site”

  1. SurucuáNo Gravatar disse:

    Usei as dicas e criei meu favicon. Ficou excelente! Obrigado.

  2. MaujorNo Gravatar disse:

    Olá @Rodrigo,
    Não! O favicon só pode ser inserido na marcação HTML.

  3. RodrigoNo Gravatar disse:

    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!

  4. Rodolfo Pedro Albuquerque Andrade - Criar sites em BrasíliaNo Gravatar disse:

    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.

  5. maria elisa rodrigues de almeidaNo Gravatar disse:

    legal

  6. Wilson RamosNo Gravatar disse:

    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.

  7. MariaNo Gravatar disse:

    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???

  8. renatoNo Gravatar disse:

    Podem fala oque quizer eu fiz e deu serto @__@

  9. Marcio MeloNo Gravatar disse:

    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.

  10. Paulo HenriqueNo Gravatar disse:

    Rápido e direto, resolvendo o problema.

    Valeu amigo !

  11. Marcos De BonaNo Gravatar disse:

    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!

  12. AndréNo Gravatar disse:

    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… 😀 ).

  13. anonimusNo Gravatar disse:

    “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

  14. DanniNo Gravatar disse:

    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

  15. Rodrigo BorgesNo Gravatar disse:

    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.

  16. Rodrigo BorgesNo Gravatar disse:

    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

  17. DanniNo Gravatar disse:

    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

  18. Thiago FronzaNo Gravatar disse:

    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???

  19. Thiago FronzaNo Gravatar disse:

    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!

  20. Thiago FronzaNo Gravatar disse:

    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!

  21. BrunoNo Gravatar disse:

    abriuo icone no explorer só no firefox não ta abrindo

  22. DiegoNo Gravatar disse:

    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.

  23. BalbinoNo Gravatar disse:

    Muito boa a dica

  24. danNo Gravatar disse:

    Valeu MAJOR!!!!!!!!!!!!!!!!

  25. robertoNo Gravatar disse:

    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!

  26. Jose Carlos LarrateaNo Gravatar disse:

    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.

  27. Almir SegattiNo Gravatar disse:

    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

  28. Yan CaryNo Gravatar disse:

    Obs: não aparece de cara em nem uma versão do IE, mas aparece direto no FF.

  29. Rodrigo BorgesNo Gravatar disse:

    Não funciona no IE7 nem a porrete!!!

    Alguém tem alguma dica?

  30. Eduardo MenezesNo Gravatar disse:

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

  31. Eduardo MenezesNo Gravatar disse:

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

  32. João F. MeloNo Gravatar disse:

    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?

  33. RanieriNo Gravatar disse:

    Muito bom mesmo.
    Dica excelente.
    Valeu!

  34. Carlos ZaffonattoNo Gravatar disse:

    Coloquei até dois links

    e não funcionou no IE7

    Alguém pode me dar uma ajuda?

  35. RodrigoNo Gravatar disse:

    Loko cara. Seu blog já está no meus favoritos. Abraços Rodrigo

  36. carlaNo Gravatar disse:

    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!

  37. priscillaNo Gravatar disse:

    localizar imagens /gpj,gif,png,bpm/

  38. TioniNo Gravatar disse:

    Não uso conversores. Desenho no fireworks, exporto para GIF (256) e mudo a extensão para .ico … funciona normalmente.

  39. Josué AugustoNo Gravatar disse:

    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.

  40. Carlos Eduardo BorbaNo Gravatar disse:

    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

    😉

  41. Wilson José MorgadoNo Gravatar disse:

    à 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

  42. AdalbertoNo Gravatar disse:

    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.

  43. RicardoNo Gravatar disse:

    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!

  44. João PeterNo Gravatar disse:

    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!

  45. henriqueNo Gravatar disse:

    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

  46. rozenNo Gravatar disse:

    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?

  47. GracieleNo Gravatar disse:

    Espero q o photoshop nunca saia do ar…

  48. CesarNo Gravatar disse:

    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

  49. Jose Carlos LarrateaNo Gravatar disse:

    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.

  50. André M.No Gravatar disse:

    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?

  51. Newton de Góes HortaNo Gravatar disse:

    A título de contribuição: no endereço http://www.alvit.de/handbook/ na coluna miscelaneous tools você encontra alguns geradores de favicon.

  52. Jose Carlos LarrateaNo Gravatar disse:

    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.

  53. IvanNo Gravatar disse:

    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

  54. AndréNo Gravatar disse:

    Corrigindo, o Gimp pelo menos salva .ico, sim.

  55. André M.No Gravatar disse:

    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.

  56. SamuelNo Gravatar disse:

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

  57. lusojuniorNo Gravatar disse:

    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?

  58. Jose Carlos LarrateaNo Gravatar disse:

    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?

  59. chicosilvaNo Gravatar disse:

    Bom recurso .. Coisas simples q fazem uma graaande diferença .

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo