HOW-TO make favicons by yourself

Posted on 06. Apr, 2010 by admin in Tutorials

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. DynamicDrive.com as always always some good solution:

3. kit.com 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 :

congratulations you have created and uploaded gr8 favicon.

Tags: favicon, icons

Interesting News from the Web

5 Responses to “HOW-TO make favicons by yourself”

DIY Residential Solar Power ? Alternative Energy Systems for Off Grid Living! | DIY Solar Power
06. Apr, 2010
[...] HOW-TO m&#1072k&#1077 favicons b&#1091 yourself | Ozone Eleven [...]
Jack
06. Apr, 2010
Thanks for this detailed tutorial, I was looking for this from very long.
Thanh May
08. Jan, 2011
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..
Tea
12. Jan, 2011
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
Teodora Pala
12. Mar, 2011
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.