정의
Favorite icon의 줄임말
웹 브라우저에서 보여지는 웹 사이트를 대표하기 위한 16 x 16 픽셀의 이미지
웹 브라우저 탭 상단, 북마크 바, 방문 기록, 검색 결과, 웹 브라우저 홈 화면 등에서 보여진다
처음엔 ICO 형식의 16 x 16 픽셀 아이콘이 사용되었지만, 웹이 발전하면서 더 큰 사이즈와 여러 이미지 파일 형식을 지원하도록 발전되어 왔다
현재는 웹 사이트의 브랜드 정체성을 나타내고 있다
표준화
2005년 W3C가 파비콘에 대한 권고안을 발표했다
- 파일명: favicon.ico
- 위치: 웹 사이트의 루트에 배치
그 후로도 권고안이 갱신되어 왔다
제작 형식
크기
정사각형이어야 한다
파일 크기가 작고 빠르게 로딩되는 것이 중요하다
16 x 16, 32 x 32를 가장 많이 사용하고 선호한다
- 16 x 16: 웹 브라우저용
- 네이버 검색 결과에는 15 x 15로 조정하여 사용한다. 해당 해상도에서 잘 노출될 수 있는지 확인 필요
- 32 x 32: 작업표시줄 단축키용
- 96 x 96: 데스크탑 단축키용
- 180 x 180: 애플 터치용
파일
- PNG, JPEG
- SVG
- ICO
온라인 파비콘 생성기
HTML에 파비콘 추가
<head> 태그에 아래 내용 추가
rel 속성값
- shortcut icon
- 최신 웹 브라우저에서 불필요
- icon
- apple-touch-icon
- apple-touch-icon-precomposed
- 자동 반사 효과(Glossy effect)를 없애기 위한 옵션이었는데, 최근에는 iOS가 더이상 반사 효과를 자동 적용하지 않기 때문에 잘 사용되지 않는다
여러 파비콘 마크업이 있는 경우 적용 우선순위
- shortcut icon
- icon
- default icon (host url + /favicon.ico)
- apple-touch-icon
- apple-touch-icon-precomposed
동일 rel 속성이 여러 개가 존재하면 이미지 크기가 큰 것을 우선
<!-- 기본 -->
<link rel="icon" href="/favicon/favicon.ico" />
<!-- PNG -->
<link rel="icon" type="image/png" sized="16x16" href="/favicon/favicon-16x16.png" />
<link rel="icon" type="image/png" sized="32x32" href="/favicon/favicon-32x32.png" />
<!-- SVG -->
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<!-- iOS 홈 화면용 -->
<link rel="apple-touch-icon" href="/favicon/apple-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
<link rel="apple-touch-icon-precomposed" href="/favicon/apple-icon-precomposed.png" />
<!-- Android chrome용 -->
<link rel="icon" sizes="36x36" href="/favicon/android-icon-36x36.png" />
<link rel="icon" sizes="48x48" href="/favicon/android-icon-48x48.png" />
<link rel="icon" sizes="72x72" href="/favicon/android-icon-72x72.png" />
<link rel="icon" sizes="96x96" href="/favicon/android-icon-96x96.png" />
<link rel="icon" sizes="144x144" href="/favicon/android-icon-144x144.png" />
<link rel="icon" sizes="192x192" href="/favicon/android-icon-192x192.png" />
<!-- Android manifest (웹 앱 지원) -->
<link rel="manifest" href="/favicon/manifest.json" />
<!-- Microsoft tiles (Windows 8/10 타일) -->
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<!-- Safari pinned tab (iOS 및 macOS에서 탭 아이콘) -->
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
manifest.json은 웹 애플리케이션이 PWA(Progressive Web App)로 동작할 때, 앱의 메타데이터를 정의하는 JSON 파일이다. 이 파일을 통해 웹 애플리케이션이 모바일 기기나 데스크탑에서 마치 네이티브 앱처럼 동작할 수 있도록 설정할 수 있다
{
"name": "App",
"icons": [
{
"src": "\/favicon\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/favicon\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/favicon\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/favicon\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/favicon\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/favicon\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Windows의 pinned tiles는 하나의 타일 이미지만 설정할 수 있다. 여러 크기의 타일 이미지를 제공하려면 browserconfig.xml을 정의해야 한다
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/ms-icon-70x70.png" />
<square150x150logo src="/ms-icon-150x150.png" />
<square310x310logo src="/ms-icon-310x310.png" />
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>