리액트 프로젝트를 새로 생성하여 웹사이트 개발을 시작하면
웹 화면 탭에 다음과 같이 나타난다.
react 공식 아이콘과 'React App' 이라는 문구가 확인된다.
이 default 아이콘과 타이틀을 수정하고자 한다면 다음과 같이 진행하면 된다.
1. 아이콘 준비하기
1) 무료 아이콘 다운로드하기
위 사이트에서 다양한 무료 아이콘을 다운받을 수 있다.
마음에 드는 아이콘을 찾고 다운로드를 받으면 되는데
이 때, 아래와 같이 '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 (앞서 본 리액트 공식 아이콘) 이 있었을 것이다.
이를 내가 원하는 아이콘 파일 명으로 변경해주면 된다.
(참고로 %PUBLIC_URL% 은 추후 public 폴더 경로로 자동 변환된다.)
2) 타이틀 수정
제목으로 들어갈 텍스트도 head 태그 내의 title 태그를 수정하면 된다.
<title>토람</title>
이렇게 적용한 후 확인해보면,
짠! 이렇게 지정한 아이콘과 타이틀을 확인할 수 있다 :D
':: frontend > react.js' 카테고리의 다른 글
react :: 리액트 텍스트 클립보드에 복사하기(react-copy-to-clipboard) (1) | 2022.10.14 |
---|---|
react :: 모바일에서 클릭(터치) 시 파란 하이라이트(highlight) 생기지 않게 하기 (0) | 2022.06.08 |
react :: 텍스트(text)와 컴포넌트(component) 정렬(align)하기 (네이버 지도 정렬하기) (0) | 2022.05.09 |
react :: 인텔리제이(IntelliJ) 에서 리액트(React) 프로젝트 생성하기 (0) | 2022.03.24 |
npm :: 인텔리제이(IntelliJ) "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다." 오류 해결 (0) | 2022.03.22 |