How to Add a Favicon to WordPress Correctly

Favicons and WordPress go together like Barbie and Ken. You can’t have one without the other. No doubt you’re familiar with both of them to a certain extent. If you aren’t then this How to Add a Favicon to WordPress setup guide is the article for you. Come into my boudoir, or maybe not, so I can tell you all about them.

We’ll also be touching on Web App Manifests and how they integrate your favicon serving strategies to ensure your progressive web app (PWA) smashes the Google Lighthouse audit without issue. Bit of a mouthful, but this sentence will be the hardest part of the talk. Promise.


Quick Links to All Headings

  1. What is a Favicon?
  2. How to Add a Favicon to WordPress the Easy Way
  3. The Problem with the Standard WordPress Option
  4. Ideally You Should Use an ICO File
  5. How to Add a Favicon to WordPress to Suit Every Device
  6. Creating a Website Manifest for a Progressive Web Application
  7. Webmanifest Contents for Sonic SEO PWA
  8. Webmanifest Essentials – What Google Expects
  9. Real Favicon Generator or Firebase APP?
  10. Basic Service Worker Implimentation
  11. Optional Service Worker Code
  12. Where to Upload Your Icons/Favicons
  13. Favicon Links in Header.PHP File
  14. Offloading Favicon Files to a CDN
  15. Conclusion

What is a Favicon?

A favicon is short for favourite icon. They aren’t just aligned with WordPress, but almost all websites and apps use them in one form or another. However, a favicon in its truest sense is what your browser uses next to the page title in the browser tab, which gives you a quick way to identify your favourite websites. 

Traditionally a favicon differs from a desktop shortcut icon because a favicon lives in your browser tab, whereas a desktop or app icon lives on the device screen and especially the homepage.

 

How to Add a Favicon to WordPress the Easy Way

Luckily for the non-techies out there, WordPress offers a super simple way to add a favicon to your website. You simply navigate to your WordPress dashboard and follow the links below:

  • Appearance – Customise – Site Identity – ‘Select Image’
WordPress Site Icon (Favicon) Settings

Then once you are on Site Identity you will see a ‘select image’ buton. This is where you add your favicon, which has to be a minimum of 512 x 512 pixels, according to WordPress guidelines. You can install a .jpg or .png here and if possible try and optimise it beforehand, even if you have an image optimising plugin such as WP Smush.

The actual size of most favicons is only 32 x 32 pixels, but WordPress is asking for a bigger image in case somebody wants to save your website to their desktop or smartphone home screen. Effectively doubling your favicon up as a shortcut icon.

If you want a quick and easy solution this is the one for you. However, if you’re a geek like me and want to know the fastest or most optimal way to serve your favicon then read on…

 

The Problem with the Standard WordPress Option

When you run your website through a speed and performance checking website tool, such as GT Metrix or Pingdom tools is that because your favicon is currently doing two jobs, as mentioned earlier. It’s trying to be a favicon and also a desktop shortcut and WordPress has the 512 squared image that it is cropping for your 32 squared favicon. 

For a performance benchmarking site this is sacrilege, as every time WordPress has to crop your icon on the fly, it’s costing time by adding a small latency penalty, but even small things add up. You know how pennies add up into pounds when you do the weekly shop, well for websites bytes add up into kilo-bytes and you get the picture. It costs you time and time is our enemy.

The standard WordPress way also only gives the browser two options. In the real world there are plenty more ways to serve favicons and their big brother, aka the desktop shortcut icon.

 

Ideally You Should use an ICO File

ICO files are beneficial because you can include more than one image in the same file. In fact, they are doubly useful, because as well as including several images, the images themselves can be scaled. 

Whereas a regular raster image, like a .jpg or .png gets blurred and pixelated as you zoom out. ICO files are vector images, same as what is used in Adobe Illustrator images. They are based on mathematical points, rather than individual pixels, so you can zoom out as much as you want and they don’t get blurred. In truth, though, it’s not as if you will zoom into a favicon, but that’s the technical jargon behind them.

 

How to Add a Favicon to WordPress to Suit Every Device

In the olden days of computing, all everyone needed was a humble 16 x 16 pixel favicon. Then it was 32 x 32 and more colours. Eventually it went up to 48 x 48 for higher resolution displays. The great thing about favicon.ico is that you can have all three of these little critters snuggled up in the same file. This saves resources and network calls compared to downloading three separate image files.

Then things got more complicated… people started using phones and tablets, each with different operating systems on. For various reasons. Apple, always like to be different, even though they will tell you it’s for the customer and ease of use. Don’t believe them. They’re big fat liars, look at how many times they said you can’t get photographs off a device that’s been in water. Yet a mom managed to do it in her kitchen and started ipadrehab, but that’s another story.

