I will show you different ways to generate favicon. Apply whatever option best works for you. Also, you’ll know how to implement the favicon on your website.
Gauger
It’s a Font Awesome favicon generator and you can create a favicon from any Font Awesome icon. Just choose an icon, change the background color, icon color, download and use it. Pretty straightforward.
It’s a free online tool.
Canva
Not everyone will use Font Awesome icons for their favicon. And Canva allows you to create your own favicon & other graphic assets.
It has both FREE & PRO versions. You can definitely use its free version to create a favicon.
Go to Canva, and click on “Create Design” & choose “Custom Dimensions“. Use 40 x 40 Pixels dimensions to create a new design.
Not to mention, 32 x 32 Pixels is a good choice for a favicon but Canva does not allow any design less than 40 x 40 Pixels. However, you will be able to crop your Favicon while uploading it on the website.
Once you created the favicon, just download & use it on your site.
Photoshop
You can create a favicon very easily in Adobe Photoshop. If you already have installed Photoshop on your computer, go to File => New and create a transparent layer with 32 x 32 Pixels. Once you created the design, save & upload it to your site.
Photopea
It’s a free online photo editor & very similar to Adobe Photoshop. You can use it to create a favicon as well.
There are many other online tools that you can use to generate a favicon for your website. But most of them are plastered with ads and very difficult to navigate. I found the above tools very smooth & user-friendly.
How to implement favicon on your website
I will show you the process both for WordPress & Non-WordPress sites.
How to upload favicon to WordPress website
Navigate to “Appearance => Customize” and then “Site Identity“. Now you will see an option called “Site Icon“. This is the option where you can upload the favicon on your WordPress site.
Implement favicon on Non-WordPress & static websites
Firstly, upload your favicon in the root directory or in a folder. And then link your favicon icon within the “head” tag. The link code will look like the following:
<link rel="icon" type="image/png" href="image/favicon.png">Assuming you uploaded the favicon.png in a folder called “image.”
Reference: w3.org.
A favicon accepts three formats: png, jpg & ico. Most of the site owners use PNG format with transparent background. Use whatever you are comfortable with.
FAQ
Favicon refers to shortcut icon, browser tab icon, or bookmark icon. It’s a square size icon that can be found on the left edge of your browser tab.
Favicon is your website & brand identity. It also has a positive impact on SEO & helps your visitors to recognize your site quickly among multiple tabs and bookmarks.
A favicon generator tool helps you to customize & create it. You can also hire a graphic designer to design it to match your brand. But if you’re a DIY person and want to get it done quickly, then use any of the above tools to generate favicon.
