[HTML] 파비콘(Favicon) 만들고 적용하는 방법

개발/HTML

sungho88 2018. 10. 2. 13:39

네이버를 열면,

웹 페이지 타이틀 옆에 이미지를 파비콘(Favicon)이라 부른다.

참고로 파비콘은 Favorite Icon의 약자이다.

이것을 어떻게 내가 원하는 이미지로 변경을 할 수 있을까?

당연한 순서겠지만, 아래 두 프로세스로 만들 수 있다.

1. 원하는 파비콘 이미지를 만든다.(또는 다운로드 받는다)

2. HTML에서 이 이미지를 부른다.

파비콘 이미지 만들기

- 직접 만들려면, 파비콘은 16x16 크기의 이미지 파일로 확장자는 .ico다.

- 웹 상으로 공유되는 파비콘도 많기 때문에 원하는 모양을 찾아서 다운로드 받을 수도 있다.

(예를 들면, FLATICON)

파비콘 이미지 호출하여 적용하기

- HTML 내 <head>태그 안에 다음과 같이 집어넣으면 된다.

<link rel="shortcut icon" href="/path/faviconimagename.ico">

이렇게 하면 된다.