Frontend/React

react - favicon, 타이틀 변경

Creative_Lee 2021. 8. 1. 11:23

안녕하세유~!

 

쇼핑몰 가다 잡는다고 벌써 3주 잠수를 탔군요

 

오늘의 집을 보면서 클론코딩 하듯 웹페이지에 모양이나 기능을 구현해가고 있슴다.

css에 대해서도 따로 카테고리를 만들어서 써봐야 겠어요. 꽤나 흥미로운 주제들이 많더군용


favicon 변경하기 !

 

여튼 !

본론으로 들어가서 오늘은 웹페이지 상단바 아이콘과 타이틀을 바꿔봅시다.

 

 

 

너무 초라하더라구요

어딜봐서 쇼핑몰인가

상단바 싸악 바꿔봅시다.

 


1. 아이콘 구하기!

 

https://www.favicon-generator.org

아묻따 위 링크로 들어갑니다.

이곳에 자신이 가진 이미지파일을 넣으면

.ico 이라는 확장자를 가진 아이콘 파일을 퉤 뱉어줍니다.

 

압축을 풀면 보이는 favicon.ico

 

탸단~~~ 벌써 아이콘을 얻었습니다.


2. 올바른 경로에 넣어주기!

 

대체 favicon.ico의 경로가 어딘가~~ 찾아봅시다.

 

 

우선 우리 public 폴더에 있는 index.html을 열어보면 이런친구가 보입니다.

이러쿵저러쿵   icon이 보이구요

이러쿵저러쿵 경로가 public/favicon.ico 입니다. 

 

 public/favicon.ico 입니다. 

 public/favicon.ico 입니다. 

 public/favicon.ico 입니다. 

 

요시! public폴더에 넣으면 되는군요!

그저 넣기만 하면 된다.

 

상단바 아이콘에 대한 설정은 끝났습니다!!


 

타이틀 변경하기!

 

 

이제 상단바 타이틀을 바꿔봅시다.

 

public 폴더에 있는 index.html을 열어 </head>태그바로 위

title 태그 사이에 원하는 대로 써줍니다.

 

 

 

탸댠~! 드디어 봐줄만한 상단바가 완성됐습니다!

멀고도 험하다.

 

 

 

'Frontend > React' 카테고리의 다른 글

react - useRef  (0) 2022.06.14
react - public폴더 이미지 절대경로로 사용하는 법  (7) 2021.08.07
react - context API  (0) 2021.06.20
react - useEffect  (0) 2021.06.14
react - props  (0) 2021.06.10