Assumed knowledge: This tutorial assumes you know how to upload files to a host, and know the basics of Photoshop or other image editing program.
A favicon (short for favorites icon) is a 16x16 pixel square icon associated with a particular website or blog. It appears next to the address bar, within a browser tab, and on the bookmarks list. While not a necessity, a favicon can help strengthen your branding and help users recognise your site.
Locate the <*/head> tag in your blog code and paste the following HTML before it:
<*link href='favicon.ico' rel='icon' type='image/ico'/>
<*link href='http://yoursite.com/image.ico' rel='shortcut icon'/>
Open your image editing program and create a new file that is 16x16 pixels in size. Once you have completed the design of your mini icon, save it as a jpg, gif or png file.
Go to http://www.favicon.cc/? and click 'Import Image'. Use 'Browse' to find and select your favicon image, then click 'Upload'. Under the 'Preview' section of the page, click 'Download Favicon' and save a copy to your computer.
You will now need to find a place to host your icon. As ico files are not considered image files, hosting sites that only allow hosting of images (such as Flickr and Photobucket) won't allow you to upload the file. Instead, if you own a domain you can upload the favicon there. For those who don't, I'd suggest signing up with a free hosting site such as 000webhost.com, which allows you to upload via FTP or their file transfer page.
Once you have successfully uploaded your favicon, go back to your blog code and replace the highlighted URL of the original code with your favicon's URL:
<*link href='favicon.ico' rel='icon' type='image/ico'/>
<*link href='http://yoursite.com/image.ico' rel='shortcut icon'/>
Don't forget to remove the asterisks or the code won't work. Save and refresh your blog and you should now see your favicon in the address bar.
Thanks for this tutorial! I've always wondered how they put those icons there..=) Now I know..
-Mads
fashionisthebestmedicine.blogspot.com
thanks for this . i wonder what i'll put up there though yours is cute .
weweredamsels.blogspot.com
Thanks so much for this tutorial, i m going to try them out soon! xoxo
Thanks Sushi! Yours is very cute and it does help me know which blog is yours by visuals, I might try one myself later :)
x
Thats a really great tute :-D
I found online somewhere that it's easier to start with a 64 x 64 px image to do your art and then shrink it down to 16 x 16 once you're done.
I did that with mine and it was quite easy. Let Photoshop do the hard work!
aw thanks so much for posting this :)
very helpful! i didn't even know what a favicon was... until today! woohoO!
great tutorial. i'll have to see if i have the nerve to try it. i'm so bad with computers!!! :P
Ah I'd always wondered how to do these!
Thanks!
xxx
thanks for the great tutorial! will try soon! :)
this is genius :) I love your geek diy's so much :) I soooo have to try this.. first make a lil logo haha and I love your little black ribbon! perfect! :)
Oh, you know I may try this?
But now I have to think about what i'm going to choose as for icon... Mmh
Thanks for the tutorial :)
i was wondering how people do it....Thanks again!
Oh yay you should do more tutorials, this is great! Share you awesome knowledge :D
x Natalie
Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?
This was super helpful! Thanks!
But I actually just used a .png image in the code instead of .ico and it still works just fine - a lot easier than making a hosting site and everything.