Have you ever noticed that websites have little icons next to them on tabs and near the URL? For instance, Blogger has the orange and white “B” logo, Google has their “g” logo, WordPress their “w” logo, etc? I had always wondered HOW this was done and this weekend I decided to make it my mission to not only figure it out but to get it working on my blog(s)
I did some research and found out that they are called “Favicons” short for “Favorite Icons” They are REALLY small, 16x16pixels. My next mission was to figure out how to make myself one and get it set up on this blog!
I opted to go with a musical note and in Photoshop I edited down to as close to 16×16 as I could get it. I saved the image as favicon.ico, which is the format it needs to be in for it to work as a favicon. Then I uploaded it to www.concertkatie.com, so it would show up there as well. (If you do not have a custom domain that you can upload to, you’ll have to find a place to host the image that is compatible with .ico files)
Once I had my image uploaded I had to go into the blogger design tab and click “Edit HTML” I had to search for the following line of code:
Underneath it, I had to add in the following code:
After I got that stuck in, I had to replace “IMAGE URL” with the actual URL (in my case, http://www.concertkatie.com/favicon.ico) Then I saved the layout and TA-DA – I have a nice new musical note icon next to my blog URL and tab on browser windows!
If your blog is hosted on WordPress.org and not Blogger, upload your favicon.ico into wp-content/themes/default (default might be the name of your layout, it was for me) Then add the following code into header.php (Go into Appearance and then Editor to find header.php)
There is no specific place to put this code, just make sure that it is done in the head tags.
If you got it to work on your blog, leave a link! I’d love to see what favicon you chose to represent your site 🙂