You’ve just deployed your first backend web app, ready to accept requests, and everything seems to be running smoothly. Then, out of nowhere, you get a notification that your web app has crashed. You check the error and see:
invalid input: "favicon.ico"
The term sounds familiar, but you’re sure you’ve never used anything like this in your backend. What is it?
Well, favicon stands for "favorite icon," and it’s the small icon that appears in your browser tab next to the page title. You’ve probably noticed it — it’s that little logo next to the website’s name in your browser. Yep, that’s the one!
Let me guess — you never set this up for your app because it was just a quick project to help you get familiar with HTTP, Node, or Express, or something similar. You might not even want a favicon, because, like me, you're just too lazy to bother with it 😅.
So, why did this happen?
Browsers automatically try to request /favicon.ico from the root directory to display the icon in the browser tab. When that request fails, your app crashes.
How can you fix it?
There are two ways:
- The easy way: Catch the favicon request and send a No Content status. javascript
app.get('/favicon.ico', (req, res) => {
res.status(204).end();
});
- Or: Provide a favicon.ico file in the root directory of your app. Both methods will prevent the app from crashing.
Top comments (0)