정적 파일 만들기 : 탭 아이콘 설정하기

상단의 탭에 아이콘을 설정하기 위해 우선 .ico 형식의 파일을 생성한다.

아래의 사이트를 이용하여 png 파일을 ico 파일로 변환할 수 있다.

https://www.icoconverter.com/

ICO Converter

 

생성한 ico 파일을 프로젝트 폴더안에 폴더를 생성하여 넣어준다. ex) static

프로젝트를 실행할 때 dist 폴더에서 해쉬값을 포함된 파일을 통해 실행되지만

dist 폴더는 삭제됐다가 다시 생성할 수 있는 폴더이므로

ico 파일을 dist 폴더에 바로 넣는건 문제가 될 수 있다.

 

그러므로 parcel-plugin-static-files-copy를 통해 정적 파일을 만들어 연결해준다.

 

정적 파일 만들기

parcel-plugin-static-files-copy를 설치한다.

npm i -D parcel-plugin-static-files-copy

 

package.json 폴더에 staticPath를 설정해준다.

"staticFiles": {
    "staticPath":"static"
  }

 

실행하면 static 폴더 안에 ico 파일을 찾아 탭 아이콘으로 설정되어있는 것을 확인할 수 있다.