Crie um favicon para seu site
Publicado em: 2007-03-5 — 17,247 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.
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 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:
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.
(1 votos, média: 5 / 5)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2007-03-5 (Monday). 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.
Bom recurso .. Coisas simples q fazem uma graaande diferença .
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?
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?
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.
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.
Corrigindo, o Gimp pelo menos salva .ico, sim.
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
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.
A título de contribuição: no endereço http://www.alvit.de/handbook/ na coluna miscelaneous tools você encontra alguns geradores de favicon.
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?
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.
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
Espero q o photoshop nunca saia do ar…
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?
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
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!
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, é 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.
à 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
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
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.
Não uso conversores. Desenho no fireworks, exporto para GIF (256) e mudo a extensão para .ico … funciona normalmente.
localizar imagens /gpj,gif,png,bpm/
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!
Loko cara. Seu blog já está no meus favoritos. Abraços Rodrigo
Coloquei até dois links
e não funcionou no IE7
Alguém pode me dar uma ajuda?
Muito bom mesmo.
Dica excelente.
Valeu!
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?
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….
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…..
Não funciona no IE7 nem a porrete!!!
Alguém tem alguma dica?
Obs: não aparece de cara em nem uma versão do IE, mas aparece direto no FF.
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
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.
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!
Valeu MAJOR!!!!!!!!!!!!!!!!