Skip to main content
  1. Posts/

How to add a favicon to your Wordpress website

·2 mins
Alejandro AO
Alejandro AO
I’m a software engineer building AI applications. I publish weekly video tutorials where I show you how to build real-world projects. Feel free to visit my YouTube channel or Discord and join the community.

There are better and worse ways to add a favicon to your Wordpress website. In regular websites, all you would need to do to add a favicon is to add the following tag to your header:

<link rel="icon" href="url-of-your-favicon.ico"/>

We could, of course, just plug this tag to our website’s header. But that wouldn’t be the Wordpress way of doing things.

How to add a favicon the Wordpress way

The better way of doing this in Wordpress is by adding it to our Wordpress cycle. To do this, we create a function that returns the given tag and we add it to the wp_head hook. This function and it’s hook, of course, need to be added in the functions.php file.

Like this:

function add_favicon(){ 
		ob_start(); ?>
        <link rel="icon" type="image/png" href="" sizes="16x16">
		<link rel="icon" type="image/png" href="" sizes="32x32">
		<link rel="icon" type="image/png" href="" sizes="96x96">
        <link rel="apple-touch-icon" href="">
        <?php return ob_get_clean();

In the example above, we created the function add_favicon that returns four tags: three of type “icon” for different screen sizes, and a last one for Apple devices that allow you to add a website to your home screen and make it look like an app.

We then hooked this function to the wp_head hook.

This method allows you to be more organised and to centralise all your website’s settings in the functions.php file.