Tips/Tricks #5:
How to change your blogger icon (favicon)
By default, every blog on Blogger has that orange favicon. A favicon is located next to your blog name, and is displayed on tabs, next to the URL on the address bar and on blogrolls.
It's frustrating that Blogger doesn't have a default function for bloggers to easily change their favicon. And I was frustrated by constantly seeing that unanimous orange logo next to my blog name. So I put on my glasses and set to work trying to change it. And now I have a cute little cupcake next to Book Couture. Much prettier, and much more individual, wouldn't you agree?
Most book blogs I see don't have their own favicon. And this tips and tricks tutorial is my attempt to try and change that: by teaching everyone to change their favicon.
So if you are successful in changing your own favicon through this tutorial, please spread the word by linking this tutorial in a blog post. Hopefully, everyone can learn to get their own favicon.
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 1:
First of all, you need to find a square image for your favicon. It should be around 16 pixels by 16 pixels (16x16), or 32x32. Re-adjust it using a paint program such as Paint, Photoshop or GIMP (which is free) and save it as a .PNG file. Alternatively, you can find one at FaviconsRUs or IconJ. (If you do, proceed straight to step 3.)
You can also make your own using Favicon.cc. Thanks, Raven!
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 2:
Go to Convertico.Click on Browse, find your .PNG image, and click Open.
Then click on Convert.
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 3:
Go to PicPanda.Click on Browse, find your .ICO image. Select it and click Open.
Then click on Upload.
Then a page with several links will appear. Select the "Send to Friends" link, and copy it using CTRL+C.
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 4:
i. Go back to your blog, access your Dashboard, and the Design tab of your blog.
Click on the subtab Edit HTML.
ii. Backup your existing template before making any changes, by clicking on "Download Full Template" and saving it somewhere you will find easily.
iii. In the Edit Template section, click on CTRL+F, and search for </head>.
iv. Place the following code below directly below/after the </head> tag in your template.
<link href='pasteICOlinkhere' rel='shortcut icon' type='image/vnd.microsoft.icon' /><link href='pasteICOlinkhere' rel='icon'/>
v. Paste the ICO link from PicPanda into the two red spaces I have indicated, replacing the text "pasteICOlinkhere". (Note: they will not show up red in your Template HTML)
vi. Your code will look something like this:
http://picpanda.com/viewer.php?file=abcdefghijklimsjkhfk.ico
Replace the "viewer.php?file=" bit in both links with "images/" so that it looks something like this:
http://www.picpanda.com/images/abcdefghijklimsjkhfk.ico
vi. Save your template and view your blog. Your new favicon should appear in front of your blog name.
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you have any problems, let me know in the comments section below, and I will try my best to help you.
If this works for you, link to this post at your blog, so that others can get their own favicon too.
Or maybe share it with that handy little widget below!
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
For more Tips & Tricks from Tina:
- T&T 1: Links, Coding and Video Embedding
- T&T 2: Symbols and Ascii Art
- T&T 3: How to make Pages
- T&T 4: How to make a 2 column/3 column layout
