리액트 웹사이트 아이콘 파비콘 만들기

리액트로 만든 웹사이트의 파비콘은 기본적으로 리액트 아이콘으로 되어있는데, 이 부분을 변경해보았습니다.

 

 

사진 속, '우리나라 독립달력' 왼쪽 모양을 변경할거예요!

 

가장 먼저 해야할 일은, 파비콘을 제작하는 것입니다.

---

파비콘 만들기

기존에 만들어둔 이미지가 있는 경우, 해당이미지를 사용해 쉽게 파비콘을 제작할 수 있어요.

 

1. 파비콘 제작 사이트 접속

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

Favicon & App Icon Generator

 

저는 위 사이트를 이용하였으나, 동일한 기능을 하는 사이트라면 아무거나 이용하셔도 상관 없습니다.

 

 

2. 사진 파일 업로드

 

파일을 선택해 넣어주고, Create Favicon 버튼을 누르면 페이지가 이동됩니다.

 

 

3. 파비콘 제작 확인 및 다운로드

 

제작된 파일들을 웹에서 어떻게 쓰는지 보여주고 있어요.

윗쪽 이미지 옆 파란글씨 Download the generated favicon을 클릭해 압축파일을 다운로드합니다.

 

 

4. 다운로드 폴더 압축 해제 및 각 파일 확인

 

다운로드 파일의 압축을 풀어주면, 동일한 이미지의 png 파일이 크기별로 만들어졌습니다.

파비콘으로 사용할 favicon.ico 파일도 확인할 수 있어요.

---

파비콘 수정

1. 기존 파비콘 삭제

 

파비콘 변경을 위해, 리액트 프로젝트의 public 폴더에서 기존 리액트 아이콘의 파비콘을 삭제해주세요.

이때, 로컬 환경에서는 곧바로 다음 과정을 이어나가시지 않으면 파비콘 파일을 찾지 못해 에러가 발생할 수 있습니다.

 

 

2. 이름 설정

 

새로 변경할 파일의 이름이 favicon.ico가 아니라면, favicon.ico로 변경해줍니다.

변경을 원치 않는다면, public의 index.html에서 파비콘이 참조되는 부분을 찾아, 내가 넣을 파일의 이름으로 수정해주는 방법도 가능할 것 같아요.

 

 

3. 프로젝트에 새 파비콘 파일 추가

 

새로 사용할 파비콘을 기존과 동일한 경로 public 하위에 추가해줍니다.

 

 

4. 깃 커밋 및 푸시

변경사항을 담아 커밋 후 푸시 및 브랜치 병합을 해줍니다.

 

 

5. 변경사항 배포

npm run deploy

 

GitHub Pages로 배포한 앱이기 때문에 터미널 명령어를 사용해 재배포해줍니다.

 

---

완성!

 

잠시 후, 새로고침하면 새 파비콘이 적용된 걸 볼 수 있어요 :)