Do you have a custom favicon for your blog? Do you want to learn what a favicion is and how to make a custom favicon for your blog? My setp-by-step tutorial will give you valuable insights on favicon. You should have a favicon installed on your blog – to make it look professional and prettier.

Welcome to another session of #SaturdayTutorials with Tina which I started last week. Every Saturday I’ll be posting some tutorial and ‘how to’ posts on blogging better and making your blog better. I might do some sessions on social media as well some time later.

In this ‘how-to’ post I am going to show you how to make Custom Favicon for your blog with free tools. I am a complete Photoshop and Illustrator junkie and most of my stuffs are done there. But for tutorial sake I am going to use all free tools. And for this post I am going to use Picmonkey.

We announced winners for #ThankfulThursdays and #FridayFotoFiction for last week and as winning prize they both will be getting Custom Favicons for their blogs! Custom made by me for them and I am going to show you how to design a favicon, generate a favicon file and install that in your blog – for both Blogger and Wordpress sites.

What on Earth is a Favicon?

Are you thinking in mind what the hell is this girl going on writing about favicon! What on earth is a favicon??? Well look up to your browser tab do you see a tiny logo on the browser tab next to the name of the site? That my friend is a Favicon – shorter version of ‘Favorite Icon’!

Do I Really Need this Tiny Little Thing?

Don’t underestimate the power of the tiny image. It is as powerful as your blog’s logo or header. A Favicon helps you to visually identify your sites tab in browser. Did you ask what the name of your Blog is doing then? Open some 10-12 new tabs in your Chrome or FireFox you will understand what I am saying.

How to Design your own Custom Favicon?

For this tutorial I am going to do two favicons for kreativemommy and sirimiri. When I checked their blog I didn’t find a custom logo on which I can build up. In my future tutorials I’ll show you how to make logo or blog header and that might help you guys.

Create the Graphic

Using Picmonkey create a graphic close to your blog’s logo or header in a square shape in 512 x 512 pixels. Always work on transparent background.

Now using Overlays and Text tool create a desired shape or initial for the blog. It’s better if it is relevant to your blog / blog’s niche / blog’s logo.

Pro Tip – Simpler the better – too many things in this small space will not be visible.

I am making a simple shape and initial for kreativemommy in tune with her blog’s color scheme.

You will find shapes under Overlays > Geometric. I am using two shapes to make a callout bubble.

Save the image in .png form (it will come as default since we have taken transparent background).

Generate .ico File

The favicon is essentially an icon and has to be saved as .ico file. There are tons of free tools on the net which help you creating this. We will be using the Iconifier for today’s tutorial. I like it because you have tons of options to choose from.

Click on choose file to choose the .png file that you have saved on your system from the previous step. And then click on iconify.

This will give you many options. Click on the tiniest one at the last which is the favicon.ico file. Save it on your system.

So now your favicon is ready.

How to install Favicon on your Blog?

For Blogger

Go to Layout from your dashboard and upload the favicon.ico file in the favicon section on top left.

For Wordpress.com Blogs

Go to Settings > General > Blog icon

Upload the .ico file. Sometimes wordpress dot com blogs have problem with .ico files. If you face that problem use .png file that will work too in wordpress.com blogs.

Now you are all set to go even if your blog is opened in a device with higher resolution like an apple device with retina display.

For Self – Hosted Wordpress Site

Go to Appearance > Customize>Site Identity > Site Icon and upload the favicon.

This is how it looks on my Site Tina Basu

So now your favicon is up and running in every kind of platform.

Still not sure how it is going to help?

Here is what happens when you have 12 tabs open on your browser.  Without the favicon one wouldn’t even know which site is open. I suggest your favicons that resemble your sites logo so that it is easy to identify – which essentially is your brand.

Simplest and tiniest of things can be important too. Remember that.

Things to keep in mind  while making your favicon

Do not use light colors – the browser tab is mostly light grey – so light color will get lost

Do not use thin script font – that will be completely missed

The actual favicon size on the browser is tiny – 16 px x 16 px. So keep things simple. We have taken 512 px x 512 px because the resolution of screens differ from device to device. Whatever is the device you want your favicon to look great – be it a laptop or an iPhone or an iPad.

Here is how kreativemommy’s favicon looked earlier (on left). And next to it you can see the new one (which I have uploaded on a test site). Can you spot the difference in visibility?

Sirimiri on the other hand didn’t have a favicon so far. But now she can flaunt one – a vibrant one, that too!

Here are the winning two favicons for Deepa and Mayuri.

Hope you liked this Favicon Tutorial and I have made it easy for you to understand – the need of a custom favicon, how to design one, how to make the .ico file and how to install it in your site.

Now exercise for you is to make a custom favicon for your site, upload it and let me know how it is!

If you liked this tutorial – hit the like button or share it on your social media and tag me.

Let me also know what all you would want me to do a tutorial on. I will make tutorials based on your suggestions.

So I’m signing off here today. Come join me for another session of fun learning next Saturday!