react :: 웹사이트 탭 아이콘(favicon), 제목(title) 설정하기

리액트 프로젝트를 새로 생성하여 웹사이트 개발을 시작하면

웹 화면 탭에 다음과 같이 나타난다.

react 공식 아이콘과 'React App' 이라는 문구가 확인된다.

 

이 default 아이콘과 타이틀을 수정하고자 한다면 다음과 같이 진행하면 된다.

 

1. 아이콘 준비하기

1) 무료 아이콘 다운로드하기

 

https://icon-icons.com/ko/

위 사이트에서 다양한 무료 아이콘을 다운받을 수 있다.

마음에 드는 아이콘을 찾고 다운로드를 받으면 되는데

이 때, 아래와 같이 'ICO' 를 선택하여 .ico 파일로 다운받는다.

 

'ICO' 로 다운받기

 

2) 직접 아이콘 만들기

 

내가 가진 파일로(PNG, JPG, GIF) 아이콘을 생성할 수도 있다.

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

위 사이트에서 파일 선택 후 'Create Favicon' 버튼 클릭 → 'Download the generated favicon' 버튼을 클릭하면

여러가지 os 에 맞는 다양한 크기의 아이콘들이 한꺼번에 생성된다.

이 중 알맞는 것을 찾아 사용하면 된다.

 

 

2. 리액트 프로젝트 'public' 폴더에 아이콘 넣기

준비한 아이콘을 원하는 이름으로 수정한 후,

react 프로젝트 내 public 폴더에 다음과 같이 넣어준다.

 

 

 

3. index.html 수정하기

1) 아이콘 수정

 

index.html 파일의 head 태그 내에서 다음과 같이 link 태그를 수정한다.

<link rel="icon" href="%PUBLIC_URL%/heart_icon.ico" />

 

아마 기존에는 "%PUBLIC_URL%/favicon.ico" 로 되어있을 건데

public 폴더 아래 favicon.ico (앞서 본 리액트 공식 아이콘) 이 있었을 것이다.

이를 내가 원하는 아이콘 파일 명으로 변경해주면 된다.

 

link 태그 수정

(참고로 %PUBLIC_URL% 은 추후 public 폴더 경로로 자동 변환된다.)

 

 

2) 타이틀 수정

 

제목으로 들어갈 텍스트도 head 태그 내의 title 태그를 수정하면 된다.

<title>토람</title>

 

이렇게 적용한 후 확인해보면,

 

짠! 이렇게 지정한 아이콘과 타이틀을 확인할 수 있다 :D