1. 버그 내용

아래와 같은 흐름으로 배포를 했습니다만, 「Nuxt의 디폴트 아이콘이 파비콘으로서 표시되는 에러」가 일어났습니다.

nuxt.js (vue.js) 에서 프로젝트 만들기( SPA / PWA 에서 생성)

favicon.ico 및 icon.png를 사용자 정의 아이콘 파일로 변경

npm run dev에서 파비콘이 변경되었는지 확인

npm run build 다음 npm run generate 다음 정적 폴더 ( dist ) 생성

firebase hosting 에 배포

호스팅한 사이트의 탭을 보면 다음과 같이 되었습니다.
바꿔야 할 Favicon이 왜 Nuxt의 기본 아이콘으로 남아있었습니다.

덧붙여서 npm run dev 로 세운 로컬 서버에서는, 변경 후의 파비콘이 표시되었습니다.
이 기사에서는 이러한 경우에 대한 간단한 해결책을 소개합니다.

2. 사쿠와 대처하는 방법

① 아래와 같이 pwa: {icon: false}, 를 nuxt.config.js 에 추가

nuxt.config.js

...
 modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],
  // ===== 以下のコードを追加 =====
  pwa: {
    icon: false
  },
...

② dist 폴더 삭제 ( rm -rf dist )
③ 다시 다음 명령으로 dist 폴더를 생성하여 배포

% npm run build
% npm run generate
% firebase deploy --only hosting

그러면 아래와 같이 favicon.ico 의 데이터가 무사하게 표시됩니다!

3. 버그의 원인

조사해 보았더니, PWA 버그 에 의한 것 같았습니다.
내 프로젝트에는 다음과 같이 @nuxtjs/pwa 모듈을 추가했습니다.

nuxt.config.js

...
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],
...

그리고 그 결과, 아래와 같이 dist/nuxt/icons 안에 PWA 대응용의 화상이 생성되고 있었습니다.

게다가, 이 파일들은 “nuxt 디폴트 아이콘”이 되었다.
공식 페이지 에 의하면, 디폴트에서는 static/icon.png 를 참조해 생성되는 것 같습니다만, 아무래도 거기의 패스가 잘 일치하지 않는 것 같았습니다.

따라서 우선 조치로 PWA 아이콘을 비활성화하는 명령을 추가하면이 폴더가 더 이상 생성되지 않으며 PWA 아이콘 대신 favicon.ico 아이콘이 우선적으로 표시됩니다. .

4. 제대로 대처하는 방법

어디까지나 여기까지 소개한 것은, 바삭바삭과 대처하는 방법이었습니다만, 「PWA의 아이콘을 제대로 설정하고 싶다!」라고 하는 분은, 이하와 같은 방법으로 대처하면 좋을까 생각합니다.

A. faviator를 사용한 대처법

PWA에 대응할 때 아이콘을 속공으로 작성

B. head를 편집하는 대처법

How to set icon on PWA app on home screen and Bookmark using nuxt.config.js (Safari) - stack overflow

5. 보충(개발 환경)

version.txt

% node -v
v14.12.0

% npm -v
6.14.8

% npm list --depth=0
[email protected] ~/Documents/sample
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

% firebase --version
8.11.2