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

Updated: November 2018
Mobile Speed
INTERNATIONAL SITE OWNERS: Get under 2-second load time on cheap, shared magnetic hosting. No CDN cheating. And still use dozens of free WordPress plugins!

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!

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. WordPress then creates 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.2 – and has zero page weight. We compared all freebies 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 right away, clear the site cache if your using a caching plugin.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Your site is the only one I've found that seems to take a serious approach to making a WordPress site fast. Everyone talks about the Yoast plugin, fast hosting, CloudFlare, but I haven't read about time to first byte, image compression or similar subjects elsewhere." medium.com/@nathanpen Texas, USA

- Nathan Pennington

Twenty-seventeen theme: a branding and speed problem with a learning curve.
Your guide to image speed optimization on mobile.