What is a Favicon & How to Make One For Your Blog

I've read a lot of amazing blogs lately, because of Alex Beadon's Feel Good Blogging Challenge.  I noticed one thing was missing from many websites so I decided to merge my helpful post with my tutorial post (day 3 & day 5).  Many blogs/sites didn't have a favicon.   


                                The arrows point to my (and Google's) favicon.

A favicon is short for favourite icon.  It is saved as a .ico file which is short for Windows Icon.  Just look at the top of your browser now and you will see the website icon for each open tab. 

1.  You have a favicon 

You can test your favicon here at Real Favicon Generator.  Enter your website and it will show what your favicon looks like on different browsers.  Below, you can see that my desktop view is OK but iOS, Android and Windows 8 views are highlighted in red because my flavicon doesn't work. 

2. You don't have a favicon

If you are viewing your website (using one of these platforms) and you don't see your logo here, you do not have a favicon.

Don't worry if you don't have a favicon.  It's easy to make and you don't need Photoshop.  If you already have your logo in PNG format and it's a square, great!! For reference, my PNG is 300 px by 300 px. 

 If you need to make a png file you can make one using the online design website, Canva.   Canva is a ridiculously cool and easy-to-use online design tool for presentations, business cards, graphic design an so much more!  Check them out!  You won't regret it!    Here is a brilliantly thorough Canva tutorial by Vicky - a fellow feel good blogger from Random Little Faves.  

Canva even has a design school!  I've used it and it's incredible helpful!                          Source: https://designschool.canva.com/

NOTE: If you use Wordpress, there are plugins for favicons, so you can check these out before going to the next step. 

The next step is to upload your PNG at Real Favicon Generator.  You will get a few options like I did in the photo below but it can get very complicated.  Since I have a very new blog, I left all the options as is, but feel free to experiment.

This is where it get's a bit tricky.  Depending on your website's platform, you will have to search for additional instructions to place the HTML code.  When you extract the zip file, you will see your logo in each different size for different browsers/phones.  

Source: http://realfavicongenerator.net/

If you use Squarespace like me, you can easily upload one of your PNGs here, then place the code in Settings --Code Injection -- Header.  At first, I used my PNG without the code as a shortcut but as you saw from my test, it won't be well designed for all devices.

You can upload one of the files here.  I uploaded a PNG as it is easier than a .ico file.  It says Internet Explorer doesn't support PNGs but I don't mind losing the transparency when viewed with IE.  Some people might prefer seeing a white background.

You might be wondering why you should go through all this trouble for a tiny icon at the top of your browser?  Well, wouldn't it be better to have your own icon instead of a third party icon?  It shows clients and readers that you pay attention to detail and might even help them recognise your branding.

This post was longer than I wanted but I hope it was helpful.  I am not a pro at this but I thought it would help someone like me who is new to running their own website.  If you have any more ideas or websites that do a better job at making favicons, comment below.  Also let me know how you liked using Canva! :)  Bye for now! 

See my previous challenge post Day 4 | Ten Things About Me