My website doesn't have a favicon, and it likely never will. I'm not sure why I feel so strongly about that decision, but considering the fact that I don't have a logo—nor do I really one—setting up a favicon felt unnecessary. 100% want But, you can't just define a favicon (via the tag), because most web browsers will try to request one anyway. This means that every page load is accompanied by a second request for a file that will come back as . not <link rel="shortcut icon" /> favicon.ico always Not Found Annoying, right? So, what are we to do? While we could just slap together a transparent and be done with it, I wanted to that second request, not just serve up a perfunctory image to appease my need for a successful response. favicon.ico eliminate First Attempt While omitting the icon tag doesn't give the results we want, I decided to experiment with values that . My first attempt at this was to use a simple hash: do <link rel="shortcut icon" href="#" /> While this eliminated the response in the favicon request, it ended up re-requesting the entire page. This makes sense, as the ultimately gets interpreted by the browser as , and the same is true for pretty much every other character you might want to try (spaces, question marks, etc). 404 Not Found # https://flower.codes/# Not a proper solution. Enter Data URLs So, we can't omit the favicon, and we can't use an arbitrary character... what we do? can After a little bit of digging, I came across a concept that most web developers are fairly familiar with: . Data URLs For the uninitiated, Data URIs allow you to embed files directly inline in your HTML, rather than making an external request. To be overly simplistic, they generally consist of a definition of the of file to be loaded (such as or ) and the file contents (which can be encoded to reduce the number of characters). type text/html text/plain This means that instead of loading an external file, you can include it inline like so: data:text/html,<script>alert('hi');</script> For our purposes, though, we can define a Data URL that is effectively empty by simply omitting both the content type and the contents themselves: <link rel="shortcut icon" href="data:," /> Okay, But... Why?? As expected, solved my problem. By including the content directly, and keeping it empty, we can eliminate the second request without inducing any errors in the console. this But, why go through all this trouble? Believe it or not, I actually favicons. I think they make organizing tabs and bookmarks far easier. But in a world (wide web) filled with them, eschewing one on my own site felt like a small way to stand out (and going the extra mile to do it the "right" way is just icing on the cake). like Also published at . flower.codes

Mozilla

2022 - HackerNoon Contributor of the Year - Analytics

2022 - HackerNoon Contributor of the Year - Internet

2022 - HackerNoon Contributor of the Year - Mental Health

2022 - HackerNoon Contributor of the Year - Privacy

2022 - HackerNoon Contributor of the Year - Website Development

Read My Stories

My Webbed Site

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Privacy

Nominated for 2022 - HackerNoon Contributor of the Year - Internet

Nominated for 2022 - HackerNoon Contributor of the Year - Analytics

Nominated for 2022 - HackerNoon Contributor of the Year - Mental Health

Nominated for 2022 - HackerNoon Contributor of the Year - Productivity

Too Long; Didn't Read

Disabling My Favicon: How and Why

Disabling My Favicon: How and Why

Too Long; Didn't Read

Companies Mentioned

@zachflower

RELATED STORIES