How to Create and Upload Favicons to Your Website

happy-kitten

It is a sign of professionalism to have a favicon on your website. A favicon is also part of the overall branding of your online presence. A nice favicon distinguishes your link among other bookmarked links. Also, users are more likely to click on a link with a favicon that stands out, so your site will get more traffic.

Create an Image

The first step in this process is to create an image that you will use as your favicon. If you already have a website, you probably have some branding images ready to use.

If you are only preparing to launch your website, use Microsoft Paint, GIMP, or any other image editor to create your image. The image should be at least 310px by 310px. I usually prefer 640px by 640px.

Save your image as a PNG file.

Faviconize the Image

Open the Favicon It website and upload your PNG image by clicking choose file.

After your image is uploaded, you can use the website’s simple built-in image editor to make changes to it, although I do not recommend this. The image you uploaded should already be fit for processing.

Now, you can click the blue faviconit! button to create your favicons from the uploaded image.

favicon-it

Favicon It

After a few moments, your favicons will be ready. You can download them by clicking the long green download my favicons button.

Unzip the Favicons

The favicons you downloaded are compressed into a zip file. So you first need to unzip this file.

If you don’t know how to do this on your computer, use the WobZip online tool. Select the zip file you want to uncompress by clicking Browse from computer and click Uncompress.

favicon-wobzip

Unzip the favicons using WobZip

Alternatively, you can copy-paste the link to the zip file created by Favicon It and uncompress the file without ever downloading the zip file to your computer.

You can now download all uncompressed files to your computer one by one.

Upload the Favicons

After you finished downloading your favicons, you need to upload them to the root folder of your web domain server. If you don’t know how to do this, you will probably need assistance from your webmaster at this point.

You will also need to add a few lines of code into your theme’s header.php file inside the head tags. At this point I am assuming that you are using WordPress.

The above lines of code specify the relationships between the uploaded image files and your website, so that browsers can correctly display them.

And that is all. Now all visitors to your website can enjoy your beautiful favicons.

Final Thoughts

Do you use favicons on your website? Did you create and upload them yourself? Let me know in the comments below.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

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