[React] favicon 변경하기

react-create-app으로 프로젝트를 시작하면, 브라우저 탭의 왼쪽에 있는 favicon이 리액트 로고로 뜬다. 

(아래 그림에서 크롬 로고 위치에 말이다)

 

내 서비스에 맞는 아이콘을 디자인해서 그것으로 변경하고 싶을 때는 아래와 같이 하면 된다.

 

1. 아이콘 디자인 하기

일단 디자인 한 아이콘 파일이 있어야 한다.

 

2. favicon으로 만들기

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

Favicon & App Icon Generator

여기 사이트에 들어가서 디자인 한 아이콘 파일을 업로드하면 favicon 파일을 받을 수 있다.

 

3. 파일 교체하기

기존 public 폴더에 있는 favicon.ico 파일을 새로운 파일로 교체한다.

 

4. 끝!