diff --git a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
index 6ff0003842..8c2d8aaeda 100644
--- a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
+++ b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
@@ -81,22 +81,26 @@ module.exports = class HtmlPwaPlugin {
const assetsVersionStr = assetsVersion ? `?v=${assetsVersion}` : ''
- data.head.push(
- // Favicons
- makeTag('link', {
+ // Favicons
+ if (iconPaths.favicon32 != null) {
+ data.head.push(makeTag('link', {
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: getTagHref(publicPath, iconPaths.favicon32, assetsVersionStr)
- }),
- makeTag('link', {
+ }))
+ }
+ if (iconPaths.favicon16 != null) {
+ data.head.push(makeTag('link', {
rel: 'icon',
type: 'image/png',
sizes: '16x16',
href: getTagHref(publicPath, iconPaths.favicon16, assetsVersionStr)
- }),
+ }))
+ }
- // Add to home screen for Android and modern mobile browsers
+ // Add to home screen for Android and modern mobile browsers
+ data.head.push(
makeTag('link', manifestCrossorigin
? {
rel: 'manifest',
@@ -111,9 +115,11 @@ module.exports = class HtmlPwaPlugin {
makeTag('meta', {
name: 'theme-color',
content: themeColor
- }),
+ })
+ )
- // Add to home screen for Safari on iOS
+ // Add to home screen for Safari on iOS
+ data.head.push(
makeTag('meta', {
name: 'apple-mobile-web-app-capable',
content: appleMobileWebAppCapable
@@ -125,22 +131,30 @@ module.exports = class HtmlPwaPlugin {
makeTag('meta', {
name: 'apple-mobile-web-app-title',
content: name
- }),
- makeTag('link', {
+ })
+ )
+ if (iconPaths.appleTouchIcon != null) {
+ data.head.push(makeTag('link', {
rel: 'apple-touch-icon',
href: getTagHref(publicPath, iconPaths.appleTouchIcon, assetsVersionStr)
- }),
- makeTag('link', {
+ }))
+ }
+ if (iconPaths.maskIcon != null) {
+ data.head.push(makeTag('link', {
rel: 'mask-icon',
href: getTagHref(publicPath, iconPaths.maskIcon, assetsVersionStr),
color: themeColor
- }),
+ }))
+ }
- // Add to home screen for Windows
- makeTag('meta', {
+ // Add to home screen for Windows
+ if (iconPaths.msTileImage != null) {
+ data.head.push(makeTag('meta', {
name: 'msapplication-TileImage',
content: getTagHref(publicPath, iconPaths.msTileImage, assetsVersionStr)
- }),
+ }))
+ }
+ data.head.push(
makeTag('meta', {
name: 'msapplication-TileColor',
content: msTileColor