I have a list of favicons

Am using a service worker to cache all files, i.e. its a PWA, my files are as below

"/",
"/index.html",
"/favicon/apple-touch-icon.png",
"/favicon/favicon-32x32.png",
"/favicon/favicon-16x16.png",
"/favicon/site.webmanifest",
"/favicon/safari-pinned-tab.svg",
"/favicon/favicon.ico",
"/favicon/browserconfig.xml",
"/app.css",
"/app.js",

The problem is with my two very specific files,

These two files /favicon/favicon-32x32.png and /favicon/favicon-16x16.png. Any help here please would be highly appreciated.

I have a list of favicons

Am using a service worker to cache all files, i.e. its a PWA, my files are as below

"/",
"/index.html",
"/favicon/apple-touch-icon.png",
"/favicon/favicon-32x32.png",
"/favicon/favicon-16x16.png",
"/favicon/site.webmanifest",
"/favicon/safari-pinned-tab.svg",
"/favicon/favicon.ico",
"/favicon/browserconfig.xml",
"/app.css",
"/app.js",

The problem is with my two very specific files,

These two files /favicon/favicon-32x32.png and /favicon/favicon-16x16.png. Any help here please would be highly appreciated.

• javascript
• service-worker
• progressive-web-apps

• Did you ever resolve this? I'm having the exact same issue. – Doug Allrich Commented Nov 16, 2018 at 1:30
• No I didn't, i eventually decided to let it go since they are small sized files so there won't be too much of a difference – lulliezy Commented Nov 16, 2018 at 10:44

3 Answers 3

This is a known Chrome bug. It is known from 2016. No solution till now due to security issue.

Chrome bug report

Update at 26-11-2018 solved

Service worker: FetchEvents for requests for same-origin favicons

If you're not using service worker but still can't force the browser to cache any requests to favicon, this question might be related: Favicon.ico File Not Caching Despite Headers

From the screenshot of network requests, I couldn't see how SW caching for all other requests are working. I could see one 304. That alone wont imply SW is working fine. If you can province a full networks tab screenshot(may be hiding files names?) it will help understand the problem better.

On general debugging to check service worker,

1) Make sure "service worker" under chrome dev tools -> Application is coming with your domain in green.

2) If its not green, you might be missing to configure SW correctly or build process is missing the required manifest files.

3) SW will not work over HTTP. Make sure your URL is served through HTTPS with a valid certificate.

4) Make sure your web server supports service worker. Some server like the one used in angular (ng serve) doesn't support service worker. One good option is to use http-server.

Install ->  npm install http-server -g

Run this command in your build folder ->

http-server -o -i 172.22.49.205 -p 8080 -S

5) If the URL is HTTPS with a cert and Service worker is coming green in dev tools, last chance can be what files you want to cache is not configured properly, which doesn't seem to be the case here. After loading the page, you can disconnect from network or stop the web server and check if the Chrome is still loading the page(from cache). if not, its not just your fav icon. But who cache has problem.