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

My Favorite Kind Of Coding Interview Exercise

Embracing Offline-First Technology

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

Hire Me

Buy Me a Coffee

Too Long; Didn't Read

Make resilience your competitive advantage

Disabling My Favicon: How and Why

Disabling My Favicon: How and Why

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Duplicating a Database Record in Laravel

How To Add a Favicon to Your Site

The Noonification: How to Lose Employee Trust in 8 Easy Steps (11/17/2022)

10 Year Challenge — How Popular Websites Have Changed In China.

10 biases/concepts to consider when building products from ‘ Thinking Fast and Slow'

Duplicating a Database Record in Laravel

How To Add a Favicon to Your Site

The Noonification: How to Lose Employee Trust in 8 Easy Steps (11/17/2022)

10 Year Challenge — How Popular Websites Have Changed In China.

10 biases/concepts to consider when building products from ‘ Thinking Fast and Slow'

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps