This post is about the Netlify _redirects file which helped me resolve a small issue just a short while ago. So, if you're using Netlify and had some quirky favicon issues - I hope this post will help ya.
If you'll look at the favicon for this blog you'll see it's the 💻 emoji. This favicon is inlined like this:
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size='82'>💻</text></svg>">
It works really well and all of this blog's pages have it. However, there are two pages on this blog that do not contain any favicon links: /sitemap.xml and /rss.xml. Anytime you would visit those pages you would see the Nuxt icon as a favicon. That was pretty easy to fix - I simply forgot to remove the default Nuxt.js favicon file when I first installed Nuxt.js for this blog. After removing that file, I tried to use an SVG favicon, which should also be pretty straight forward. I created the SVG and placed it in a favicon.svg file in my blog's public directory. I thought that Netlify would probably serve the favicon.svg file without any configuration or setting on my part but it didn't work. Then I opened the dev console and saw a 404 on /favicon.ico (the boilerplate file I removed).
After searching a bit for a solution, I remembered that Netlify has an incredibly simple config file for redirects: the _redirects file. All I have to do is define _redirects with a rule for redirecting all requests from /favicon.ico to /favicon.svg. Here's the file:
# Redirects from what the browser requests to what we serve
/favicon.ico /favicon.svg
This simple config file solved the problem for every favicon-less page on this blog 💪
Read more about Netlify redirects and rewrites here: https://docs.netlify.com/routing/redirects/