Search code examples
webpackfrontendfaviconmanifest.json

Why can't I see the favicon despite setting the manifest?

I am developing a React page without CRA. I need to set a favicon and a service worker. So, I set up a web manifest, but the favicon is not displayed. How can I fix it ?

The environment was built with Webpack and React. I've tried adding the favicons-webpack-plugin and adding a favicon property at html-webpack-plugin.

{
  "short_name": "DSM DMS",
  "name": "DSM-DMS Daedeok Software Meister-highschool - Dormitory Management System",
  "icons": [
    {
      "src": "./public/favicon.png",
      "sizes": "192x192 168x168 144x144 96x96 72x72 64x64 48x48 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}


//webpack.config.js
const WebpackPwaManifest = require('webpack-pwa-manifest');
const ManifestConfig = require('manifest.json');
//...
plugins: [...,new Webpack(ManifestConfig),...]
//...

I thought that if I set a manifest, I can show the favicon, but it doesn't. Console in Chrome developer tool doesn't throw any error. Application/Manifest normally shows us the icons and no errors as well.

Solution

  • To display a favicon you do not need a web manifest. Simply copy the image into the public folder and make sure the file is named favicon.ico.

    The icons array in the web manifest is used to display the icon once the user installed the PWA on the mobile device.

    Have a look at this article, where I explain in detail the different web manifest properties and how to set it up properly,