In short, just don’t believe billion dollar companies when they tell you something. On the other hand, you can always trust individuals like me who do have your best interest at hand!

Right, where was I? Awe yeah, if you want to be serve your favicon to everyone that you come across then it gets slightly more complicated. Nothing to worry about, however.

 

Creating a Website Manifest for a Progressive Web Application

The criteria for Progressive Web Apps or PWAs is more intense than for regular websites. If you run your website through Google’s Lighthouse website audit it will ask for a web manifest. Quick tip, always try and run Lighthouse using an Incognito window in Chrome browser, as it will give you cleaner results.

Lighthouse Audit – Webmanifest

Webmanifest Contents for Sonic SEO PWA

{
“name”: “Sonic SEO”,
“short_name”: “SonicSEO”,
“theme_color”: “#000000”,
“background_color”: “#ffffff”,
“display”: “standalone”,
“orientation”: “portrait-primary”,
“scope”: “/”,
“start_url”: “/”,
“icons”: [
{
“src”: “/icon-72×72.png”,
“sizes”: “72×72”,
“type”: “image/png”
},
{
“src”: “/icon-96×96.png”,
“sizes”: “96×96”,
“type”: “image/png”
},
{
“src”: “/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
},
{
“src”: “/icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image/png”
},
{
“src”: “/icon-152×152.png”,
“sizes”: “152×152”,
“type”: “image/png”
},
{
“src”: “/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/icon-384×384.png”,
“sizes”: “384×384”,
“type”: “image/png”
},
{
“src”: “/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
],
“splash_pages”: null
}

*I’ve probably gone overboard on the icons, purely because I combined the results from two different authorities. Rather than miss something out I played it safe and included the extra icons.

 

Webmanifest Essentials – What Google Expects

Although I’ve suddenly flipped to webmanifests it’s because they go hand-in-glove with our beloved favicons. Essentially all a webmanifest does is include a list of all your favicons and desktop shortcut ions, plus a start URL for your browser. It’s not difficult once you are familiar with the contents.

The two actual websites that I used to create my own manifest were from Real Favicon Generator and also Firebase web app manifest generator, which is now owned by Google.

Whenever you combine two similar, but still different, pieces of advice or content you will always get conflicting results or opinions. I could be wrong, but in the end decided to combine the two offerings into one and am pleased with the results, as all my PWAs pass the Lighthouse audit for Apps and Manifests.

 

Real Favicon Generator or Firebase App?

A good example of when two pieces of info conflict is right here; Real Favicon Generator offered up a site.webmanifest file and Firebase offered a manifest.json. Which one is correct? They both are, but seen as though the first solution is actually called a .webmanifest that seemed like the winner to me! It’s a bit like calling an image or photography file .photo. Of course that sounds better than .jpg or .png doesn’t it?

Since I’ve double checked, however, Mozilla reference the JSON text file for the Web App Manifest , so its another one of them personal preference things.

Choice is always good, but when you’re a pedant choice can be annoying. In truth, both solutions are perfectly fine because a .webmanifest file is still written in JSON, even if the file type isn’t actually .json 

Here’s Google’s take on the Web App Manifest

It seems like the one I’m using is derived from the W3C.Org or World Wide Web Consortium… linking to a manifest and here are some more manifest examples.

Another quick tip – if you use Real Favicon Generator to create your manifest and favicons, it’s best to choose a start URL. They only ask you to do so as an option, but Lighthouse throws an error if you don’t include one. If in doubt, all you need to do is use your homepage URL. 

Ensure you have all the basics covered, such as making sure your URL paths to the icons work out.

You’ll also need a service worker if you’re turning your website into a PWA, but I’ll go over this in a minute.

 

Basic Service Worker Implementation

Although this article is about Favicons, to install each version will require a manifest and if you’re doing that the natural progression is to a PWA and you’ll need a service worker for that. The documents and details are on the AMP website, follow this link below.

A service worker is nothing more than a few lines of code that can run independently to your website and even when your website is offline. It’s not a magician so don’t expect it to download code when your viewers have no signal in the middle of the Sahara Desert. That said, however, it will get enough code while it can to keep people happier than having no content at all. Google thinks they’re the next big thing apparently so I’m really interested in them. 

Actually they have been around for a couple of years now, but because we’re already in a really good place with website technology, uptake of the service workers hasn’t been as fast as web pioneers would have liked. Let’s be real, there’s so many different software ideas all competing for brain space, it’s impossible for even the most tech-savvy folks to know about them, never mind ordinary Joe and Janice sat watching the Kardashians.

If you’re running AMP, there is a specific link to a service worker that you can use without creating your own, which is what I am using on all my AMP and PWA sites. That being said, I did manage to get my own version working from code that I cobbled together from Google Developer website.

You simply need to save a file in your website root folder as sw.js and include this code inside the file.

  • importScripts(‘https://cdn.ampproject.org/sw/amp-sw.js’);
    AMP_SW.init();

Optional Service Worker Code

//This is the version I first used from Google Devs website instead of using the import script above. They both work, but I thought the import script was preferable as it’s ready made, although the one I made is still from code written by Googlers so it should be perfectly safe and I didn’t have any issues with it so use either one.

self.addEventListener(‘install’, function(event) {
// Perform install steps
});

var CACHE_NAME = ‘parallax-cache’;
var urlsToCache = [
‘/’,
‘/wp-admin/css/’,
‘/wp-admin/js/’
];

self.addEventListener(‘install’, function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log(‘Opened cache’);
return cache.addAll(urlsToCache);
})
);
});

