blogger visitor
Le Blog de Sushi: How to add a favicon to your blog or site

Thursday, June 04, 2009

{ How to add a favicon to your blog or site }

Difficulty: Medium
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.

16 comments | How to add a favicon to your blog or site

Mads said...
on

Thanks for this tutorial! I've always wondered how they put those icons there..=) Now I know..

-Mads
fashionisthebestmedicine.blogspot.com

Reply
Damsels said...
on

thanks for this . i wonder what i'll put up there though yours is cute .
weweredamsels.blogspot.com

Reply
Maggie said...
on

Thanks so much for this tutorial, i m going to try them out soon! xoxo

Reply
an92 said...
on

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

Reply
Esz said...
on

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!

Reply
Daydream Lily said...
on

aw thanks so much for posting this :)

Reply
Charmaine said...
on

very helpful! i didn't even know what a favicon was... until today! woohoO!

Reply
Diane said...
on

great tutorial. i'll have to see if i have the nerve to try it. i'm so bad with computers!!! :P

Reply
Sadie's Wardrobe said...
on

Ah I'd always wondered how to do these!
Thanks!
xxx

Reply
Style Gazing said...
on

thanks for the great tutorial! will try soon! :)

Reply
cocorosa said...
on

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! :)

Reply
Lorraine. said...
on

Oh, you know I may try this?
But now I have to think about what i'm going to choose as for icon... Mmh

Reply
Humpty Dumpty said...
on

Thanks for the tutorial :)
i was wondering how people do it....Thanks again!

Reply
Natalie said...
on

Oh yay you should do more tutorials, this is great! Share you awesome knowledge :D

x Natalie

Reply
sagar said...
on

Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?

Reply
Malicious Mallory said...
on

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.

Reply

Post a Comment