Favicon not showing locally on express

Question

Am I missing something? Here is what I have:

var express = require('express');
var favicon = require('serve-favicon');
var path = require('path');

var app = express();

app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 

app.use('/api', require('./routes/api'));

app.listen(3000);

My favicon is located as specified in the public folder and the same name. I have some other routes setup separately in a file. The favicon doesn't appear to be working, I must be missing something.

It doesn't show up anything mate, it looks as though everything appears to be working fine, only that the favicon doesn't show. Thanks. — Baba Zannah, Apr 13 '17 at 21:29
Look at the network tag in the Chrome debugger when your page loads and see if the browser is actually requesting the favicon.ico file from your server. If so, see what response it is getting back. — jfriend00, Apr 13 '17 at 21:39
@jfriend00 I did that, it is not requesting the favicon. It's completely not there. What could that be? Thanks mate. — Baba Zannah, Apr 13 '17 at 21:49
What's in the `` section of the HTML document that might be favicon relevant? It is possible for a web page to tell a browser NOT to request a favicon. Or, conversely, you can specifically reference a favicon: http://stackoverflow.com/questions/11893478/add-favicon-to-website or http://stackoverflow.com/questions/10218178/necessary-to-add-link-tag-for-favicon-ico — jfriend00, Apr 13 '17 at 21:56

score 11 · Answer 1 · answered Nov 03 '17 at 21:49

11

The browser might have cached an older favicon. You can force the browser to refresh the cache by adding a version to the new favicon like so:

<link rel="icon" href="favicon.ico?v=1.1">

answered Nov 03 '17 at 21:49

moeabdol

4,779
6
44
43

score 10 · Answer 2 · answered Mar 31 '18 at 06:21

10

This answers your question.

It says:

Go to http://localhost:3000/favicon.ico
Refresh the page.
Restart the browser.

answered Mar 31 '18 at 06:21

Gaurish Gangwar

395
4
14

Interesting !!! Stupid browser. kidding :) – iamcrypticcoder Jun 13 '22 at 16:36

score 3 · Accepted Answer · edited May 23 '17 at 10:31

Check what is in the <head> section of the document. While a browser may implement a default favicon.ico behavior, it can also be controlled from the <head> section by either telling the browser what file/path you want it to fetch the favicon from, what type of file it is or that you don't want it to look for a favicon at all.

Here are two other references on the topic that cover some of the specifics:

Add Favicon to Website

Necessary to add link tag for favicon.ico?

score 2 · Answer 4 · answered Apr 13 '17 at 21:31

2

Chrome cached that there is no favicon. The favicon will show in production.

answered Apr 13 '17 at 21:31

skiilaa

1,212
11
20

What should I do to get to see it locally? – Baba Zannah Apr 13 '17 at 21:33
its not unfortunately, even after clearing my cache. Thanks. – Baba Zannah Apr 13 '17 at 21:50

Favicon not showing locally on express

4 Answers4