How to create a custom favicon for your blog.

 
Before i even start, many of you will be questioning what on earth is a favicon?
Don’t worry i was doing exactly the same before i lean’t exactly what it is.
What is different about my help is that i’m going to explain exactly what it is and help you with every step on how to create your own for your blog.
 
What is a favicon? Well, it’s only been recently that i’ve actually found out the meaning of favicon.
The meaning of favicon is “favourite icon”.
To make things even easier for you. It’s the little icon which is next to the site or page name in your browser tabs. It’s there to help identify a website.
 
Here are some favicon’s to show you exactly what they are.
Facebook, Twitter, Blogger, PicMonkey and my blog Kaitlin Louise.
 
 
 
Now you know what it is, it’s time to help you create your own, step by step.
Just a couple of tips before you start. When choosing what your favicon is going to look like just take into count that it shall be shrunk in size by rather a lot. A lot of the detail of it shall be lost.
You might also want to think about choosing something which ties in with your blog header and blog button, you need something which goes along with your whole blog as it’d be something which people who recognise.

So here’s your step to step guide on how i made my favicon and how you can make yours.

 

Step 1:
 
First you need to go to PicMonkey (www.picmonkey.com).
 

Step 2:
 
Up the top of the page you shall see 4 items, ‘Edit’, ‘Touch Up’, ‘Design’ and ‘Collage’. Here is where you need to hover over ‘Edit’ and this is where it shall drop another menu.
When the drop down menu appears this is where you shall see 3 images on the right hand side, this is where you need to select one of them.
 

Step 3:
 
When you’ve selected the picture it shall open. This is going to be the base of your favicon.


Step 4:
 
On the left hand side there are 8 symbols. At this stage you only need to be interested in the 5th symbol from the top, the butterfly symbol. When you select the butterfly you’ll have a menu beside it appear, this is where you need to select ‘Geometric’ and select the first rectangle in the list.
 

Step 5:
 
When you’ve selected the rectangle, it shall appear on the image and you have a pop up menu appear.
As i want a white background for the favicon, on the pop up menu i shall be needing to changing the colour to white.
 
*Tip* On the pop up menu theres ‘Color 1 and Color 2’.
‘Color 1’ is the colour of the edge of the rectangle and ‘Color 2’ is the rest of the rectangle.


Step 6:


Once you’ve changed the colour of the rectangle you’ll need to stretch the rectangle over the background. As you can see there’s no more flowers it’s all white.

Once you’re happy with what you’ve done, you’ll have to look at the top of the screen and look for the slim grey bar which starts with ‘Open’, you’ll need to go to the second object from the end and select that on.

 
Step 7:
 
First of all, this is optional but i decided to change the size of the favicon to 100×100 so it’s easier to work with.

If you want to change the size you need to head to the left hand side. We’re looking for the crop icon which is the first in the list. This will show you a list of items, you need to go to the bottom of the list where you’ll find ‘Resize’ you need to select that.

Step 8:

If you’re wondering why i suddenly have a bigger favicon, don’t worry because all i did was zoom into the picture. Next step is to add some text. On the left hand side there are 8 symbols. At this stage you’re only interested in the 4th symbol from the top, the capital t and the lower case t, which looks like ‘Tt’.

Here as you can see, i have selected the font i am wanting to use.


Step 9:


Once you’ve selected the font you’re wanting to use, you’ll have a text box appear, this where you shall need to type whatever you’ll be wanting in your favicon.



Step 10:


Here this is where you need to add a symbol or writing, i have chosen that for my favicon i’d want my blog name ‘Kaitlin Louise’.

On the left hand side, my pop up menu has appeared and this is where i can change the size of my writing so it’s more readable.


Step 11:
 
Next you’ll be needing to resize your image to see whether it works and if you’ll be able to read what’s on your favicon.
Far on the left hand side, we’re looking for the crop icon which is the first in the list. This will show you a list of items, you need to go to the bottom of the list where you’ll find ‘Resize’ you need to select that.
When you’ve selected ‘Resize’ this is where you need to change the size to 16×16.
Why 16×16? The reason for changing to 16×16 is because favicon’s are actually the size of 16×16. It’s better to preview what it’s going to look like before you save everything to find your favicon just does not work. As you can see, you can not see at all what my favicon says on the image above and also the image at the end of this paragraph so i shall have to redesign my favicon.  
 
 

Step 12:


After my first favicon not working, i decided to redesign my favicon.

I decided to change the canvas colour to grey and then add a white circle on the top. As having ‘Kaitlin Louise’ on the last favicon not being readable, i then had to rethink that idea. I decided that using ‘KL’ would work just as well as ‘Kaitlin Louise’. Next step is that you’ll need to resize the image again to check if you’ll able to read the favicon.
So again on the left hand side, you’re looking for the crop icon which is the first in the list. This will show you a list of items, you need to go to the bottom of the list where you’ll find ‘Resize’ you need to select that.


Step 13:
 
When you’ve selected ‘Resize’ this is where you need to change the size to 16×16.
As you can see the favicon has changed size, on the picture above it’s not very clear but at the end of this paragraph i shall show you the actual image of the favicon. Before you apply the 16×16 size you actually need to resize the favicon again.
 
 


Step 14:


Once again you shall need to change the size of the favicon. The only difference this time is that you need to change the size of the favicon to 32×32 this is the last time you shall be needing to change the size of the favicon. This part is important, you NEED to change the size.



Step 15:


You need to go to http://tools.dynamicdrive.com/favicon/ 

When you have this page appear, you need to go to the section which says ‘Image to create icon from’. This is where you need you to upload the image you have just created in PicMonkey.


Step 16:


After selecting the favicon which you created it then appears in the box as you can see. On the right hand side of the page there’s optional options and the top option is one which you need to select so you need to tick where it says ‘Merge with a 32×32 desktop icon’, once you’ve done that you need to select ‘Create icon’.



Step 17:


Lower down the page, it’ll give you a preview of what it’ll look like on your desktop and also what it’ll look like in the internet search bar.

This is where i shall explain why i decided to have a grey background rather than a transparent background.
Due to the fact i have a white circle on my favicon with my initials on it, a transparent background would just not work with the internet search bar. So with a grey background it works perfectly.


Step 18:


Once you’ve done all of the above, it’s time to add your favicon to Blogger.

You need to go to your home page and select your blog name, that then brings you to another page and this is where you’ll see the list which is above. You need ‘Layout’.


Step 19:


Once you’ve selected ‘Layout’, it shall take you to the layout of your blog. As you have created a favicon you need to look for the favicon section which is in the top left hand corner.


 
 
Step 20:


After you’ve selected the favicon option you then have a ‘Configure Favicon’ pop up menu appear, this is where you need to upload your favicon. Once you’ve upload your favicon it then appears on the pop up menu you then select ‘save’.



Step 21:


You’ve now reached the end,  you’ll see in the top left under the favicon title that your favicon has appeared. Once you’ve done that it’s time to ‘Save arrangement and you’ve successfully upload your very own favicon to your blog.


Well, I hope this has helped you. If you have any questions then don’t hesitate in contacting me and i’ll help you as much as i can. Thank you for taking the time reading this, i know it’s a very long tutorial.

Want other tutorials? You can find some more here, at Kaitlin Louise.

Set up a custom domain in Blogger 

Make a circle profile picture for Blogger

Make a Blogger header with PicMonkey

Follow: