WordPress Tutorial

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.

Example of WordPress favicon

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 website’s ID; therefore it should be your own logo that appears up there. Ignoring its presence on your site is indeed a blunder.

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

  • Stands Out as Brand Recognition
    Most users tend to open multiple tabs in their browsers. Without a favicon, you can only see the page or post name in the browser tab. Additionally, if you open more than 20 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 website with no favicon 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 website.

Creating favicon for WordPress

Usually, your favicon is your brand’s logo. For the image, WordPress 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 image editing software such as Adobe Photoshop (paid) and Gimp (free) or online favicon generators.

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 a WordPress favicon from your 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 website’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.

  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');

Conclusion

Having a favicon is a must! Especially, when it’s this easy to create and a favicon to 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.

About the author

Dina F.

Dina is a digital content writer at Hostinger. Having 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.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
Best 5 WordPress Calendar Plugins for 2019

Close