HTML 파비콘(Favicon) 적용하기

HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 
<link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.
-mdn

Link: <link>: 외부 리소스 연결 요소 from MDN

Link: Link types from MDN

 

 

link는 스타일 시트 연결할 때만 사용했던 것 같은데 사이트의 아이콘도 이 link태그를 이용해서 표시한다고 한다.

요게 파비콘이다.

 

 

 

 

relationship은 "icon"이며 href로 해당 아이콘의 위치를 나타내주면 된다.

<link rel="icon" href="favicon.ico">

 

 

 

단, 작성일 기준으로 Opera Android 및 Safari on iOS는 icon을 지원하지 않는다.

Safari on iOS는 icon 대신 rel="apple-touch-icon"을 사용해야하며 파일은 PNG형식이어야 한다.

<link rel="apple-touch-icon" href="favicon.png">