파비콘(Favicon)이란?
파비콘은 "Favorites Icon"의 줄임말로, 웹 브라우저의 탭, 북마크, URL 옆에 표시되는 작은 아이콘입니다.
주로 웹사이트의 로고나 상징을 사용하며, 사용자가 특정 웹사이트를 쉽게 식별할 수 있도록 도와줍니다.
파비콘의 용도
- 브라우저 탭에 표시되는 작은 아이콘
- 북마크 추가 시 나타나는 아이콘
- 모바일 브라우저에서 사용자의 북마크 및 즐겨찾기에 표시됩니다.
- 모바일 홈 화면에 웹사이트 바로가기를 추가할 때 앱 아이콘처럼 표시됩니다.
- PWA(Progressive Web Apps)에서는 고해상도 아이콘으로 웹 앱의 아이덴티티를 강화합니다.
파비콘 만드는 방법
기본 파비콘인 .ico 파비콘은 보통 16 x 16 픽셀로 제작되며, 포토샵, GIMP, Canva와 같은 디자인 도구를 사용해 만들 수 있습니다.
간결하고 선명한 이미지를 선택하여 다양한 해상도에서도 잘 보이도록 하는 것이 중요합니다.
파비콘은 보통 .ico 형식으로 만들지만, 최근엔 .png나 .svg 형식도 많이 사용합니다.
다양한 브라우저 및 환경에서 호환성을 보장하려면 여러 형식의 파일을 준비하는 것이 좋습니다.
만약 파비콘을 직접 제작하기 어렵다면, 아래와 같은 Favicon Generator 웹사이트를 활용하면 편리하게 제작할 수 있습니다.
이러한 사이트들은 다양한 크기와 형식의 파비콘을 자동으로 만들어 주며 서비스를 무료로 제공합니다.
Favicon & App Icon Generator
Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.
Favicon Generator - Create a favicon for website and mobile
PNG to ICO in two seconds! Multi-resolution favicon maker and design tool for iOS, Android, WordPress and touch app. Multiple sizes JPEG and GIF support.
다양한 해상도를 위한 파비콘
파비콘은 다양한 디바이스와 해상도에 적합하도록 여러 크기로 제작하는 것이 중요합니다.
기본 아이콘
- 16x16: 기본 파비콘 크기
- 32x32: 대부분의 브라우저에서 사용되는 표준 크기
- 48x48: 일부 구형 브라우저에서 사용
- 64x64: 고해상도 환경에서 더 선명하게 표시
애플 및 iOS 디바이스를 위한 아이콘
- 180x180: iPhone Retina 디스플레이
- 167x167: iPad Pro
- 152x152: iPad 터치 디스플레이
- 120x120: iPhone 비 Retina 디스플레이
안드로이드 및 Windows 타일 아이콘
- 192x192: 안드로이드 크롬 북마크 아이콘
- 144x144: 윈도우즈 타일 아이콘 및 마이크로소프트 엣지
웹 앱 및 고해상도 환경을 위한 아이콘
- 512x512: PWA (Progressive Web Apps) 및 고해상도 환경
- 256x256: 추가로 사용 가능한 고해상도 아이콘
HTML에 추가할 권장 코드
아래 코드를 HTML 문서의 <head> 태그 사이에 추가하세요.
<!-- 기본 파비콘 -->
<link rel="icon" href="/favicon.ico" sizes="any" type="image/x-icon">
<!-- 다양한 크기의 PNG 파비콘 -->
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png">
<link rel="icon" href="/favicon-64x64.png" sizes="64x64" type="image/png">
<!-- 애플 및 iOS 디바이스용 아이콘 -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/apple-touch-icon-167x167.png" sizes="167x167">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
<!-- 안드로이드 및 PWA -->
<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/favicon-512x512.png" sizes="512x512" type="image/png">필요한 경우 다음 코드를 추가할 수 있습니다.
<!-- Manifest 파일 -->
<link rel="manifest" href="/manifest.json">
<!-- Windows 타일 아이콘 -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon-144x144.png">Manifest 파일 작성 방법
PWA 및 브라우저에 최적화된 아이콘 설정을 위해 Manifest 파일을 아래와 같은 형식으로 만들 수 있습니다.
{
"name": "My Website",
"short_name": "Website",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "favicon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "favicon-64x64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
파비콘은 웹사이트의 사용자 경험(UX)과 신뢰성에 긍정적인 영향을 줍니다.
또한 브라우저 탭, 북마크, 검색 결과의 썸네일 아이콘 등에서 웹사이트를 쉽게 식별할 수 있도록 도와줍니다.
이로 인해 방문자 유지율과 사이트 신뢰도가 증가하고, 결과적으로 검색엔진최적화(SEO) 성과에도 도움이 될 수 있습니다.
다양한 도구를 활용해 쉽게 제작하고 설정할 수 있으니 웹사이트에 꼭 추가해보세요.