self.addEventListener(‘fetch’, function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit – return response
if (response) {
return response;
}

return fetch(event.request).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== ‘basic’) {
return response;
}

// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();

caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});

return response;
}
);
})
);
});

 

Where to Upload Your Icons/Favicons

All you have to do is upload all your favicons to the root folder of your website. It doesn’t matter if that is WordPress or standard HTML. As long as their is some code in your site’s header or header.php file telling the browser where all your icons live it will work perfectly. 

There is even a favicon checker, for peace of mind, to use once you’ve uploaded everything. If your results aren’t as expected, again make sure to check the basics such as flushing your caches. It might take a while before a clean version of your site gets through.

Favicons in Root Folder of Website in Bluehost C Panel

Favicon Links in Header.PHP File

If you’re using WordPress then include all your favicon links in your child theme’s header.php file. You don’t have to make a child theme, but it is best practice and using this plugin takes only seconds once you are used to using it. Honestly, I have found it that easy I’ve made a child theme for all of my websites.

Even though all the favicons are linked, your browser shouldn’t waste bandwidth downloading anything that it doesn’t need, unless you write code to tell it to do otherwise. 

For example, if you run the same code as me and check your website in GT Metrix, it should only show that the favicon.ico file is downloaded. You shouldn’t need to preload or preconnect to a favicon.ico file because browsers look for a favicon automatically. If it can’t find one it will display the default blue box favicon.

Bear in mind that your favicon might not show up on your own computer until you’ve cleared your browser cache. Quite often I get a few weird results from the website speed checking tools, but once you go back the next day everything will be fine. You will be able to tell through experience whether it is generally the browser or caching issues that are affecting whether your favicons are getting displayed correctly or not.

WordPress Header.PHP File Links to Favicons

Offloading Favicon Files to a CDN

If you’re not using Cloudflare you should be, it’s a free content delivery network. It also pairs up sweet with Stackpath, which is a paid CDN, but it’s only $10 dollars a month regardless of how many websites that you own. Well worth it in my opinion.

As you can see from lines 19/20 in the code above, I’m telling the browser that my favicon is available from my CDN, which is Stackpath and also Cloudflare, but my assets are stored on Stackpath. It’s not actually essential to call the link twice, because you’re really saying the same thing twice, but I got the idea from KeyCDN and thought that if it works for them then it should be okay for me. You can always experiment and delete the second call if you wish!

*Update* I’ve combined lines 19/20 now into one line and it works great. From what I can gather, the type attribute is important, as this is what the browser looks for and it prevents multiple downloads of the same favicon. Missing this out can cause the browser to get confused and download, for example, a 32×32 .png, 16×16 .png and also the favicon.ico file. If you look in GT Metrix you can check for unnecessary calls, but you shouldn’t have any problems using this method. 

<link rel=”icon” type=”image/x-icon” sizes=”16×16 32×32 48×48″ href=”https://s2x7e9k9.stackpathcdn.com/favicon.ico”>

 

Conclusion

Let’s have a brief recap of what we’ve discussed and that you’ve learned, which is most important, because I’d have wasted your time otherwise…

  1. How to Add a Favicon to WordPress.
  2. What is a Favicon?
  3. What is an ICO file?
  4. Webmanifests and why Google requests them?
  5. Service workers – manifests – favicons – how they all interlink.
  6. How to offload your favicon to a CDN.
  7. Linking to your favicons from header.php file.

Hopefully you’ve found at least some of this information useful. If so please give it a like and a share, as I’d be super stoked for your help in getting this out to as many WordPress geeks as possible. Favicons are only small and often they go unnoticed, but they really do need to be loaded correctly, otherwise it can impact the speed and performance of your website. That isn’t good for you or your readers.

Alternatively, there are a couple of other blog posts that you might find interesting.

Should you require any information or perhaps the answer to something WordPress related, then without doubt hit me up on my email address or comment below.