Have you ever noticed those little icons on the address bar and thought, "Hey, my blog sure could use one of those"? Sure you have.

These little guys are known as Favicons, and they do more than you might think. They can improve traffic and make your site look much more polished and professional. Today I'm going to show you a very simple way to make one using Photoshop and a little creativity.

So first thing's first, go ahead and open up Photoshop. NOTE: This technique will also work for similar programs such as GIMP if you do not have photoshop.


With Photoshop open, go to File > New and create a 64x64 pixel image. Set the color mode to 16 bit. The reason we are using a 64 x 64 pixel canvas is because using a canvas size of 16 x 16 is far too small to create an image. We will resize it to the actual icon size later.



The next thing to do is design a simple icon to be used as your favicon. Keep in mind that this image is going to be very small, so try to keep it as minimal as possible, nothing too fancy here folks, you'll thank me later. Here is an example of the one I created for this tutorial:


Again, nothing special, just a simple logo.



Once you are happy with the design, we are going to go to Image > Image Size... (or ctrl+alt+i) and set the Pixels to 16 x 16.



Go ahead and save the file as "favicon.png". Saving it with the filename "favicon" is highly recommended, as it will allow the best possible cross-browser compatibility. This means that users who run Opera, Firefox, IE, etc, will be able to see it.

Save the favicon as "favicon.ico" at this time as well, as you will be needing both in order for it to function properly. If you can't save as .ico in Photoshop, download and install the plugin from this website for your OS. This will let you save .ico files in Photoshop. Once you have both saved, upload them. I recommend using Ripway to host them.

So now that you have both the Favicon.png and the Favicon.ico, it's time to put the favicon on your blog. Open up your Blogger dashboard, and go to Template > Edit HTML. Hit CTRL+F and search <head>, and paste the following code right underneathe the head:



<!-- Favicon -->
<link href='http://h1.ripway.com/svodka/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://h1.ripway.com/svodka/favicon.png' rel='icon' type='image/png'/>



Replace 'http://your.username.googlepages.com/favicon.ico' and 'http://your.username.googlepages.com/favicon.png' with your uploaded file URL.

If you are not using Blogger, you only need the .ico file, so save it and host it, then insert this code into the <head>.


<link rel="Shortcut Icon" href="/favicon.ico">


Click on 'Save Template' and your done! Click view blog and check out your shiny new favicon!



Stumble Upon Toolbar