WordPress 💎 Favicon multi-format without plugin

Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

Add to your WordPress theme a series of favicons of different sizes to make it multi-format / multi-platform. The favicon greatly contributes to the visual identity of a site. It is the icon that is displayed next to the title in the browser tabs, favorites bar, shortcuts to a web page, etc. 

Internet Explorer was the first to use favicons. It was testing the existence of a file called favicon.ico at the root of sites. A standard that was adopted by all browsers. Later on, it became possible to use PNG files without directory constraints by including them in the <head> of a web page thanks to the :

But today, this icon is used by a multitude of devices and in different contexts. So it's important to plan for it and make sure it's displayed correctly, from the small icon displayed in the header of a web browser tab to the icon that will be displayed in bookmarks or shortcuts on smartphones.

Creation of a favicon

Before thinking about how to put an icon on a site, we're going to need one. So let's go to an image editor. In my case, it will be Photoshop. The biggest favicon format is the one for android which is 192 x 192 px. So that's the size we're going to use when we create the icon. Finally, the format to use is PNG in order to take advantage of the transparency. It is also the format that offers the best compatibility.

Add a favicon to WordPress

To add our favicon to WordPress without a plugin, we will have to generate a declination of it with the different sizes needed and then modify our theme. Don't panic, we're not going to save all the declinations of the image manually but rather use an online generator. The latter will take care of producing all the files we'll need, as well as the code to use.

The generator I use in this article is: http: //www.favicon-generator.org

Once on the site, we need to upload our previously created icon by clicking on " Choose a file " and then clicking on " Create Favicon ", keeping the default options. Once done, a new page appears, offering us to download the generated files and giving us a code to use to integrate our icons.

Download the archive by clicking on " Download the generated favicon". After extraction, we get 27 files, including 24 images in PNG format, one in ICO format and 2 other files (manifest.json and browserconfig.xml). At this stage, we have all the files we need.

If you wish, you can optimize all 24 images on PNG files. To do so, I used TinyPNG, which reduces the weight of the images I use by 61%.

Now we have all the files we need, it's time to move on to the integration WordPress. If you are using a custom theme, changes will be made directly on it. If you are using a downloaded theme, you will have to go through a child theme.

Let's start by copying the 27 files to our theme folder. In my case I'm going to put them in a folder that I name "fav" and place it in the "img" folder of my theme.

Now it's time to add the necessary code for the proper integration of our icons. The modifications are to be made in the " header.php« between the <head> and </head> where we will add the following code:














	



As you may have noticed, it's pretty much the same code as the one given to us by the favicon generator, except that here we place <?php echo get_template_directory_uri(); ?> at the beginning of each link to the files. This function returns the URL to the folder of the activated WordPress theme (which looks like http://exemple.fr/wp-content/mon-theme), which has the effect of transforming relative links into absolute links.

There is still one last step to be done in order to obtain a better compatibility with old browsers, copy the file " favicon.ico " at the root of your site.

That's it, our site now offers a series of favicon that fits perfectly with all types of peripherals.

Julien .MA Jacob
Developer WordPress
Julien MA Jacob - Developer WordPress
🧙♂️ Passionate about the web and programming with always lots of projects in mind 👨💻 | About page
  Discussion of the article
Subscribe to our newsletter
Notify of
guest
0 Comments
Inline Feedbacks
View all comments