Most web browsers make an automatic favicon request on each page load. You won’t notice this if your site does have a favicon, but can be quite annoying if it doesn’t. Luckily, you can solve this problem with just one line of HTML code.
Problem: Automatic Favicon Requests
Just like any other user agent request, a favicon request opens a communication dialogue between the user’s browser and the server. This results in one more HTTP request and about 1.5KB extra overhead, which are both an unnecessary waste of performance if you don’t have a favicon—and can be especially annoying on a test/dev site when you want to run performance checks.
How to Prevent the Automatic Favicon Request
You can completely remove the automatic favicon request by adding the following line of code to the <head> section of your HTML page:
1 |
<link rel="icon" href="data:,"> |
This little code snippet assigns an empty data URL to the favicon’s <link> element which specifies the location of the external resource. This trick stops the user’s browser from sending an automatic HTTP request for the favicon.
Quick Performance Check
To demonstrate the problem and solution, I created a simple demo site with two HTML pages: one with and one without the <link> tag with the empty data URL. I used the GTmetrix tool to measure the page load time, total page size, and number of HTTP requests.
Here are the results when the automatic favicon request is not removed:
You’ll see we have two HTTP requests; one for the HTML file and one for (the non-existing) favicon. This results in 1.73KB total page size and 183ms page load time.
In the Recommendation tab, GTmetrix even reminds us to avoid the bad request to the favicon.ico file.
When we add the code snippet above, that extra HTTP request disappears, the total page size becomes much smaller (250B instead of 1.73KB), the page loads a bit faster (169ms instead of 183ms), and the Avoid bad request warning disappears too:
Simple Performance Optimization
And there we have it! A very quick tip which solves a niggling problem with a simple workaround. This may seem like a negligible issue to deal with, but these marginal improvements can make a big difference to the performance of your website.
Learn More About Optimizing Website Performance
.png)
.png)
