( resource ) uploading a favicon tutorial:

What is a favicon? A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. (wikipedia.com)

Today I am going over how to add a favicon in blogger, for those blogger.com users :) If you don't use blogger, these seem pretty helpful: adding favicon in wordpress or favicon for your website.

There are a couple ways to get your favicon in blogger, but this is the easiest way I've found. Usually you deal with a .ico file. The only issue with .ico is that free uploading sites like flickr or photobucket do not regonize an .ico file and therefore, you can't upload it. Thanks to blogger buster.com, there is a way you can create a favicon using a .png file. So I am showing you how based off his steps.. Click below for the tutorial!

( note: the icon will only appear in firefox )

1) Create your favicon image. If you have photoshop or illustrator, you can create your favicon by creating a 16x16 pixel document. Remember, it's super tiny so it is probably best to use some sort of icon or shape. Obviously, no lines of text. If you don't have photoshop to create your own favicon, you can use this free favicon image editor and either upload a photo or color one in if you know how to work with pixels and squares ;) If you don't want to create your own, here are some free favicon's you can download from other sites:

121 Bitcon Icons from somerandomdude.com

182 Sweetie BasePack Icons from sweetie.ca

140 Mini Icons from famfamfam.com

247 flag icons from famfamfam.com

31 pixelicons from explodingboy.com

2. You need to get the format of your icon to a .png format. Use photoshop and "Save as" to create a .png file. If you don't have photoshop, simply go to the free online image converter and upload your icon. Then click the link below that says "Convert to PNG" and the file will download to your computer.

3. Locate your .png file on your computer. In your blogger dashboard, Go to Posting > New Post and upload your favicon .png file.

4. Then click on the tab "edit html". Copy the URL text that I have highlighted in the image. You need to publish the post so under "Post options", you can backdate it so you don't have a random post and no one will see.

5) Finally, go to Layout > Edit Html. In the code box, copy and paste the following code:

<link href='http://your-icon-url.png' rel='shortcut icon'/>

<link href='http://your-icon-url.png' rel='icon'/>

The blue URL text is the text you need to replace with the URL text you copied from step 4. I placed it in the part where I highlighted in the image. Just make sure it is between the &head> and < /head> tags. Click "Save Template" and see your new favicon loaded! :)

if you made it all the way through (hope it wasn't confusing!)
please comment with your blog link so i can see your lovely favicon ;)
and of course, comment if you have any questions or
get stuck and i'll try to help. have fun!
xo.