How to make a favicon Como fazer um favicon

Posted on April 10, 2008 at 5:10 am Postado em 10 de abril de 2008, 5:10 am

Looking for a way to create a FavIcon ? Procurando uma maneira de criar um FavIcon? If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. Se você navega na web regularmente, você provavelmente notado que um grande número de sites têm um pequeno ícone que aparece na frente do site endereço no seu navegador ou bookmarks. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents. Muitos sites usam favicons (aka Favorito Icon), como forma de marca seu site, de modo que quando você vê que o ícone, você automaticamente sabe qual empresa ou produto que ele representa.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid: Por exemplo, dê uma olhada no seu endereço bar agora e você verá que, à esquerda do URL é um pequeno ícone que parece com uma grelha:

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them: Além disso, se eu olhar para o meu Firefox ou IE Favoritos Favoritos, vejo também a mesma favicons ao lado de qualquer site que esteja utilizando-se:

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site? Usando um FavIcon para o seu site é uma boa prática, visto que ajuda os visitantes a identificar rapidamente o seu site entre um grande número de fichas, etc Então, como você vai fazer sobre a criação de um FavIcon para o seu site?

How to make a FavIcon Como fazer um FavIcon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. O primeiro passo na criação de um FavIcon é realmente encontrar uma imagem ou criar um gráfico que pretende utilizar como seu ícone. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture. Um FavIcon sempre tem uma dimensão 16 × 16 pixels, por isso você deve ter muito cuidado ao escolher ou criar a sua própria imagem.

Try to find an icon or graphic that has very little going on with it in terms of design. Tente encontrar um ícone ou gráfico que tem muito pouco acontecendo com ele em termos de design. The simpler graphic you can find, the better your FavIcon will turn out. O gráfico simples que você pode encontrar, a sua melhor FavIcon vai sair. Also, make sure that the graphic is a square, so basically where the length and width are equal. Além disso, certifique-se de que o gráfico é um quadrado, de modo que basicamente o comprimento ea largura são iguais. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished. Se você tiver um retrato ou paisagem foto, ela será redimensionada para 16 x 16 e, portanto, tornam-se tanto ou squished esticadas.

You can also create your own image using Microsoft Paint or similar photo editing software. Você também pode criar a sua própria imagem usando o Microsoft Paint ou similar foto edita o software. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format. Quando estiver concluído, certifique-se de salvar o arquivo em GIF, JPG, PNG, BMP ou formato.

Now that you have your image, go to Agora que você tem sua imagem, vá para DynamicDrive DynamicDrive and let’s use their FavIcon generator to create our FavIcon from the picture. E vamos usar os seus FavIcon gerador para criar nossos FavIcon da foto.

Go ahead and browse to the location of your image file and then choose Create Icon . Vá em frente e navegar até o local do arquivo de imagem e, em seguida, escolha Criar Icon.

And really that’s it! E realmente é isso! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image. Irá agora receber uma antevisão de como seu FavIcon ficaria em um navegador real e pode proceder ao download do FavIcon ou você pode simplesmente escolher outra imagem.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. O que eu gosto sobre este site é que ele também lhe dá instruções sobre como instalar um FavIcon ao seu site, que é um pouco mais difícil do que realmente criar o próprio FavIcon. Here’s what you need to do: Veja o que você precisa fazer:

First, download the file and then upload the FavIcon, which by the way should be named “ FavIcon.ico ” to the ROOT directory of your site. Primeiro, faça o download do arquivo e, em seguida, carregar o FavIcon, que pela forma como deve ser nomeado como "FavIcon.ico" para o diretório RAIZ do seu site. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. É muito importante que o arquivo seja chamado favicon.ico e que ele seja localizado no diretório raiz do seu servidor web. You can verify that you uploaded it correctly by typing Você pode verificar se você fizer o upload corretamente, digitando

http://mysite.com/favicon.ico Http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. No navegador do local, onde "mysite.com" é o seu web site Internet do endereço. Now you need to insert one line of code into the <HEAD> section of your web sites pages. Agora você precisará inserir uma linha de código na seção <HEAD> de suas páginas web sites. Note that this code has to be on every page that you want the FavIcon to appear for. Note-se que este código tem de ser em todas as páginas que você deseja que sejam exibidos para o FavIcon. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually. Isso é fácil se você tiver um site que usa modelos e puxa no cabeçalho, rodapé, e outros arquivos individualmente.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. Se todas as suas páginas são estáticos e não usar modelos ou inclusões, você terá que editar manualmente o código HTML em cada página. The line of code you’re going to want to add is as follows: A linha de código você vai querer adicionar é o seguinte:

<link rel=”shortcut icon” href=”/favicon.ico”> <link Rel="shortcut icon" href="/favicon.ico">

The icon may not show up immediately, so be patient. O ícone pode não aparecer de imediato, assim que esteja doente. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug. Além disso, outras vezes, não aparece em tudo, especialmente com IE como há um bug do navegador.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. Esperamos que com este breve tutorial tem sido capaz de criar um FavIcon e obtê-lo para cima e trabalho em seu site. If you have any questions, feel free to post a comment! Se você tiver alguma dúvida, sinta-se livre para escrever um comentário! Enjoy! Divirta-se!