So here’s your step to step guide on how i made my favicon and how you can make yours.
‘Color 1’ is the colour of the edge of the rectangle and ‘Color 2’ is the rest of the rectangle.
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.
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.
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.
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.
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.
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.
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.
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.
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’.
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.
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’.
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.
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’.
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.