How to add a favicon to WordPress

Introduced way back in 1955 by Internet Explorer 5, a favicon (short for favorite icons) became a significant part of a website visual identity. Today, among many elements like logos, headers, videos and images, this small icon is inevitable part of a website and it’s something you shouldn’t neglect when building a new site. You don’t want your brand new site to have an icon of a blank page, do you?

The icon is displayed in a browser on desktops, laptops, and mobile devices and you can see it on top of the tabs, right next to URLs and also in bookmarks – it is the favorite icon, right? The icon is usually 16×16 or 32×32 pixels big and presented in .ico format. New internet browsers will recognize other formats with no trouble, but if you want your customer, who still uses an older browser, to be able to see your fancy new icon, be sure to convert it to .ico format.

In WordPress, there are different ways of adding a favicon and we’re about to show you some of them. If you want to add a favicon for admin pages separately, you can see how to add admin favicon in WordPress.

Theme options:

Depending on the theme you have, there might be an option for adding a favicon. Most of the modern WordPress themes, especially those premium ones which you pay for, will have that extra option within the customizer. So, all you have to do is navigate to your theme’s settings page and find a Favicon option. On that page, you will be able to upload your new favicon or paste an external link containing an image and be done in a matter of seconds. Can’t be easier than that.

Add a favicon manually:

If your theme doesn’t come with a favicon option, you can add the icon manually. After you create the icon and convert it to .ico format, you can use this simple code which will take the image from a link you specify and display it as a favorite icon. The method is really simple:

  1. Open functions.php file
  2. Copy and paste the code below:
  3. function my_favicon() { ?>
    <link rel="shortcut icon" href="link_to_your_image" >
    <?php }
    add_action('wp_head', 'my_favicon');
  4. Change href=”link_to_your_image” with the actual link of your favicon
  5. Save changes and enjoy your new favicon

Use a plugin:

Yeah, WordPress wouldn’t be the same if there wasn’t a plugin for everything. Of course, there is a plugin which can do the same job of adding the icon for you. In the following lines, we will show you two plugins ready to work for you.

Favicon by RealFaviconGenerator

PRICE: Free

If you don’t want to mess around with the code, this plugin is a great solution. But it does so much more than the code we have shown you above. Instead of adding only one size of an image, this plugin takes care of all popular browsers, including those mobile ones. Since all browsers interpret favicon differently, you will need different sizes for each and one of them. For example, a simple 32×32 icon might be enough for a desktop browser, but your iPad visitors will need retina ready icon which means it has to be 152×152 big to look good on those devices. Coding all these rules manually would be a hell of a job for someone who’s not into it and that’s where Favicon by RealFaviconGenerator steps in. Simply install the plugin, choose the image you want to become your new favicon, relax and watch the plugin do all the hard work for you.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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