인터넷 브라우저를 사용하다보면 탭부분에 아이콘이 표시되는게 있고 없는 사이트도 있습니다. 필수로 넣는것은 아니지만 가독성을 높이고 사이트의 브랜드 로고를 표시하는데 도움이 되는 아이콘이며 공식정인 명칭은 파비콘 favicon이라고 합니다. 아래 브라우저 최 상단을 보면 아이콘이 있는걸 볼 수 있습니다.

 파비콘 아이콘을 만들기 위해서는 사용하는 로고 이미지를 가지고 있어야 합니다.

파비콘 생성하기

지원하는 형식은 png, gif, icon file format을 지원합니다.
투명하게 제작하는 경우 브라우저 회색과 겹칠 수 있으니 주의 하세요.

이미지크기는 가로세로 48px 배수가 되는 48x48 96x96 144x144px 이미지가 필요하며 여기서 px는 픽셀(화면의 점) 단위 입니다.
구글에서는 16x16 크기를 키워서 사용하는것을 권장하고 있지 않습니다.

ico 파일은 일반적인 편집기로 만들기 어렵습니다. 포토샵의 경우도 플러그인을 설치해야 하기 때문에 아래 사이트에서 생성하는 것을 권장합니다.
큰 로고이미지를 가지고 해당 사이트에서 생성해서 사용하면 리사이즈가 간편 합니다.
https://www.favicon-generator.org/

웹사이트에 추가하기

파비콘을 웹사이트에 표시하기 위해서는 테그를 수정하여 해당 부분을 추가 해 줘야 합니다.
아래와 같이 홈페이지 도메인주소는 생략이 가능한 상대경로를 입력할 수 있고 도메인을 입력하여 절대 경로를 사용해도 됩니다.

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

사이트에는 Shortcut icon 과 Icon을 둘다 기입하는 경우가 많습니다. Shortcut Icon은 표준으로 지원하는 테그가 아니지만 호환성을 위해서 입력할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

app-touch-icon 용도는?

애플에서 사용하는 Safari(사파리) 브라우저와 IOS에서 사용되어지기 때문에 같이 사용하는게 좋습니다.

실제 사용하는 사이트 사례

해당 사이트에서 사용하는 파비콘 테그 정보입니다. 
og:image : 카톡에서 홈페이지 주소를 공유할 때 해당 사이트 로고이미지가 표시되는 것처럼 소셜공유에서 사용하고 페이스북, 트위터 등에서 활용됩니다.
icon : favicon.ico 파일을 파비콘으로 사용합니다.

브라우저에 view-source:/ 를 입력하면 해당 사이트의 모든 테그 확인도 가능합니다. 단축키는 Ctrl + U 입니다.

view-source:/

<meta   property="og:image"             content="/image/chr(logo).png" />
<meta   property="og:image:width"       content="300" />
<meta   property="og:image:height"      content="120" />
<meta   property="og:image:type"        content="image/png" />

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

<link   rel="canonical"                 href="/" />