How to add favicon to website

what is favicon?. You might come across the term favicon when it comes to web design and development. But what is it exactly? Well, in this article, I’ll be answering your question and showing you how to add a favicon to your website. Let’s get started!

What is a Favicon, and Why is It Important?

Simply, a favicon is your website logo that appears next to the meta title on your browser tab. In other words, instead of showing a blank document icon on the browser, your website will display your official website icon.

Most websites usually use their logo as a favicon. This way, your visitors will easily notice your website when they’re opening a lot of tabs in a single browser window. Plus, your site will look much more professional.


How to Add a Favicon to WordPress

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).

Although you can pick any background color for your WordPress favicon, but 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:

you can simply add a WordPress favicon from your admin area. To get this done, follow the steps below:

WordPress Favicon via WordPress Customizer

  1. Go to your Admin Dashboard
  2. Hover your mouse over Appearance ->Click 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 Favicon via 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.

WordPress Favicon via Manually

We recommend you to test this in your local development site first before it will go live.

  • Access your theme files via an FTP client or File manager
  • Find the /wp-content/themes/your-theme folder
  • Upload your favicon to your theme folder. It is recommended to upload it to a subfolder like Assets
  • Remember this file path
  • 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');
  • 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');

How Can You Add a Favicon to Your Website?

The easiest way to add an icon to your site is by uploading it as a .png or .ico file from your hosting’s File Manager. Follow these steps to do so:

  1. Prepare a square dimensioned image in .png or .ico format for your website logo.
    If you already have a .png file, use it. However, convert the image to .ico format using if you ever need to.
  2. Rename the .png or .ico image to favicon.
    Most browsers automatically detect favicon.png and favicon.ico file located in your website directory as your website’s icon. So, you’ll need no coding.
  3. Login to your Hosting Provider
  4. Access your public_html folder by heading over to your hPanel, then File Manager -> Go To File Manager.
  5. Upload the favicon.png or .ico file into your public_html folder. Reload your website, and you’ll see the favicon.

If you have an image other than .png or .ico format (jpg, BMP, gif, etc.), you can use it as your website’s icon as well. However, you need to modify the header.php file on your currently used theme folder. To do so, perform these steps on your hPanel.

  1. Access File Manager -> Go To File Manager -> public_html.
  2. Upload the image into your public_html folder
  3. You may both keep the original name of the image or rename it to favicon. It’s recommended to rename the icon to distinguish it from other images.
  4. Go to the wp-content -> themes folder. Then, access the theme folder you’re currently using.
  5. Open the header.php file and paste this following syntax just before the end of the <head></head> tag:
  6. Change the /jpg and /favicon.jpg parts according to the format and the name of the image you’re about to use.
<link rel="shortcut icon" type="image/jpg" href="/name.jpg"/>
  1. Once you’ve saved your changes, the image should now display as your website’s icon.
  2. If you can’t see the new favicon, clear your browser cache and restart your browser.

As you can see, having a favicon on your website is crucial. Not only does it make your site distinguishable on browser tabs, but it also gives a professional look to your website.

Leave a Comment