리액트 상단 로고, 제목 바꾸는 방법

상단 리액트 마크 바꾸기

이렇게 로고도 추가해주고, nff 라고 이름도 바꿔줌. 

 

1) 로고 변경

2) 사이트 이름 React App => nff

---

 

로고 추가해주기

로고 추가

여기서 보면 기존의 원래 리액트 생성 시에 있던 기존의 logo 이미지들을 다 지워주고,

png 파일과 svg 파일을 새로 넣어줬다.

이렇게 따로 이미지를 갖고와서

public 폴더에 넣어주면 된다.

 

그 다음 index.html 파일을 열기

index.html 파일을 열어서

줄 쳐진 부분에 경로 수정을 해주면 된다.

 <link rel="icon" href="%PUBLIC_URL%/logo.svg" />

icon 부분은 svg 로

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />

애플 터치 아이콘은 png 로 넣어줌.

apple-touch-icon은 iOS와 iPadOS 장치에서 
웹사이트의 홈 화면에 추가할 때 사용되는 아이콘입니다. 

사용자가 웹사이트를 홈 화면에 추가하면 이 아이콘이 사용됩니다. 

반면, <link rel="icon">은 
모든 브라우저에서 사용하는 기본 아이콘을 설정하는 데 사용됩니다. 

각 링크의 기능은 다음과 같습니다:

<link rel="icon">:
웹사이트의 기본 아이콘으로 사용됩니다.
웹 브라우저의 탭이나 즐겨찾기 목록에서 사이트를 표시하는 데 사용됩니다.
일반적으로 작은 사이즈(16x16 또는 32x32 픽셀)의 아이콘을 사용합니다.


<link rel="apple-touch-icon">:
iOS 및 iPadOS에서 홈 화면에 추가할 때 사용됩니다.
일반적으로 180x180 픽셀의 크기가 추천됩니다.
사용자가 웹사이트를 홈 화면에 추가했을 때 표시되는 아이콘입니다.

사이트 이름 변경하기

이름 변경은

index.html 파일에서

중간쯤에 title 태그에서 변경 가능

 

nff 로 사이트 이름 변경함.