웹앱 개발을 위한 모든 종류의 파비콘과 메타태그 정리
익스랩 최고 관리자
·2023. 4. 25. 12:02
안드로이드와 아이폰을 모두 지원하고자 한다면, 다양한 크기와 형식의 파비콘과 메타 태그를 사용해야 합니다. 아래는 웹사이트에서 사용되는 파비콘, 애플 터치 아이콘 및 안드로이드 앱 아이콘을 완벽하게 지원하기 위한 주요 이미지 종류와 사이즈입니다.
1. 파비콘:
- 16x16 픽셀: favicon.ico
- 32x32 픽셀: favicon.ico
- 48x48 픽셀: favicon.ico
2. 애플 터치 아이콘 (iOS 기기용):
- 120x120 픽셀: apple-touch-icon-120x120.png (iPhone Retina)
- 152x152 픽셀: apple-touch-icon-152x152.png (iPad Retina)
- 180x180 픽셀: apple-touch-icon-180x180.png (iPhone 6 Plus, iPhone 7 Plus, iPhone 8 Plus, iPhone X, iPhone XS, iPhone 11 Pro 등)
3. 안드로이드 웹 앱 매니페스트 아이콘 (Android 기기용):
- 192x192 픽셀: android-chrome-192x192.png
- 512x512 픽셀: android-chrome-512x512.png
위 이미지들을 생성한 후, 웹사이트의 `<head>` 태그 안에 해당 메타 태그를 추가해야 합니다.
파비콘용 메타 태그:
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/path/to/favicon-48x48.png">
애플 터치 아이콘용 메타 태그:
<link rel="apple-touch-icon" sizes="120x120" href="/path/to/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon-180x180.png">
안드로이드 웹 앱 매니페스트용 메타 태그:
<link rel="manifest" href="/path/to/site.webmanifest">
웹 매니페스트 파일 (site.webmanifest)에는 아래와 같은 내용을 포함해야 합니다:
{
"name": "앱 이름",
"short_name": "짧은 앱 이름",
"description": "앱 설명",
"start_url": "시작 URL",
"display": "standalone",
"background_color": "#배경색",
"theme_color": "#테마색",
"icons": [
{
"src": "/path/to/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/path/to/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
위의 예시를 참고하여 각 이미지에 해당하는 경로와 속성을 지정하고, 웹사이트의 `<head>` 태그 안에 메타 태그를 추가하면, 다양한 기기에서 파비콘 및 앱 아이콘이 올바르게 표시됩니다.
이렇게 설정하면 대부분의 기기와 브라우저에서 파비콘 및 앱 아이콘이 제대로 표시됩니다. 그러나 사용자가 특정 브라우저나 기기를 사용할 경우 추가 설정이 필요할 수도 있으니, 테스트를 통해 확인해 보는 것이 좋습니다.
