Posted on by PagePipe Staff

How to make the fastest loading favicon for mobile-first speed.

WordPress Mobile Speed

Updated

There are no affiliate links on PagePipe.

Favicons (or site icons) are a recognizable element used by web browsers. It’s good for memorability and branding. Favicons are for browser tabs (next to the page title), address bars (next to the URL), bookmarks, and windows tiles.

WordPress makes it easy to add a favicon to your site right from the customizer. This is often the recommended method. But it produces heavy image files. For speed’s sake, don’t do it that way!

A favicon improves site credibility, memorability, and findability for users. It’s easier to find a bookmark with an icon next to it than to read text.

An ICO file allows storing multiple images with different sizes in one file. This is not good for speed or mobile data consumption. Choose the simplest export possible usually 4-bit color depth. You can create ICO files in a photo editor like Gimp. But an online favicon generator is a good option.

In WordPress, favicons are called Site Icons. Since WordPress 4.3, the Customizer has a Site Icon option. For extreme mobile speed performance, we don’t recommend it.

Since HTML5, the PNG format is also an acceptable format for favicons. All major browsers support PNG now. All browsers (even old ones) support ico format.

RED ALERT: If you don’t use a favicon, it creates an unwanted 404 error or delay. So don’t think “no favicon” is faster. The browser waits for favicon loading – forever – or time outs. That’s bad new for speed.

WordPress themes generate 4 favicon sizes when you add a site icon from the WordPress Customizer. This is overkill. An original image uploaded to the Customizer is at least 512 x 512 pixels. These new image clones are theme dependent. WordPress then processes other sizes from that original file:

  • 32×32 pixel favicon.
  • 180×180 pixel app icon for iOS up to the iPhone 6+.
  • 192×192 pixel Android/Chrome app icon.
  • 270×270 pixel medium-sized tile for Windows.

These favicons are in your WordPress media library. If you use three colors in your favicon, all this other image baggage is unnecessary and wasteful. A favicon is not a logo. Use a photo editor like Gimp or Photoshop to design a 16×16 pixel square.

Here’s our method for best mobile speed:

Only 3 colors are in the 16×16 pixel image file – colors you use on your site. Exported the image in Microsoft .ico format. This makes for the fastest loading favicon. We export custom images using free Gimp image processing application offline. Sample colors with a color picker if necessary.

Favicon.ico sample above.

 
The number of colors and bit depth are what determine the icon page weight. In this case, 318 bytes. A theme often produces two or more icons using the WordPress Customizer. These can weigh 32 to 64 kilobytes (heavy for such a tiny element). This is unnecessary bandwidth waste. Plus over-detailed microscopic favicons aren’t readable or recognizable. Simple and few colors are a better memory cue. This is branding without complex, intricate image files.
Another favicon.ico sample above.
 
Use BleuT FavIcon plugin.
 
Find this plugin settings under Appearance > My Favicon * BlueT
This is an old plugin. But works great even with PHP 7.3 – and has zero page weight. We compared all freebie plugins to install a favicon – and this is the lightest. No site drag.
 
Upload the image using the browse button. It will store the favicon in your media library. Then click “Save this new one.”

 

This is the fastest way to add a lightweight favicon.

Alternatively, upload the icon to your server root directory via Cpanel file manager. Either method causes the favicon to lazy load last on your page. If you upload to the server via Cpanel, it may take time to appear because of propagation delays. From our experience, the plugin seems to work faster.
 
If your Favicon doesn’t appear on the frontend right away, use the “F5”  key to refresh the page. If you can’t see it, clear the site cache if your using a caching plugin.

Uploading a site icon with theme upload in the Customizer increases the page weight of the favicon.

 

In a theme Customizer, there is a place to upload a site icon.
Excerpt from a asset waterfall. Using the Customizer upload creates two icons. Only one is needed. The lightest possible. One is 675 bytes and the other is 4.7k. These are light. We’ve seen single icons that weigh 32k.
One-call icon using BleuT Favicon plugin. The 16×16 pixel favicon.ico file is created offline using an image processing program. It only weighs 407 bytes with three colors. One solid color would be even smaller.

The BleuT FavIcon plugin used for uploading a Favicon.ico file is probably 10 years old. Most site owners would never use it because it’s so old. But it works fine. It’s never needed to be updated even with PHP 7.3. BleuT FavIcon was last updated in 2014.

If you upload favicon’s directly to the root folder, that favicon will override the plugin. If you upload via the Customizer, it appears to override all other methods. We’re not sure why.

Favicon was the file name originally used by Microsoft. WordPress invented the phrase Site Icon. The fastest loading favicons are still in this .ico format and can be exported from image processing programs. If it is in the root folder on a server, it will automatically lazy load. This then becomes transparent to desktop users. But it is still data going through the wireless pipe to remote mobile devices.

A properly built favicon is about 300 bytes of page weight. It is 16 pixels square, not 512 pixels square. Using the old plugin does not produce two, three or more favicons as is the modern convention, only one.

Does this bother anyone? None we’ve heard of in our studies thus far. There seems to be no consequences as far as audience acceptance.

Using a plugin is a better alternative to uploading via WordPress Customizer thus bypassing the bloat WordPress causes to this kind of file.

To not upload a favicon, creates either a heavy generic browser substitute or a 404 error. Both cause delays.

We often see favicons weighing 75k or more total on slow sites. Again, it doesn’t matter for desktop – only mobile.

OFFSITE REFERENCE: https://love2dev.com/blog/web-performance-tip-make-sure-you-have-a-favicon/

In Summary

For mobile speed, the ideal way to make a “Site Icon” is uploading to the server root file a 16×16 pixel favicon.ico file. That is the coder way to do it using Cpanel or FTP access. The most common open-source FTP client is Filezilla. But most people don’t know how to do that stuff. It’s too scary.

Site Icon is WordPress vernacular and jargon.

The second best way for mobile speed is to upload a 16×16 pixel favicon.ico file via a plugin.

The third way is to upload a 512 pixel square GIF or PNG file to the Customizer “Site Identity” section. This will inflate a small file because of WordPress’ weird image resizing algorithms. Not always. Just sometimes. It will also load two site icons instead of one. But it is theme dependent. Some themes load up to four icons for various devices. That then can cause up to 100k of page weight and 4 requests. For mobile speed amateurs, it’s best not to use this method.

The worst way for mobile and desktop is not uploading a Favicon, thinking that’s the fastest. Instead this causes 404 errors or browser-on-the-fly default placeholders that delay pages as they search for a non-existent asset.

Online speed tests often exclude the favicon from the speed test but still show it as a lazy loaded asset. That’s all great but the data still must pass through the mobile data pipe. For guys on desktop fiber connections, this is a non-problem.

If you first used the plugin method and then used the Customizer, three favicons will load. To fix this error, delete all three and upload directly with FTP to the root. This may take up to 24 hours to propagate. Why the delay? We have no idea. But we’ve seen it many times. Silly.

One single 482-byte favicon takes 4.1 milliseconds to load without using WordPress or a plugin. Favicon size depends upon number of colors, graphic complexity, and export method.

Godspeed-

Steve Teare
performance engineer
February 2025

 

PagePipe Site Tuning Services for Speed

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site Tuning – Get Speed!