This tutorial shows how to create a custom favicon for your blog simply using MS Paint.
What is a Favicon and how it helps you ?
Favicon is small icon that is shown at the top on browser tabs before your page titles. Favicon helps you to add uniqueness to your blog. A user may be browsing multiple sites switching from one tab to another, your favicon helps adding a recognition to your blog.
If you are using genesis theme, you will have by default “G” favicon with black background. You can replace this favicon with your custom favicon.
Create Favicon using MS Paint
Before we see how to create our custom favicon, we should check that:
- Favicon is an image with equal height and width
- The size of the favicon is less than 4kb.
- The dimensions should be preferably between 48 x 48px to 196px x 196px.
- The favicon is preferably transparent.
First we will create the favicon in Microsoft Paint and later make it transparent.
Open MS Paint > File > New
And set the canvas size to 300px x 300px
Now using all your creativity, start building your favicon with Text tools, shape tools, Brushes etc. You can also choose the initial of your blog name as Favicon. For example, we will create a custom favicon as shown:
Now save the image as png format with name as “favicon.png”
Make sure that your favicon is equally spaced from all sides of the canvas.
Also, as we are going to make it transparent, keep any one color unique so that it could be made transparent. For example in above favicon, we have used white background so that part would be converted to transparent layer using some tool.
If you are using some expert image editing tools such as Adobe Photo Shop, you can have a background transparent layer. But for MS Paint, your images will not be saved with transparency.
Making the favicon Transparent
I personally use Lunapic for making images transparent.
Upload the “favicon.png” file that you created.
Follow the steps show in below image :
- Favicon is an image with equal height and width. YES
- The size of the favicon is less than 4kb. Depends on your favicon.
- The dimensions should be preferably between 48 x 48px to 196px x 196px. NO
- The favicon is preferably transparent. YES
Now to make it small in dimensions and size, we use the same LunaPic Editor. Save the image first so that your work is backed up. Now follow the below instructions.
Resizing the Favicon
Set the dimensions to 128 x 128 or 196 x 196 px. You can have any dimensions such as 16px, 32px, 48px but since we created it with MS Paint it would look distorted at smaller dimensions.
Now save your favicon which would be in gif format.