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

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

In this step by step and easy to follow tutorial, I will show you how to add Favicon to WordPress.

Before that, though, let me ask you…

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

If so, please keep reading. The article below should help you.

If you want to know how you can make $1,200+ a month online from the comfort of your home – well this is your chance

It’s FREE to get started, too (no credit card required). You’ll like that part…


1. How is Favicon Useful?

There is a simple trick that helps your website to stand out from the crowd. The secret lies in a tiny icon on a tab of your browser. This icon 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?

1. Stand Out From the Crowd

If you have not added your Favicon yet, a default image looks like a little blank page. Something like that:

No Favicon installed

Not impressive, do you agree?

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 Favicon to your website. This way, your site looks more polished and has more credibility in your customers’ eyes.

2. Your Site is More Easily Recognized

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

People are visual by nature, which is why we recognize images and colors much faster than information hidden in the text. Look at the picture below. That is part of the 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.

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 look professional, even if you just started. It will also confirm your returning customers that they returned to the right place.

Imagine for looking for legit work-from-home opportunities and finding THIS when you go inside… WOW
click here to learn more

It won’t cost you a bean to find out if it can help you.


2. How Big Brands Design Their Favicons?

The 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 better 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

3. Make Your 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 Favicon. Please notice that the Favicon will be tiny, only 16×16 pixels, so

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 a .jpg file, the result will still be a white background.

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. On their homepage, you should see something like this:

Favicon Generator

Click the “Choose File” button and choose your image. At Favicon Size, it is up to you to 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, skip section #4, and jump right to section #5.

4. How to Add Favicon to WordPress

Log in 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” that 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 the “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.


What if I could show you a real system you can use to put $1,200+ per month into your account, working from the comfort of your home…

…Would you be interested?

click here to learn more

If you’re interested don’t hang about. Just click here right now


How About You?

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 – 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! :-)

    • Thank you Cathy for the feedback. I am happy to hear that my tutorial was helpful. God bless you too and have a blessed Christmas season. :)

  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

    • Egon Sarv says:

      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.

      • Thanks for pointing that out Egon. I have now changed to a transparent background and it does look better. Thanks again, Peter

        • Egon Sarv says:

          Thank you for the feedback, Peter. I am glad that this tutorial helped you :)

  3. J Soto says:

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

    • Egon Sarv says:

      Thank you very much, for the feedback and for the encouraging words. Glad if you found it helpful. :)

Leave a Reply

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