Updated: March 2019
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!
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:
Favicon.ico sample above.
This is the fastest way to add a lightweight favicon.
Mobile WordPress Speed – without coding!