This tutorial was created in Adobe Photoshop CS3, however it should easily translate to any graphics program =o)
Let's begin with going over the different ways you can make your favicon.
I like to make my favicons entirely in Photoshop with a great plugin for PS & Paint Shop Pro from Telegraphics. It's a free download called ICOBundle Utility. You do not need to enter any information on that page, just click on the Download button. After you download it, unzip it and place the "ICOFormat.8bi" file into your plugins folder in Paint Shop Pro, or Plugins/File Format folder in Photoshop. Installing this plugin adds "ICO .ico" as one of the file format options for saving your graphics using the Save As.. function in your software program.
But maybe you aren't interested in adding this plugin to your graphics program. That's fine too! There are many favicon generators out there that you can use instead. Here is a link to Dynamic Drive's awesome Favicon Generator. To use this generator, you just need to follow the tutorial but where you are instructed to save as ".ico" save as .gif instead. Then you go to the generator and use the Browse function to choose your.gif file and proceed from there.
Okay, open a new canvas in your graphics program sized 96x96 with a transparent background. In truth you can use any multiple of the true dimensions of the favicon.ico file which are 16x16. You can even start with 16x16 if you wish, but that's a pretty small size to work in. If you are going to create your favicon pixel by pixel, then I recommend starting at 16x16. However, I like to use vector shapes and smooth typeface in mine so I like to start mine larger and resize to 16x16 before I save. So, for the purpose of this tutorial, open your new canvas at size 96x96.
Floodfill your new image with a color of your choice and then add a new layer. On the new layer you might want to start adding elements related to the current layout of your website. For instance if your current layout is a butterfly theme then maybe you would add a big butterfly to your icon. I like adding the intials of my website. Trying to fit the entire name of your website is pointless in most cases. Once you resize your icon to 16x16 it won't be readable. Keep resizing your icon to 16x16 as you add elements to make sure they are going to look good at that size =o)
Here is what I have come up with:
I tried to keep it kind of simple, which I think is very important. This image is going to be very small and has to represent your website. Initials, a couple "symbols" (such as the hearts in mine) and colors that contrast well. I chose purple and yellow as these are complementary colors on the color wheel and tend to make each other stand out more when combined.
Here is my icon resized to 16x16
I think its pretty cute, but as you can see the border did not translate well at all. I am going to go in and with my pencil tool add the border again pixel by pixel. This means I am keeping my image at 16x16 now as I add the finishing touches. And here is what I have:
I tried a few different colors for the border as the first border seemed a little too harsh for me, even though I liked it in the larger version. I think in the end I like the third icon with the pink border. I am going to move on to the next step with that one =o)
Merge your layers and go into File >> SAVE AS.. to save your icon as favicon.ico. If you installed the plugin from above, then you should be able to choose ICO .ico from the dropdown menu. If you decided not to use the plugin then save your icon as a .gif file and upload it into the generator =o)
Now that you have your favicon.ico, upload it into the main folder of your website (where your index pages is). Many browsers will automatically detect it as long as you have it named favicon.ico . However, just to make sure, you should add this code between the <head></head> tags of each page you want the icon to appear with. If you aren't up for editing all of your pages and don't use php includes than just adding it to your index.html page will make a big difference =o)
<link rel="shortcut icon" href="favicon.ico" />
There you go =o) Your very own, super cute favicon!!
If you have done everything I've instructed and you don't see your favicon next to your site title in the address bar and/or on the tab, then try each of these three things until you do:
Whimsical Wishes!
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
