Favicon HTML link Tag

안녕하세요?

 

이번에는 Favicon관련하여 HTML 소스에 넣는 코드를 공유하고자합니다.

 

	<link rel="shortcut icon" href="/assets/images/favicon/16/favicon.ico">
	<link rel="icon" href="/assets/images/favicon/16/favicon.ico" sizes="16x16">
	<link rel="icon" href="/assets/images/favicon/24/favicon.png" sizes="24x24">
	<link rel="icon" href="/assets/images/favicon/32/favicon.ico" sizes="32x32">
	<link rel="icon" href="/assets/images/favicon/48/favicon.png" sizes="48x48">
	<link rel="icon" href="/assets/images/favicon/57/favicon.png" sizes="57x57">
	<link rel="apple-touch-icon-precomposed" href="/assets/images/favicon/57/favicon.png" sizes="57x57">
	<link rel="icon" href="/assets/images/favicon/64/favicon.png" sizes="64x64">
	<link rel="icon" href="/assets/images/favicon/72/favicon.png" sizes="72x72">
	<link rel="apple-touch-icon-precomposed" href="/assets/images/favicon/72/favicon.png" sizes="72x72">
	<link rel="icon" href="/assets/images/favicon/96/favicon.png" sizes="96x96">
	<link rel="icon" href="/assets/images/favicon/114/favicon.png" sizes="114x114">
	<link rel="apple-touch-icon-precomposed" href="/assets/images/favicon/114/favicon.png" sizes="114x114">
	<link rel="icon" href="/assets/images/favicon/120/favicon.png" sizes="120x120">
	<link rel="icon" href="/assets/images/favicon/128/favicon.png" sizes="128x128">
	<link rel="icon" href="/assets/images/favicon/144/favicon.png" sizes="144x144">
	<link rel="apple-touch-icon-precomposed" href="/assets/images/favicon/144/favicon.png" sizes="144x144">
	<link rel="icon" href="/assets/images/favicon/152/favicon.png" sizes="152x152">
	<link rel="icon" href="/assets/images/favicon/195/favicon.png" sizes="195x195">
	<link rel="icon" href="/assets/images/favicon/228/favicon.png" sizes="228x228">

 

애플에 맞게 들어간 파이콘도 있지만

각 브라우저에 최적화된 것이나 모바일에 최적화된 크기가 있습니다.

 

그러다보니 위 코드처럼 link태그가 많아졌지만, 피료없는 부분으 없애도 됩니다.

 

<link rel="shortcut icon" href="/assets/images/favicon/16/favicon.ico">

딱 기본 favicon만 추가시에는 위 코드의 한줄만 추가하셔도 적당히 자리 잡히니 선택하여 넣어주시면 됩니다.