[React.js] favicon 설정하기

개발한 웹페이지를 빌드하고 보니 브라우저 tab의 favicon과 name이 리액트더라..

그래서 다음 설정을 통해 favicon 설정하고 이름을 바꾸었다.

| public 폴더 수정하기

create-react-app을 통해 생성한 react 프로젝트를 보면 위와 같이 node_modules, public, src 폴더가 있다.

이 중 public 폴더의 favicon과 index.html을 수정하면 된다.

favicon.ico 파일을 본인이 넣고자하는 아이콘 image로 대체하면 된다.

웹페이지의 title은 index.html의 <title/> 태그를 수정하면 바뀐 이름으로 적용된다.

| React Helmet 사용하기

https://github.com/nfl/react-helmet

nfl/react-helmet

혹은 위의 react-helmet을 사용하면 간단하게 해결이 가능하다.

 

그런데 종종 react-helmet을 사용하여도 favicon이 변경되지 않을 때가 있는데, 그럴때는 프로젝트의 public 폴더를 위와 같이 수정해주는게 효과적이다.

 

나의 경우는 2가지 방법을 동시에 사용하고 있다.