HOW-TO make favicons by yourself | Ozone Eleven

HOW-TO make favicons by yourself


April 6, 2010Tutorials4 Comments

A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.

Lets have a look on a nice tutorial HOW-TO make favicons by yourself

All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one

Download The Plugin

You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.

link to follow photoshop favicon tutorial , but I would really suggest You to just use favicon generators to automate the process.

So I will cut workflow into steps:

a.  You must make 16×16px small image – it`s really small, so You can put there just very simple and remarkable shapes, so sure it is a little challenge. Save image as *.gif, *.jpg or *.png.

*comment – You can make 32×32px icon too, but that`s not really necessary – it will be shown only if user on his Bookmark/Favorite toolbar enable  it to display large icons.

b. At this step favicon generators will take place. Sure, web is full of those, but I choose only the most useful of them :

1.  Nice design and very easy to use application:

2. as always always some good solution:

3. tool, which I prefer to use this generator because there`s an option to make animated favicon to make it more remarkable and conspicuous

Just upload Your image and download generated version, check animate favicon if You want to get one.

To submit favicon to Your web-page upload it on Your web-page and add the following code between <head> … </head> section :

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >

congratulations you have created and uploaded gr8 favicon.

4 Responses to “HOW-TO make favicons by yourself”
  1. Jack

    Thanks for this detailed tutorial, I was looking for this from very long.

  2. Thanh May

    I savoured reading it. I need to read more on this topic…I am admiring the time and effort you put in your blog, because it is evidently one great place where I can find lot of useful info..

  3. Tea

    I want to say your blog is very good. I always like to learn something new about this because I have the similar blog in my Country on this subject so this help´s me a lot. I did a search on the issue and found a good number of blogs but nothing like this.Thanks for writing so much in your blog.. Greets, Tea

  4. Teodora Pala

    Normally I don’t read post on blogs, but I wish to say that this article very forced me to try and do so! I`m Comedykellner and Zauberer and I love to entertain with Zauberei. I surprise how much effort you put to create such a excellent informative web site.

Leave a Reply

You must be logged in to post a comment.