Favicon 웹사이트에 적용하기

시작하기

파비콘(favicon)이라는 명칭으로 웹사이트 상단 탭에 나오는 아이콘 혹은 브라우저 어플 아이콘등을 뜻합니다.
주로 웹사이트를 대표하는 로고를 많이 사용합니다.

Favicon 만들기

로고파일(png, jpg등)을 준비해줍니다.
파비콘 파일을 만들어 주는 Favicon Generator사이트로 이동합니다.
Favicon Generator 사이트

파일 등록 버튼을 눌러 파일을 업로드 합니다.
이후 Create favicon 버튼을 클릭하여 favicon 파일을 만듭니다.

Favicon 제작
다음과 같은 페이지가 나옵니다.
Download the generated favicon 링크를 클릭하여 다운로드를 받고 하단의 html 태그들을 복사합니다.

적용하기

파일을 프로젝트 내부에 저장하고, 사용하고자하는 페이지 상단 head 부분에 복사한 태그를 넣어줍니다.
리액트 프로젝트의 경우 public/index.html 파일의 head 부분에 태그를 붙여넣기 해줍니다.
그러면 다음과 같이 적용이 완료됩니다.
최종 결과물

Share