How to Add Favicon to WordPress – Give Your Site a Pro Look

How to Add Favicon to WordPress – Give Your Site a Pro Look

Before showing you how to add Favicon to WordPress, let me ask you:

Do you want your website to stand out from the crowd and root stronger into your customers minds?

There is a simple trick that helps you achieve it. The secret lies in this small icon on a tab of your browser. It is called Favicon, from the words “Favourites Icon.”

See! It’s here:

What is Favicon and where to find it

This small design element has a significant role in your online campaign. You may wonder, though, how this tiny piece of graphics could be beneficial. And then, how to add it to your website?

Let’s dig into the details.

1. How is Favicon Useful?

1.1. Stand out from the crowd

If you have not added your Favicon yet, a default image looks like a little blank page. Not really impressive, is it?

No Favicon installed

Free web software like WordPressWix, etc., have their default Favicons, but they too are not attractive. Or, they are promoting their brand, not yours.

In fact, tons of small businesses and blogs don’t have Favicons installed. Therefore, it’s your chance to stand out by adding your personal Favicon to your website. This way your site looks more polished and has more credibility too in the eyes of your customers.

1.2. Your Site is More Easily Recognized

By adding your Favicon you save your clients time. How?

People are visual by nature, and this is why we recognize images and colors much faster than information that is hidden in the text. Look at the picture below. That is part of Google Chrome bookmark menu.

Can you recognize some of the Favicons?

Favicons at the bookmark menu
But look at the image below. All the favicons are just blank pages and don’t tell you anything.

Bookmark menu without Favicons
You want your brand to root into people’s minds so use your Favicon and help them identify your website.

1.3. Sign of Trust and Professionalism

Building trust with your customers is one of the primary functions of your visual branding. Without Favicon added you send your customers a message that you are not quite professional. You tell them that you are still a newbie. This small design element with only 16×16 pixels in size helps you to look professional, even if you just started. It will also confirm your returning customers that they returned to the right place.

2. How Big Brands Design Their Favicons?

Common practice is to use a logo as a Favicon. However, there are two main problems:

  1. A Favicon is tiny – only 16×16 pixels in size.
  2. A shape of a Favicon is square.

These might be problems because many logos are too complex to display at such small sizes, and many of them fit rather into rectangles than squares. So how do companies solve these problems?

Some examples:

1. Facebook uses its logo:

Facebook logo and favicon

2. Paypal uses its logo too:

That's how Paypal favicon looks like3. CNN fits its logo into the Favicon, See! The text is tiny:

Cnn logo and favicon

4. Twitter is using its logo:

That's how Twitter favicon looks like


You got the point, right?


3. Make Your Own Favicon

Use your favorite image editor (or Gimp, MS Paint, Paint.Net, etc.) to design your Favicon. Choose a canvas with 500×500 pixels.

1. Choose a canvas with 500×500 pixels.

2. Design the Favicon. Please notice that the Favicon will be tiny, only 16×16 pixels, so

3.1 Give Your Favicon a Transparent Background

If you want to give your Favicon a transparent background, use your image editing software to make the background transparent first. Chessboard-like grey-white background means it is transparent:

This is transparent backgroundFollow these steps.

1. Create a new file, say 500 x 500 pixels. This new image file has only one layer – the background. And the background is white.

A first there is only one layer

2. The easiest way to make the background transparent is this. You add another layer and then delete the original background layer. So from the main menu choose Layers → Add New Layer. Now you have two layers. Do you see, the second layer is transparent? It’s like a transparent film.

The second layer is transparent

3. Now delete the original background layer. For this select the Background layer, then click Layers → Delete Layer.

4. After that, you have only one layer, and this is transparent. Now design your favicon.

5. If you are happy with it, then save the file as .gif! 

DO NOT save it as a .jpg file!

Note! If you save it as .jpg file, the result will still be a white background.

3.2. Turn Your Image File Into a Favicon

After you are finished with your Favicon design, go to Here you generate a Favicon.Ico file from your image. At their homepage, you should see something like this:

Favicon Generator

Click “Choose File” button and choose your image. At Favicon Size, it is up to you decide how big you want it. You can leave it 32×32 pixels. Hit “Generate Favicon”. Your Favicon is generated, and you are asked to download a Favicon.ico file to your computer. Click “Download Your Favicon Here”.

Download Favicon


Note! You may also want to try this Online Favicon Maker to create your Favicon.

If you don’t have a WordPress site, then skip the section #4 and jump right to the section #5.

4. How to Add Favicon to WordPress

Login to your WordPress website and go to “Plugins” → “Add New“. Type in “Favicon” and click “Search Plugins”.

Search Favicon Plugin


A list of available plugins is provided. I prefer “All in One Favicon“. It supports .ico file formats but also .gif and .png. I recommend using the favicon.ico file. Some applications may not read favicon png and gif versions. So .ico is the safest way to go.

Click “Install Now” and after installation click “Activate Plugin“. That will take you to the Plugins page. Find your newly installed Favicon plugin and click “Settings“. You see two sections here: “Frontend Settings” and “Backend Settings” which both allow .ico, .gif and .png file formats. If you followed the instructions here, you have the favicon.ico file. Upload your newly created favicon.ico file into respective places of “Frontend Settings”:

Favicon Frontent settings


and “Backend Settings”:

Favicon Backend Settings

After that hit “Save Changes” button.

Congratulation! Your Favicon is created and uploaded. You can go to your website and check it out.

5. Add the Favicon to Your Website

If you don’t have a WordPress website, do the following:

1. Use your favorite FTP program to log into your site.

2. Go to /httpdocs/ and find the file named favicon.ico. Delete it.

3. Upload your newly created favicon.ico file in that folder.

4. Go to your website and refresh it in the browser window. The Favicon shows up now.

Before You Go:

If you have any questions or comments about the topic that you want to share, please leave them in the comment form below.



  1. Egon,
    This is another awesome article. Thanks for sharing!!! It really was an excellent tutorial. Keep it up my friend.

  2. Thanks for this tutorial, Egon. Very useful and easy to follow. With the help of this post I’ve just added a favicon to my site. Thanks, Peter

    • Thank you for your feedback. Glad to hear, the tutorial was helpful. I checked out and you have your favicon. Great. My recommendation is that make a transparent background, otherwise it is like white rectangle. Then I noticed that I had not really explained how to make a transparent background. I already improved my tutorial and added the section to explain it better. So you see, you helped me to improve my content too :) Thank you very much.

  3. Egon – You have written an incredible article of “how-to” … it was so simple to make the favicon for my site! Never knew how to do it until you showed me here at your blog. :-) Truly appreciate it and appreciate you sharing your knowledge. God Bless! :-)

Leave a Reply

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