Vue.js PWAで、勝手にheadに挿入されるiconのリンク先を変更する方法

Vue.js + PWAプラグインのデフォルトの挙動

Vue.jsのプロジェクトにPWAプラグインを入れていると、自動でicon周りのパスをHTML head要素に挿入します。

デフォルトでは下記のコードが入っているはずです。

<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#FFF">
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">

これはこれで助かるのですが、favicon周りを一括変換するツールを使ってたりすると、ファイル名やパスがこの通りではないことがあるので、変更したい場合の方法をまとめました。

vue.config.jsで「iconPath」を追加する

PWAプラグインの設定周りは、vue.config.jsに書くことになっていて、faviconなどのアイコン周りも同様です。

vue.config.jsのpwaセクションに「iconPath」を追加して、アイコンのパスを指定します。

module.exports = {
  .
  .
  .
  pwa: {
    name: 'サイト名',
    themeColor: '#FFF',
    msTileColor: '#FFF',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    iconPaths: {
      favicon32: 'imgs/icons/icon-32x32.png',
      favicon16: 'imgs/icons/icon-16x16.png',
      appleTouchIcon: 'imgs/icons/apple-touch-icon.png',
      maskIcon: 'imgs/icons/site-tile-310x310.png',
      msTileImage: 'imgs/icons/site-tile-310x310.png'
    }
  }
}

パスは、デフォルトで「/」から書かれるので最初に「/」を入れると、リンクが「//(ハイパーリンク)」になって姉妹、NotFoundになるので要注意です。

Vue.js PWAで、勝手にheadに挿入されるiconのリンク先を変更する方法をみてきました。

勝手にやってくれるのは嬉しいのですが、せめて設定方法などはドキュメントのわかりやすいところにまとめてあるとより嬉しいですね。