Ionic PWA favicon.ico

I ran our Ionic PWA through 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?

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.



module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  copyIndexContent: {
    src: ['{{SRC}}/index.html',
    dest: '{{WWW}}'
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionic-angular/fonts/noto-sans**',
    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}}'

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