First things first, what is a favicon you ask? A favicon is the small icon you see in the URL field of your browser when visiting a website. If you bookmark a website, you’ll also see the favicon when looking through your bookmarks. If you look up into your URL field right now, you’ll see that the favicon for Looble is Tux the penguin!
So how do you create your own favicon? Keep reading…
Favicons are awesome!
I’m sure you’ve seen plenty of favicons while browsing the internet… Favicons rock, they allow for better site branding and give an appearance of professionalism. However, have you ever seen an animated favicon? That is to say, have you ever seen one that shows a moving image? They are rare, but actually quite easy to make!
How do I add a favicon to my website?
To add a favicon to your website, all you need to do is create an icon named favicon.ico and put it in the root directory of your website. It will then automatically show up for all users visiting your site! Pretty simple.
How do I create a favicon.ico file?
For more advanced users, you can draw it in Photoshop or Gimp. I recommend using Gimp since it is a free open source tool! Make sure you save the image in .ico format (this requires downloading a plugin for Photoshop). Alternatively, you can save the image as favicon.gif, then rename the file to favicon.ico and it will still work in all browsers I have tested (Internet Explorer & Firefox). Please note, for your favicon to work, it must be exactly 16×16 pixels.
For beginners, rather than create an image, you can use an existing image. I’m a beginner, so I decided to use a picture of Tux the penguin. Generating a favicon from an image file is very easy. HTML-kit.com offers a great tool which will let you choose an image file on your computer and have it converted into a favicon. You can also input your Twitter account and it will turn your profile picture in a favicon! That’s what I did. If you go visit my Twitter page, you’ll see Tux the penguin is my profile picture!
Once you have your favicon file, upload it to your server in your root directory.
How do I make my favicon animated?
For advanced users, use Photoshop or Gimp to create an animated GIF image. Once you have a 16×16 GIF animation, you can use it as a favicon. See code snippet below for how-to add it to your website.
Previously I mentioned that you can use HTML-kit.com to create a favicon. HTML-Kit also offers an extra option to turn your image into a scrolling animation. This might be all you need if your only goal is to try and make your favicon a little more noticeable to users browsing their bookmarks.
Another option is to visit GifAnimations.com if you’re looking for some free animations you can use. Any animated GIF image will work as a favicon as long as it is 16×16 pixels.
To use your animated .gif file as your favicon all you need to do is use the following code on your webpage:
<link href="images/favico.gif" TYPE="image/gif" REL="icon">
Why use an animated favicon?
Since the favicon will be displayed when a user is browsing through their bookmarks, the fact that yours is animated will make it stand out. This will help remind visitors to visit your website more often!
Another good reason for using an animated favicon is for better branding. Having a unique favicon is another way to make your website more memorable. Just make sure it’s not annoying. If it’s animated, it has to be good and fit the theme of your site.
