How to Add a WordPress Favicon

A favicon is a tiny square icon representing your website. It usually appears next to the website’s title in the browser tab. A favicon also shows up in your browser’s history, bookmarks, and any location where your website needs a visual identity.

This small detail is essential for your online identity. We will discuss the WordPress favicon and how to add one to your WordPress website.

Why Adding a Favicon to Your Site is Important

Favicon is basically your site identity; therefore it should be your own logo that appears up there. Ignoring its presence on your site is indeed a blunder.

Example of WordPress favicon

Here are some reasons why a favicon is vital to your site.

Stands Out as Brand Recognition

Most users tend to have multiple tabs open in their browsers. Without a favicon, you can only see the page or post name in the tab. Additionally, if you open more than 20 browser tabs, they get shorter, and it’s hard to identify which tab represents which site.

Having a favicon helps users spot each tab more easily. If your favicon stands out, it will enhance not only your visibility but also your user experience.

Build Trust

You will give your users a poor first impression if you don’t have a favicon. A site with no favicon images doesn’t look professional.

If you make a website only for daily blogging, not having a favicon may be unimportant. But, it becomes essential when you run a company’s website or an online store.

Your visitors won’t trust any transaction on a website that doesn’t look professional.

Improve Mobile Experience

This is the era of the mobile experience. Having a responsive website might not be enough to delight mobile users, mainly because web-apps are on the rise right now.

Users can simply make a website bookmark on their phone’s home screen. No more URL-typing is necessary!

In this situation, having a well-made favicon will serve you in two different ways. First of all, the favicon will be used as the app icon and secondly – people using your web-app will memorize your icon. Therefore, your favicon will be associated with your site.

Creating favicon for WordPress

WordPress is one of the most popular content management system (CMS) in the market and it’s no surprise that it has many features, even for the images. So for the favicon image, since it’s your brand’s logo, it recommends you to use a square, that’s 512px x 512px in size.

You may use a larger image, but WordPress will most likely ask you to crop it to fit the size.

To create an image that is exactly 512 pixels x 512 pixels in size, you can use any existing image editing software such as Adobe Photoshop (paid) and Gimp (free) or online favicon generator options such as, and

Although you can pick a background color for your WordPress favicon, transparency is more preferable. You can use .jpeg, .ico, .gif or .png file formats (just make sure to use the .png format if you use a transparent background).

After the image is ready, you can add that to your WordPress site using one of these three methods:

1. Adding a WordPress Favicon via WordPress Customizer

Starting from WordPress 4.3 version, you can simply add your own favicon from your WordPress customizer admin area. To get this done, follow the steps below:

  1. Go to your Admin Dashboard.
  2. Hover your mouse over Appearance -> Customize.
  3. Choose Site identity.
  4. Click Select Image button under Site Icon section.
  5. Upload your favicon that has been prepared.
  6. Click Publish button to save the change.

If you do the process properly, your favicon will appear next to your site’s title. To set this up on a mobile device, go visit your website from your phone and select Add to Homescreen.

Your favicon will now appear on your home screen.

WordPress customizer how to upload a favicon

2. Adding a WordPress Favicon to Site With a Plugin

You can also add a favicon to WordPress with the help of a plugin called Favicon by RealFaviconGenerator. It’s easy to use and offers more functionality. These are the required steps:

  1. Go to your Admin Dashboard
  2. Choose Plugin -> Add New
  3. Type Favicon by RealFaviconGenerator in the search box
  4. Install and activate the plugin
  5. After activation, go to Appearance -> Favicon
  6. Upload the image that you want to set as your favicon. You don’t need to edit your image using image editing software. The plugin will do it for you. Just make sure that your image is at least 70 x 70px in size. It’s even better if it is above 260 x 260 px.
  7. Once you upload the image, hit the Generate Favicon button.
  8. After you click the button, the plugin will take you to the RealFaviconGenerator website.
  9. On the website, find and click Generate your Favicon and HTML code button.
  10. The plugin will bring you back to your website. You will receive a notification that your favicon has been set up.
  11. Check how your favicon looks in your browser and mobile device.
Favicon Generator options, compile a favicon.

3. Adding a WordPress Favicon to a Site Manually

We recommend you to test this in your local development site first before it will go live. Here are the steps to follow to add a favicon manually in WordPress:

  1. Access your theme files via an FTP client or File manager
  2. Find the /wp-content/themes/your-theme folder
  3. Upload your favicon to your theme folder. It is recommended to upload it to a subfolder like Assets
  4. Remember this file path
  5. Find a file named function.php  and add the following code function add_favicon() { echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.png" />'; } add_action('wp_head', 'add_favicon');
  6. The line after href=”‘.get_template_directory_uri() should be the path to your favicon. Make sure you also have the right file name. If you use a .ico file format, then this will be the one: function add_favicon() { echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.ico" />'; } add_action('wp_head', 'add_favicon');


Having a favicon is a must! Especially when it’s this easy to create a favicon for WordPress.

A favicon represents your website identity. It may occupy only a little spot on your site, but this small detail has a special role in enhancing your brand recognition and user experience.

The author

Dina F.

Dina is a Digital Content Writer. With years of experience in digital marketing and website creation, she seeks to help Hostinger users learn more about internet marketing and WordPress. When she is away from her keyboard, she likes to have short city tours and explore new local food places.