A favicon is something that you've perhaps seen but didn't know it has a name. That was me a while ago. After a few attempts (trial and error) I managed to add a favicon to Highball Blog and in this post I'm gonna teach you how to do it on your Blogger/Blogspot blog.

Favicons are those small images that you see in the browser's address bar, shown before the URL of a website or blog. Not all websites display them but those who do are more likely to make a favorable impression on the viewer. We've got so used to see logos attached to any kind of venture that favicons are their normal extension on the web - in the browser to be more specific.

Let's get to the point and see...

How You Can Add a Favicon to Your Blogger Blog

Before jumping into technical stuff let's agree that you need to design a logo for your blog. And when I say design I don't mean you have to create a masterpiece in seven colors, gradients and textures. No! It's all about simplicity.

If you think your blog should get an original symbol logo then create a logo but in most cases - especially with personal blogs - having your name's initials in a small square or circle will do.

Tips for logo design:

Work with three colors maximum

Use solid colors (no gradients, no textures/pattern fills)

Use simple shapes

Work with few elements (don't crowd the logo with too many shapes)

Make sure your logo looks good in black and white too

Think about it from a branding perspective (make it memorable)

Create the logo in an image editor/computer graphics software that you're familiarized with. If you don't have such software installed on your computer then I suggest you go and download Inkscape - an open source vector graphics editor that competes with major expensive software.

Save your image as PNG file.

Now you need to resize your image. You can do that with Microsoft Office Picture Manager in a few easy steps:

Open your file

Hit the Edit Pictures button

Click Resize (the right sidebar menu)

Enter 16 in the Custom width x height fields (favicons must be 16 pixels wide/16 pixels tall for a proper display in the browser's address bar)

Click OK

Save your new image with a different name as to not replace it with the original one (Save as... - name-of-file-16-px.png)

Click on the image below for a visual explanation of the process.

Once you have the new resized image you must host it somewhere online. I recommend Media Fire as it's free, reliable and convenient. Create an account and upload your image. Note that you can use Media Fire for sending files to people or for storing your own important documents - it can be an alternative to Dropbox (not that smart as Dropbox but good enough for this purpose).

After you upload the picture to Media Fire go through the following steps:

Click on the Share button to see all the sharing options

Copy the HTML Embed Code and paste it into a Notepad blank document

Look for the piece of code that looks like this: img src="http://www.mediafire.com/imgbnc.php/325ea55e0637fca99dc362b7970078862g.jpg"

This particular piece of code (purple line) is the link of your image hosted on Media Fire; img src stands for Image Source

Copy the code within the inverted commas and paste it lower in your Notepad document as you'll need it in the next step. Please note that your code will be different that mine!

Replace the red line with your favicon source code (purple line) that you saved earlier in the Notepad document

Click Save Template

Done!

Note that Highball Blog runs on Three Column Minibox Template which I downloaded from here. If adding the favicon doesn't work on your current blog theme, you may find other solutions in these Google search results.

This article will be added to the list you can see in the right sidebar called Tutorials for Bloggers. If you think these technical posts on blogging belong somewhere else, let me know and I'll create a separate blog just for that. I tend to mix these two topics - internet and outdoor activities - as I love them both. :-)

Hey! You Look Cool in a Highball Shirt

Resources

The Essential Guide for Smooth Vids

How To Master Your GoPro Camera Like a Pro (even if you don't know anything about shooting or editing videos)

+ How To Make Money on YouTube (Bonus Section)

Don't freak out! I hate spam too.

Your email is safe with me.

+ You'll Also Get These Extra (FREE) Materials:

How To Get Free Outdoor Gear from Sponsors

How To Make Viral Videos - 3 Lessons from Devin Graham (King of YouTube)

3 Cool Ways To Get Paying Clients as a Videographer

How To Be Creative without The Pressure

You Don't Have To Struggle To Learn How To Shoot and Edit GoPro Videos on Your Own. Take The GoPro Video Editing Course and Easily Publish Your First Video without Mistakes.

Hi! My name is Constantin and I'm an outdoorsy dude who enjoys shooting and editing action sports videos. Here you can learn GoPro tips, how to build DIY video gear and you can also read our outdoor gear reviews. More about me here.