Embed Favicon In WordPress Website

Every internet user has probably seen a favicon before, even if many do not know what it is about offhand.

favicon is the small picture that you see directly in the tab or in the bookmarks if you have saved the page in your browser, for example. Meanwhile, Google also shows the favicon next to the title of the results in the search results.

Today I want to deal with how you can embed a favicon on your WordPress site and why you should do this at all.

Why save a favicon?

The reason is simple: the favicon helps identify your page. Favicons are often smaller versions of your own logo. If you store a favicon on your WordPress website, you support your readers so that they can quickly find their own page under all the existing bookmarks.

Think, for example, of the favourites bar in your Internet browser. If you remove the page names here because you want to save as many as possible, you cannot distinguish any page from the other without a favicon.

The same applies, of course, if your visitors have opened several tabs and your website is not currently in focus. Even then, the little icon helps to distinguish them all from one another.

So it simply serves your own branding. By the way, did you know that your visitors can also save your site on their smartphone home screen (e.g. on the iPhone)? Even then, your individual favicon will be used and stored as a picture.

The favicon now also helps to attract attention in Google search results. Here the search engine operator finally shows the favicons right next to the result. If you are clever, you make your favicon eye-catching in order to generate more attention.

How to integrate the favicon?

A few years ago, it was even more complicated when the small graphic had to have a very specific file format so that it could be stored as a favicon. For this purpose, special generators were used that still exist today.

The need for such generators is still there because not every CMS (content management system, such as WordPress) is able to store this icon automatically. For static HTML websites, it is of course, still a manual process.

However, WordPress already allows it through most themes and the WordPress basic settings. The favicon is then simply stored in the customizer. There is then a section for this which is marked either with the term or, alternatively, “Site Icon”.

Integrate favicon with WordPress plugin

If that doesn’t work for you, you can help out with plugins here. It is, therefore, best to read the detail pages and experience reports on the WordPress plugins carefully and consider whether the manual installation is not more worthwhile.

Include favicon manually

Alternatively, you can store it manually with a code. To do this, open the file header.php and add the following to the file:

<link rel = “icon“ href = “https://www.yourwebsite.com/favicon.png“ type = “image / x-icon“ />

<link rel = “shortcut icon“ href = “https: // www.yourwebsite.com/favicon.png“ type = “image / x-icon“ />

Finished! Your favicon should now be stored. In order for the changes to be applied, you should also delete the cache to be on the safe side – both the cache of your WordPress website and that of your Internet browser.

How do you create a favicon?

Favicons are graphics that are 512 × 512 pixels at best. In this way, you can ensure that the favicon is displayed sharply and clearly as a bookmark symbol on smartphones.

But you can – if you include it directly via WordPress – also create a larger file. You just have to make sure that it has square dimensions. It is important that the small version of the graphic, such as that found in the tab view within the browser, can be clearly recognized.

Small details and many design elements should, therefore, be avoided. It is easiest if you use a graphics program such as Photoshop or Gimp to create the favicon.