[React] 프로젝트 title / favicon(파비콘) 변경

프로젝트 title 변경

 

1. 프로젝트 디렉토리 안에 [public] - [index.html]을 들어간다.

 

2. <title></title> 태그 안의 내용을 수정해주면 된다.

 

프로젝트 favicon변경

1. 아이콘 생성 또는 다운로드

 

 (1) 아이콘 다운로드

 - 아래 링크에서 아이콘을 'ICO'를 선택하여 다운 받는다.

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

무료 아이콘 SVG, PNG, ICO 또는 ICNS

 

 (2) 아이콘 만들기

아래 사이트로 들어가서 내가 가진 사진으로도 .ico를 만들 수 있다.

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

Favicon & App Icon Generator

- 파일선택으로 이미지 선택 후, Generate only 16x16 favicon.ico를 선택 후 Creacte Favicon을 선택한다.

Create Favicon 선택

 - Download the generated favicon을 하면 .ico 파일이 다운로드 된다.

2. public 디렉토리 안에 .ico 파일 넣기

 - 다운로드 받은 .ico 파일을 [public] 디렉토리에 넣어준다.

   (기존에 있던 favicon.ico는 지워도 되고, 덮어쓰기 해도 되고, 원하는 이름으로 변경해도 된다.)

 

3.  index.html 파일 열기

 - 프로젝트 디렉토리 안에 [public] - [index.html]을 들어간다.

 

4. 코드 수정하기

 - <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 이라는 코드가 보일텐데 여기를 수정해주면 된다.

 - 아이콘 명을 favicon.ico 그대로 넣었으면, 따로 변경을 안해줘도 된다!

 

4-1. 기본(?)아이콘으로 설정하기

 link 태그에 아래 코드를 입력하면 기본 아이콘이 설정된다.

<link rel="shortcut icon" href="data:image/x-icon">

 

 

참고블로그

https://toramko.tistory.com/entry/react-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%83%AD-%EC%95%84%EC%9D%B4%EC%BD%98favicon-%EC%A0%9C%EB%AA%A9title-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0