Vue.js 파비콘 favicon 적용하기

기존 이미지 파비콘으로 바꾸기

왼쪽의 Vue 기본 이미지에서 오른쪽의 Plantiful만의 이미지로 변경했다. 

 

 

 

파비콘 만들기 

우선 이미지에 넣을 파비콘을 만들어야한다. 난 두번째 사이트에서 직접 도트를 찍었다. 

 

이미지 파비콘으로 변환하기

https://www.favicon-generator.org/

Favicon & App Icon Generator

 

 

파비콘 직접 만들기

https://www.favicon.cc/

favicon.ico Generator

 

 

다 만들고 download favicon 을 눌러 다운받는다.

 

 

 

 

다른 블로그에서 찾은것들 전부 경로가 적용이 안돼서 애 먹었는데, 그냥 기존 Vue 있던 favicon.ico 자리에 내가 만든 파비콘으로 대체했다.

 

이렇게 public 밑에 있는 favicon.ico 파일을 삭제하고 내가 만든 파비콘 파일을 넣어주었다.

 

 

 

 

그럼 경로 변경 필요없이 파비콘 교체 완료 ~~

<link rel="icon" href="<%= BASE_URL %>favicon.ico">