vue-cli plugin 웹팩과 파비콘

pwa프로젝트 개발 중 파비콘을 변경해야하는 일이 생겼다. 파비콘 이미지 경로와 이름 정도만 수정하면 될 거라 생각했는데, 생각보다 애를 먹었다.

원인

index.html에 정의한 파비콘을 렌더링하지 않는 현상

• dom요소 확인→<!--[if IE]> 주석으로 감싸진 link tag로 렌더링

@vue/cli-plugin-pwa 또는 내부의 HTMLWebpackPlugin이 index.html을 처리하면서 당신이 직접 넣은 <link rel="icon">을 IE 조건부 주석으로 옮겨버리고, 대신 자동 생성한 를 기본으로 추가하고 있습니다.

🔍 왜 이런 일이 벌어지냐면?

Vue CLI + PWA 플러그인 환경에서는 다음과 같은 일이 일어납니다:
1. vue.config.js > pwa.iconPaths 설정이 없으면 favicon.ico를 기본으로 사용함
2. index.html에 <link rel="icon" ...>을 직접 작성하면,
- Webpack의 HTMLWebpackPlugin이 이를 감지하고,
- "이건 우리가 자동으로 삽입할 거니 IE 전용 조건 주석으로 밀어두자"**라고 처리함
즉, 이런 코드가 생기는 건 Vue CLI의 자동 HTML 템플릿 가공 때문입니다

vite 프로젝트와 차이점

타 프로젝트에선 이런 일이 없었는데~하고보니 플러그인 차이가 있었다.

✅ 핵심 차이점: vite는 "정적 HTML", vue-cli는 "템플릿 HTML + Webpack 가공"

• vue-cli 는 HTML처리를 html-webpack-plugin이 가공
• 파비콘 삽입 시 Webpack이 기본 favicon 넣으려 하고, 중복 시 IE 조건부로 밀어냄

1. <%= BASE_URL %>favicon.ico는 "더미"로 넣고, 실사용 파비콘은 아래에 명시

해결방안

config파일 수정

// vue.config.js
module.exports = {
  pwa: {
    iconPaths: {
      favicon32: null,
      favicon16: null,
      appleTouchIcon: null,
      maskIcon: null,
      msTileImage: null,
    },
  },
};

➡️ 효과없음

chainWebpack 추가

Vue CLI 5.x 기준으로 이걸 완전히 제어하려면 Webpack의 html-webpack-plugin 옵션을 수동 제어 해야 합니다. Vue CLI는 이걸 chainWebpack을 통해 설정할 수 있습니다.

  chainWebpack: config => {
    config.plugin('html').tap(args => {
      // 👇 기본 favicon 삽입을 막기 위해 이 옵션 제거
      args[0].favicon = false;
      return args;
    });
  },

➡️ 효과없음

채택한 코드

<!-- 더미: 실제 표시되지는 않지만 삽입 트리거용 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

<!-- 원하는 파비콘 -->
<link rel="icon" type="image/png" href="/favicon_gemini.png" />

→ 실제로 첫 번째 코드가 <!--[if IE]> 주석으로 감싸진 link tag 로 렌더링, 두 번째 코드는 정상적으로 렌더링되어 파비콘으로 표시됨

이 구성은 실제로도 Vue CLI에서 가장 안전한 favicon 삽입 방식 으로 알려져 있습니다.
조건부 주석은 생길 수 있지만, 실제 표시되는 건 하단 PNG이므로 OK입니다.

라고 하네요..