Ionic PWA favicon.ico

Ionic Framework ionic-v3
1

I ran our Ionic PWA through https://realfavicongenerator.net/favicon_checker to check if all the necessary favicon.ico are specified. However it came back with lots of warnings like:

  • There is no Touch icon in the root directory
  • /apple-touch-icon.png is ill-formed
  • There is no icon for Android Chrome
  • File /browserconfig.xml is accessible but ill-formed
  • /favicon.ico is ill-formed

Our icons are being served from /assets/icon/ folder, how to you also specify or include them in the root folder of the PWA?

2

Ok, I figured it out :+1:

I just needed to add the favicon.ico, browserconfig.xml, etc into the www directory.

This way those files will get included when www is published to the server.

3

See: https://robferguson.org/blog/2018/04/17/optimising-the-performance-of-an-ionic-pwa-part-2/

copy.config.js:

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html',
          '{{SRC}}/favicon.ico',
          '{{SRC}}/apple-touch-icon.png',
          '{{SRC}}/manifest.json',
          '{{SRC}}/browserconfig.xml'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionic-angular/fonts/noto-sans**',
          '{{ROOT}}/node_modules/ionic-angular/fonts/roboto**'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
};
4

Woah, thanks @robinyo for sharing that link :+1: