Oct

11

2010

Tutorial: Make a Custom Favicon

blog design / blog design tutorials / custom blog design / Modern blog design / tutorials  Posted by / 0 comments

So, um, what’s a Favicon? And why would you want a custom one? Well, a Favicon is that little symbol beside your website address. And, um, why wouldn’t you want a custom one? I mean, duh, the Blogger Favicon is ugly as all get out, no?!? So, let’s learn how to make one of our own, ‘kay?

1. Let’s take a look at that Blogger Favicon one last time:

2. So, let’s start with making a custom favicon, using your design program of choice (Photoshop, Photoshop Elements, Gimp, Paintshop Pro, yada, yada, yada). Make it 16px x 16px with a resolution of 72 px/inch:

And that is what you’ll see:

I know, it’s really tiny, but it’s supposed to be. So, anyhoo, decorate it to your pleasing. Obviously, keep it simple, cuz, again, it’s tiny. I used the letters, BSD, for Bright Sunshine Designs, and I gave it a blue background to match the look of my blog, but you can do whatever you like. My only recommendation is to fill the background with a solid color (even if it’s just white), as transparent images do not turn out well.

So, once you’ve designed something that you like, save it as a jpg, png, or gif (whatever your preference is), and save it to your desktop (makes it easier to find it in the following steps…)

3. Next, we’re going to upload it to a FREE Favicon hosting site. I use this one:

4. So, go ahead and choose your saved image from your desktop and upload it, like so:
5. Next, you’ll get to preview what your favicon will actually look like in an address window. If you’re happy with it, go ahead and copy the Direct Link (if you’re not happy, make a new one, obviously, and repeat these steps):
6. Okay, so now, log into your blogger account and click on the “Design” tab in your dashboard.

 

7. Click on the “Edit HTML” tab:

 

8. Next, always download a copy of your full template (just in case you mess anything up):

 

9. At the top of your html, look for the text <b:skin> (should be about 8-10 lines down):
10. Paste in the copied link from step 5 DIRECTLY ABOVE this text.
11. Now, click “Save Template.”
12. Alright, let’s take a look-sey at your blog to see what you’ve done:
So, that’s it! Your very own favicon. It really wasn’t that hard, was it?
If you would like to have your own favicon, but you and HTML are not friends, I’ll be happy to make one for you for a mere $5. Or, if you prefer, you can buy a complete blog makeover via The Illuminating Package for $75, and it comes included.
Thanks for stopping by!