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
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
After a few moments, your favicons will be ready. You can download them by clicking the long green
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
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
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
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.
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: