How to add favicon in WordPress using Jetpack

NOTE: From WordPress 4.3 onwards, it is recommended that you use the Site Icon feature that is built into WordPress, instead of following the guidance below. The Site Icon feature can be found by going to Appearance -> Customize and clicking on Site Identity.

In my earlier post Understanding favicon I explained what is a favicon, how to create and add it to your site. To add the favicon you have to create an icon and upload it to your server and then add some code to your site. However, if you have only WordPress site and you use Jetpack plugin, then you can easily add the favicon to your site using the new Site Icon module introduced in Jetpack 3.2

The Site Icon module will allow you to add an icon, which will be used as a favicon and mobile icon for your site. Once you enable the module and upload an image for site icon, Jetpack will insert the code to add a favicon as well as a mobile icon for your site. The code will be similar to the following:

<link rel="icon" href="https://www.virendrachandak.com/techtalk/wp-content/uploads/2014/11/favicon-5455266f_site_icon-32x32.png" sizes="32x32"/>
<link rel="apple-touch-icon-precomposed" href="https://www.virendrachandak.com/techtalk/wp-content/uploads/2014/11/favicon-5455266f_site_icon-128x128.png"/>
<meta name="msapplication-TileImage" content="https://www.virendrachandak.com/techtalk/wp-content/uploads/2014/11/favicon-5455266f_site_icon-128x128.png"/>

Steps to add a Site Icon

  1. Verify Jetpack plugin is installed and enabled
  2. Enable the Site Icon module under Jetpack > Settings.
  3. Go to Settings > General, and scroll down to Site Icon and click the Add a Site Icon button.
  4. Click the Choose File button to select the desired image/icon (should be at least 512×512 pixels) and then click the Upload Image button.
  5. Crop the image if required. You can preview how it will look. Click Crop Image button.

Using these steps you can easily add a favicon and mobile icon to your WordPress site using Jetpack Site Icon module. After adding it to WordPress you can easily copy the code and add it other parts of your site to add them to non-WordPress sections of your site.

Related posts:

  1. Understanding favicon
  2. How to change WordPress username
  3. How to make a WordPress menu item open in a new window/tab
  4. How to add CSS classes to WordPress menu item

1 thought on “How to add favicon in WordPress using Jetpack”

Leave a Reply