favicon(파비콘)이란 ? (클론코딩 시 파비콘 다운, 적용 방법)

* favicon(파비콘)?

: 웹사이트를 대표하는 아이콘, Favorite와 Icon의 합성어

특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 로고

'즐겨찾기 아이콘(favorites icon)'의 줄임말

 

* favicon 이미지

1. 웹사이트 설명 가능

2. 크기는매우 작고(ex. 16×16픽셀) 해상도가 낮음

 

* favicon 이미지 확인, 다운로드

 

: URL/favicon.ico
ex . https://www.naver.com/favicon.ico

 

* favicon 이미지 적용법 

개발자 도구(f12) 에서 short cut이라고 작성된 부분을 copy->copy outer HTML 하면

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1" /> 이게 복사됨.

 

여기서 경로에 맞게 수정해주면 됨.

나는 assets밑에 저장해서

<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />

 

이렇게 수정해주고 정상으로 뜨는 것 확인