How to create a favicon.ico for your web site Como criar um favicon.ico para seu Web site

by Ross McKillop on May 2, 2007 por Ross McKillop em 2 de maio de 2007

Web Design & Dev

This brief tutorial will show you how to create a unique favicon.ico (that icon in your address bar - ex. Simplehelp’s favicon.ico is Este breve tutorial irá mostrar como criar um único favicon.ico (que o seu ícone na barra de endereço - ex. Simplehelp's é favicon.ico ) for your own site. ) Para seu próprio site.

A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar. Um favicon (abreviação de Favoritos Icon) é uma ótima maneira de dar o seu site um memorável e único ícone que será exibido na barra de endereços do navegador. In addition, favicon’s show up next to ‘your site’ when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site beside the bookmark name it is a good way let them find it again. Além disso, favicon's aparecem ao lado de 'site' quando as pessoas favorito dela, e uma vez mais gente tem uma lista muito bagunçado favorito, lembrança de uma gráfica de seu site favorito ao lado do nome, é uma boa maneira deixe-os encontrá-lo novamente .

  1. First, select the image you want to use as a favicon. Primeiro, selecione a imagem que pretende utilizar como um ícone. Something that blends in with your sites look, colour scheme and general “feel” is best. Algo que mistura em seus sites com aparência, cor e regime geral "sentir" é melhor. Since favicons are quite small, it’sa good idea not to try and get too complicated. Desde ícones são bastante pequenos, é uma boa idéia tentar e não ficar muito complicado. The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc. A imagem que você escolher deve ser um quadrado (64 × 64, 32 × 32, etc), e pode ser um arquivo JPG, GIF, png, o bmp etc
  2. Next, visit Em seguida, visita FavIcon from Pics Favicon a partir de fotografias - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic - Uma brilhantíssima (e livre!) Ferramenta online que pode gerar um favicon a partir de uma imagem, logótipo ou outro gráfico
  3. Upload your picture and click the magic Generate Favicon.ico button. Faça o upload da sua foto e clique no botão mágico Gerar favicon.ico. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button. Você terá uma prévia do seu favicon, e se estiver satisfeito com ela, clique no botão Download favicon. Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files. Favicon partir Pics irá pedir para salvar um. Zip - salvá-lo em seu desktop ou onde quer que você prefere para salvar arquivos. Unzip it. Descompactá-lo.
  4. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*. Fogo até o seu programa favorito FTP (ou qualquer ferramenta que você usa para fazer upload de arquivos para o seu web site) e fazer o upload do arquivo favicon.ico no diretório raiz do seu site *. You’ll want the file to be located at www.your-site.com/favicon.ico. Você deseja que o arquivo seja localizado em www.your-site.com/favicon.ico.
  5. Visit your web site to check out your new favicon! Visite o site dar uma olhada no seu novo favicon! If it doesn’t appear, you may need to clear your browsers cache and then reload. Se ele não aparecer, você pode precisar limpar seu cache e recarregue navegadores.
  6. * = if you don’t have access to the root of your site, add the following line of code somewhere in the <head> of your html: * = Se você não tiver acesso à raiz do seu site, adicione a seguinte linha de código em algum lugar do <head> do seu html:

    <link rel=”shortcut icon” href=”http://www.your-site.com/path/to/favicon.ico”> <link rel="shortcut icon" href="http://www.your-site.com/path/to/favicon.ico">

Related Posts: Posts Relacionados:
  • How to revert to the “old” Google favicon Como reverter para o "velho" Google favicon
  • Simplehelp Recap: May 2007 - wow, and thank you! Tampe Simplehelp: maio de 2007 - oba, e obrigado!
  • How to create a custom iPhone and iPod touch icon for your web site Como criar uma custom iPhone eo iPod touch ícone para seu Web site
  • Welcome! Bem-vindo!
  • How to insert a Google Map into your website using iWeb Como inserir um Google Map em seu site usando o iWeb
  • Get Simple Help tutorials just like this one in your email inbox every day - for free! Obter Ajuda Simples tutoriais apenas como um presente em seu correio eletrônico todos os dias - gratuitamente! Just enter your email address below: Basta digitar o seu endereço de e-mail abaixo:

    You can always opt out of this email subscription at any time. Você pode optar por sair semper deste e-mail subscrição a qualquer momento.

    { 4 trackbacks } (4) trackbacks

    20 Free RSS Readers Reviewed - Simplehelp 20 livre leitores RSS Revisitada - Simplehelp
    05.06.07 at 6:40 pm 05.06.07 às 6:40 pm
    WordPress: The Complete Post-Install Checklist, Redux - Simplehelp WordPress: The Complete Pós-Instale Checklist, Redux - Simplehelp
    05.26.07 at 2:15 pm 05.26.07 às 2:15 pm
    How to revert to the “old” Google favicon - Simplehelp Como reverter para o "velho" Google favicon - Simplehelp
    05.30.08 at 9:12 pm 05.30.08 às 9:12 pm
    Favicon Design : ..:.:.. Favicon Design: ..:.:.. Todd And = Marketing + Media ..:.:.. Todd = E + Marketing Media ..:.:..
    07.22.08 at 4:59 pm 07.22.08 às 4:59 pm

    { 1 comment… read it below or (1 comentário abaixo ou lê-lo ... add one adicionar um } )

    1 1 LGR LGR 05.30.07 at 9:55 am 05.30.07 às 9:55 am

    Good post. Bom post. I have used that favicon generator in the past and it works well. Eu tenho usado essa favicon gerador no passado e que funciona bem. Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here: Às vezes não tenho o tempo ou a fazer a minha própria criatividade e alguns têm encontrado grandes ícones gratuitamente aqui: http://www.freefavicon.com/

    Leave a Comment Deixe um comentário

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Você pode usar esses atributos e tags HTML: <a href="" title="Avião"> <abbr title="Avião"> <acronym title="Avião"> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>