WordPress 💎 Favicon multi-format without plugin

Share on email
Share on twitter
Share on linkedin
Share on facebook
Illustration of the article: Multi-format Favicon on WordPress without plugin
Illustration of the article: Multi-format Favicon on WordPress without plugin
Illustration of the article: Multi-format Favicon on WordPress without plugin
Illustration of the article: Multi-format Favicon on WordPress without plugin
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 / multiplatform. The favicon contributes greatly to the visual identity of a site. This 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. The latter was testing the existence of a file named favicon.ico at the root of the sites. A standard that was adopted by all browsers. Subsequently appeared the possibility to use files in PNG format without directory constraints by including them in the section <head> of a web page thanks to the tag:

But today, this icon is used by a multitude of devices and in different contexts. So you need to plan ahead and make sure they are displayed correctly, from the small icon displayed in the header of a web browser tab to the icon that will be displayed in favorites or shortcuts on smartphones.

Creating a favicon

Before we think about how to set up an icon on a site, we will need one. So go to an image editor. In my case, it will be Photoshop. The largest favicon format is the one for android which is 192 x 192 px. This is the size we will use when creating the icon. Finally, the format to use is the PNG in order to benefit from transparency. It is also the format that offers the best compatibility.

Adding a favicon to WordPress

To add our favicon to WordPress without plugin, it will be necessary to generate a declination of it with the different sizes necessary and then modify our theme. Don't panic, we won't manually record all the variations of the image by hand but rather use an online generator. The latter will be in charge of producing all the files we will 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" then clicking on "Create Favicon" while keeping the default options. Once done, a new page appears, proposing 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 obtain 27 files, including 24 images in PNG format, one in ICO format and 2 other files (manifest.json and browserconfig.xml). At this point, we have all the files we need.

If you wish, you can optimize the 24 images in PNG format. To do this, I used TinyPNG, which reduced the weight of the images I use by 61%.

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

Let's start by copying the 27 files into our theme folder. In my case I will place them in a folder that I call "fav" and that I place in the "img" folder of my theme.

It is now time to add the code necessary for the proper integration of our icons. The modifications are to be made in the"" file header.php« , between the tags <head> and </head> where we will add the following code:














	

You probably noticed it, it's about the same code as the one given to us by the favicons 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 results in relative links being transformed into absolute links.

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

So, our site now offers a series of favicon that fits perfectly into all types of devices.

Julien MA Jacob
WordPress Developer
Julien MA JACOB - WordPress Developer
Passionate about the web and programming with always many projects in mind
  Discussion of the article
Subscribe to the newsletter
Notify to
guest
0 Comments
Inline Feedbacks
View all comments