saturday-tutorial-header-how-to-make-a-custom-favicon-for-your-blog2

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’!

favicon

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.

saturday-tutorials-how-to-make-custom-favicon-for-your-blog-1

saturday-tutorials-how-to-make-custom-favicon-for-your-blog-3

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.

saturday-tutorials-how-to-make-custom-favicon-for-your-blog-4

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.

saturday-tutorials-how-to-make-custom-favicon-for-your-blog-iconifier

saturday-tutorials-how-to-make-custom-favicon-for-your-blog-iconifier2

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.

saturday-tutorials-how-to-make-custom-favicon-for-your-blogblogger

For WordPress.com Blogs

Go to Settings > General > Blog icon

saturday-tutorials-how-to-make-custom-favicon-for-your-wordpressdotcom

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.

saturday-tutorials-how-to-make-custom-favicon-for-your-wordpressdotcom2

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

saturday-tutorials-how-to-make-custom-favicon-for-your-wordpress

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

Still not sure how it is going to help?

saturday-tutorials-how-to-make-custom-favicon-for-your-blog

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?

saturday-tutorials-how-to-make-custom-favicon-for-yourblog22

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

sirimiri-f

saturday-tutorials-how-to-make-custom-favicon-for-yourblog22

Here are the winning two favicons for Deepa and Mayuri.

sirimiri kreativemommy

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!

 

tinabasu

10 Comments on Saturday Tutorial – How to make a custom Favicon for your blog

  1. Mayu
    November 12, 2016 at 7:11 pm (4 weeks ago)

    Wow, Tina! What a treat this is! not only do I get a Favicon, but I also get to learn to make myself one.
    Your Saturday Tutorials are fun, easy to follow and so aesthetically pleasing too, really enjoying them. I learnt to make a Badge last Saturday and a Favicon today. Eagerly awaiting to see what next Saturday will bring!

    Reply
  2. Geethica Mehra
    November 12, 2016 at 9:15 pm (4 weeks ago)

    Well again Tina,how do you manage to do such wonderful things?I will try one for myself and would let you know for sure.
    Geethica Mehra recently posted…Words that strengthened meMy Profile

    Reply
  3. Deepa
    November 12, 2016 at 11:21 pm (4 weeks ago)

    Awesome..thanks a lot for making this favicon for me. Loved it and can’t wait to display it on my site. And got to learn it too so it’s a double treat actually.
    Deepa recently posted…A Broken Home- #FridayFotoFictionMy Profile

    Reply
  4. Shalini
    November 13, 2016 at 12:02 am (4 weeks ago)

    You are doing such a noble thing you know. I had this favicon made for my site. But not this way I guess.I don’t know how I did. N I never knew it was called favicon 🙂 what a lovely gift for the girls. Awesome.
    Shalini recently posted…Pavakkai FryMy Profile

    Reply
  5. upasna
    November 15, 2016 at 11:59 am (3 weeks ago)

    Lovely Tina…The tutorial is so simple to follow. I have a Favicon for my Blog but I would definitely want to try this for my new Craft website. Thanks. Keep coming up with more tutorials. I am sure everyone would wait for them.
    upasna recently posted…Entering 30s series- Treating myselfMy Profile

    Reply
  6. Seema
    November 16, 2016 at 10:47 am (3 weeks ago)

    Nice post. I be taught something more difficult on totally different blogs everyday. It’ll all the time be stimulating to learn content material from other writers and follow slightly one thing from their store. I’d want to make use of some with the content material on my weblog whether you don’t mind. Natually I’ll provide you with a link on your internet blog. Thanks for sharing.

    Reply
  7. Arnaba
    November 16, 2016 at 5:15 pm (3 weeks ago)

    Thanks Tina for this amazing tutorial session.. I didnt know about favicon earlier. But the moment i kearnt about i have tried it on my blog. it looking wonderful.. do have a look.. i not a pro in it but i have tried something new.
    http://scribblerarnaba.blogspot.in/

    i am looking forward to your future tutorials..

    Reply
  8. Arnaba
    December 7, 2016 at 11:53 am (4 hours ago)

    Hello Tina!! thanks for checking out my blog and suggesting the improvisations of my favicon. please do check, i have made the suggested changes. hope this one better..

    https://scribblerarnaba.blogspot.in/

    keep writing and guiding.. waiting for your tutorials..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment *






CommentLuv badge