무턱대고 코드 복붙으로 구현하였던 favicon..
이번 프로젝트에서는 favicon에 대해 궁금증이 생겨 관련된 article을 여러개 읽게되었다.
오늘은 보고 읽은 favicon에 대해 정리해보는 시간을 가져보려 한다.
일반적으로 사이트 title 정보와 함께 표시되는 웹 페이지를 대표하기 위해 사용되는 16x16픽셀의 작은 image를 의미한다.
favicon은 브라우저 탭, 북마크, 방문기록, 검색 결과등에 표시되며 웹상에서 내 웹사이트임을 알아볼 수 있는 시각적인 식별자가 된다.
일반적으로 파비콘을 만들 때 가장 적합한 크기는 16x16픽셀라고 한다.
파비콘은 다양한 기기에서 보여지는 만큼 다양한 크기로 제공될 수 있다. 용도에 따라 표준 파비콘 크기가 존재하고 내용은 아래와 같다.
16x16: 브라우저용
32x32: 작업표시줄 단축키용
96x96: 데스크탑 단축키용
180x180: 애플 터치용
좀더 자세한 내용을 확인하고 싶다면 아래의 링크를 추천한다.
파비콘 파일로 지원되는 파일의 형식에는 ICO, PNG, JPEG, SVG, GIF가 있다.
만들기 쉬운 파일 형식이며 일반적으로 이미지 및 파비콘을 고화질로 전송한다.
파일이 가볍기 때문에 파일들이 빠르게 로드될 수 있다.
💡 **투명도** 디자인에 투명 배경이 있는 경우, 투명도 설정이 켜져 있는 상태에서 파일을 PNG로 저장해야 한다.웹소스 최상단에 16x16 32x32의 이미지를 멀티 사이즈(여러 사이즈의 이미지를 가지고 있는 상태)나 단일 사이즈의 favicon.ico 파일을 올려놓으면 끝난다.
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
현재는 다양한 디바이스와 브라우저를 지원하기 위해서 기기에 맞게 설정도 다양하게 작업해줘야한다.
단, 다양한 디바이스를 지원할 필요가 없는 경우 불필요한 설정을 제외하고 필요한 내용만 작성해주는 것이 좋다.
범용으로 설정하기
<head>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
홈페이지, 모바일웹용으로 설정하기1
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">
</head>
홈페이지, 모바일웹용으로 설정하기2
<head>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
SVG 파비콘은 아직 모든 브라우저에서 지원하지는 않기 때문에 웹사이트 루트에 32 x 32 favicon.ico를 지정해줄 필요가 있다.
HTML code
<head>
<!--
메인 favicon
- link rel 속성으로 "icon" 값을 이용하기
- 크기 상관없이 SVG로 구현한다.
- type="image/svg+xml은 작성하지 않아도 된다.
-->
<link rel="icon" href="favicon.svg">
<!--
Mask icon
- 사파리 브라우저에서 favicon 이용하기
- link rel 값으로 "mask-icon"을 이용한다.
- svg를 단색으로 사용하는 경우 투명 배경 위에 작업하여 마크업에서 색상 속성을 추가할 수 있다.
-->
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<!--
Touch icon
- iOS 전용 디바이스에서 favicon 이용하기
- link rel 값으로 "apple-touch-icon" 값을 이용한다.
- 180 x 180 크기가 필요하며 크기 지정은 따로 안해도 된다.
-->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- 크롬 브라우저 color를 위해서 여전히 theme-color 지정이 필요하다.-->
<meta name="theme-color" content="#ffffff">
</head>
manifest.json 설정
icon을 위한 mainfest.json 설정은 아래와 같이 해주면 된다. svg 아이콘을 사용하기 위한 설정은 최대 사이즈인 512 x 512 설정만 해주면 된다. 그뿐이다.
아래의 icon 설정은 안드로이드와 크롬에서 쓰이는 설정이다.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
SVG favicon 원본 글 : https://brunch.co.kr/@ultra0034/129