Menu
I'm loading and playing audio files using the Audio() constructor. This works fine in most browsers, but Chrome seems to make a new GET request for the site's favicon every time .play() is called. It looks like this happens regardless of file type, if it's a local file, same site or cross site.
It also seems to create a lot of garbage memory. Is there a way to prevent this?
Open DevTools and look at the networks tab while clicking the button in the example below.
const bounce = new Audio('https://www.w3schools.com/graphics/bounce.mp3');
function playSound() {
bounce.play();
}
document.getElementById('bounce').addEventListener('click', playSound, false);<button id="bounce">Play</button>
565
asked Aug 31 '25 20:08
This appeared to be a known bug in Chrome that is now marked as "fixed". However, as of September 19, 2020, someone commented that is still occurring.
One possible workaround for this would be to include a "fake" icon in the head of your HTML. For example, the link element below:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:,">
... Rest of your HTML ...
This assigns an empty data URL to the favicon, and should prevent Chrome from automatically sending an HTTP request for it.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
