Weird behavior of favicon

Coding Help
1

Hi, currently I am trying to run a React + Express app on Glitch. Before I imported the project from Github, everything works fine on localhost. However, when I attempted to run it on Glitch, it takes forever to start, and ‘Failed to load resource: the server responded with a status of 504 ()’ error from favicon.ico:1 appears. I am aware this may be a result of glitch being not able to find the location of favicon, so I have followed instructions from here. But it did not resolve the issue.

I also noticed a wired thing that the error actually comes from https://granite-nervous-wood.glitch.me/favicon.ico, which implies the program appends ‘/favicon.ico’ directly to the url of the application. I have searched everywhere in my project and am pretty sure I did not do this myself, so I am curious why this behaviour happened and how should I resolve this issue? Either by setting favicon correctly or getting rid of it completely.

2

If you are using express. You can use this code.

app.get("/favicon.ico", (req, res) => {
res.status("200").sendFile(path(__dirname + "/favicon.ico")) 
});

Thanks @aboutdavid

3 Likes
3

__dirname + "/favicon.ico"
If it is in the root folder.

1 Like
4

Thanks. I don’t usually use path too much.

1 Like
5

Could someone move this to #coding-help ?

7

Shorter code that would work:

app.get("/favicon", (req, res) => {
res.sendFile(path(__dirname + "/favicon.ico")) 
});

You shouldn’t check if the request is OK, just throw the file. (unless you were IP banning people)

Or, even better, put your files in a folder and “static” them

app.use(express.static('folder'))
8

This sounds like a Glitch issue as OP says it works fine locally.

1 Like
9

I tried this method but the issue seems to remain, and I doubt there must be something else I did wrong that crashed the application. [join link removed by support] is my project. Is it possible anyone is able to take a look at it to see what went wrong? It is a React project, I put all React stuff in the client folder. The React portion and backend run on different ports, I worry this may be the reason that my application cannot load.

11

Please do not bump threads for no reason. People live in different times and have lives. They will assist when they can and if they can.

3 Likes
12

revisting threads like tasha said you should:

it’s fine.

bumping like this: bump 10charrrs

not good!

13

Hi, two things:

  1. Can you try replacing path(__dirname + "/favicon.ico") with __dirname + "favicon.ico" - or whatever your file path to the favicon rekative to your server file is; you said it’s in react folder so maybe try __dirname + "/react/favicon.ico"?
  2. In all the react apps I’ve seen, the favicon has been in a separate static folder. This is then loaded in the html/ejs file that the react is loaded into.

Please note that I have no experience of working with react, so this may be completely wrong!

14

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.