Tuesday, May 29, 2012

how to change your favicon


Last Sunday I successfully changed my favicon (it's not that big of an achievement, but I got confused at first). Anyway...I decided to make a tutorial on how to change your favicon (also for my future reference)
If you're like me who has a slight case of OCD and is very particular about minute details (and also if you want to change that boring Blogger favicon).
But first, what is a favicon?
A favicon is a small 16x16 icon that you see beside a URL. 
Why change it?
I read that it's easier to spot something in your bookmarks list if you have a more customized favicon. And also to make it more personal :)

So let's get started!




If you have noticed in the layout tab you can upload your image to be used as your favicon. I tried that way but it doesn't seem to work. 

1.)  The first thing you have to do is prepare the image you want for your favicon. You can create one in Photoshop. I also suggest that you save it as a .PNG format so it doesn't have a white background. Set your image size to 16x16. And I think your file size shouldn't exceed 100 k

2.) Once you're done with your icon, upload it to an image hosting site (I used Photobucket). Get the URL of your icon.



3.) Copy-paste your icon URL in the 'URL of your icon file'

(please go to this site so you can easily copy the icon's url on the code you need)



4.) Once you've done that, copy the code. Going back to Blogger, go to the template tab and click "Backup/ Restore" so you can get your layout code. I don't know how it goes for Windows (maybe it will be saved as a notepad file). But for Mac users it will be saved and opened in Dreamweaver. Just paste the code under the title tags. (correction: if you have Dreamweaver installed the codes will open there. If not, I'm not sure but I think it will open in notepad)

After that, save it and go back to the template tab, click Backup/ Restore again and upload your html code. And that's it! You have just changed your favicon :)

and oh, I  learned how to do this from http://tips-for-new-bloggers.blogspot.com/2007/02/adding-favicon-icon-to-blogger-url.html

1 comment:

  1. cute blog! :)
    btw, have you joined my giveaways already? :) please do join if you haven't yet. Thanks!

    http://loveandelegance.blogspot.com/2012/05/php-1000-gc-giveaway.html

    http://loveandelegance.blogspot.com/2012/05/loveandelegance-obsession-wout-limits.html

    http://loveandelegance.blogspot.com/2012/05/loveandelegances-firmoo-glasses.html

    ReplyDelete