프로그레시브 웹 앱 (PWA) 을 배포했는데, 아이폰 홈 화면에 로고가 번져서 흐릿하게 보이는 경험을 해보셨나요? 그렇다면 아마도 favicon 설정이 불완전할 가능성이 큽니다. 많은 개발자가 브라우저 탭 아이콘과 모바일 앱 아이콘을 동일한 에셋으로 취급하는 실수를 저지르곤 합니다. 2026 년 현재, favicon 과 app icon 의 차이를 이해하는 것은 단순히 디자인의 문제가 아닙니다. 올바른 컨텍스트에 맞는 파일을 제공하는 기술적 필수 조건입니다.
대부분의 개발자는 단일 SVG 파일이면 모든 문제가 해결된다고 생각합니다. 하지만 그렇지 않습니다. 브라우저는 16x16 픽셀 그리드에서 엄격한 안티앨리어싱 규칙을 적용하며 아이콘을 렌더링하는 반면, 모바일 운영체제는 아이콘을 180x180 또는 512x512 픽셀로 확장하고 모서리를 잘라내는 마스크를 적용합니다. 이 두 가지를 구분하지 않으면 모바일 기기에서 브랜드 이미지가 비전문적으로 보일 수밖에 없습니다.
기술적 차이의 핵심
근본적인 차이는 아이콘이 어디에 위치하며 사용자가 어떻게 상호작용하는지에 있습니다. Favicon 은 브라우저 환경 (탭, 북마크, 히스토리) 에만 국한된 개념입니다. 반면 앱 아이콘은 운영체제 인터페이스 (홈 화면, 앱drawer, 알림) 를 위한 것입니다.
컨텍스트와 사용자 의도
사용자가 favicon 을 볼 때는 브라우저 내에서 네비게이션을 하고 있습니다. 수십 개의 탭 사이에서 자신의 탭을 찾고 있는 상황입니다. 따라서 16x16 픽셀 크기에서도 식별 가능해야 합니다. 이때 대비 (Contrast) 가 가장 중요합니다. 로고에 가는 선이 있다면 사라져버릴 것입니다.
반면, 앱 아이콘은 독립적인 애플리케이션을 나타냅니다. 사용자는 이를 터치하여 전체 화면 경험을 시작합니다. 디자인은 favicon 크기보다 10 배 큰 규모에서도 견딜 수 있어야 합니다. 이때는 세부적인 그라데이션이나 은은한 그림자가 효과적일 수 있지만, 이를 브라우저 탭 크기로 축소하면 실패하는 경우가 많습니다.
파일 포맷과 전달 방식
Favicon 은 HTML head 의 rel="icon" 링크 태그에 크게 의존합니다. 명시하지 않더라도 브라우저가 자동으로 요청하여 기본 /favicon.ico 파일을 찾기도 합니다. 반면 앱 아이콘은 PWA 의 manifest.json 파일이나 iOS 의 특정 메타 태그를 통해 정의됩니다.
안드로이드와 최신 PWA 의 경우, 앱 아이콘은 마스크 가능 (maskable) 아이콘을 지원해야 합니다. 이는 운영체제가 원형, 사각형 모서리 둥근 형태 등을 적용해도 핵심 디자인 요소가 잘리지 않도록 중앙에 안전 구역 (safe zone) 을 확보해야 함을 의미합니다. Favicon 은 브라우저 UI 에 따라 사각형이나 원형으로 표시되므로 이런 요구사항이 거의 없습니다.
비교: Favicon vs. App Icon
구체적인 수치를 살펴보겠습니다. 아래 표는 2026 년 현재 각 시나리오에 필요한 사항을 정리한 것입니다.
| 기준 | Favicon | App Icon |
|---|---|---|
| 주요 위치 | 브라우저 탭, 북마크 | 홈 화면, 앱drawer |
| 일반적 크기 | 16x16, 32x32, 48x48 | 192x192, 512x512 |
| 포맷 | ICO, PNG, SVG | PNG (Maskable), SVG |
| HTML/설정 | <link rel="icon"> | manifest.json |
| 디자인 중점 | 높은 대비, 단순한 형태 | 확장성, 마스크를 위한 안전 구역 |
| 배경 | 투명 (일반적) | 단색 또는 그라데이션 (종종) |
실전 사례: 토스 (Toss) 와 네이버 (Naver) 의 접근법
국내 대표 서비스인 토스 (Toss) 를 보겠습니다. 브랜드 아이덴티티는 복잡하지만, 그들의 favicon 은 단순하고 굵은 'T'자나 최소한의 패턴으로 구성됩니다. 16 픽셀 폭에서도 완벽하게 작동합니다. 반면 아이폰의 앱 아이콘을 보면 생동감 있는 풀컬러 그라데이션이 사각형 전체를 채우고 있습니다. 두 경우 서로 다른 이미지 파일을 사용하고 있습니다.
만약 앱 아이콘을 favicon 으로 사용한다면, 브라우저 탭에서 그라데이션이 번져 회색 덩어리로 보일 것입니다. 반대로 favicon 을 앱 아이콘으로 사용하면 6 인치 화면에서 너무 작고 초라해 보일 것입니다. 에셋을 분리하는 것은 세련된 인상을 주기 위해 필수적입니다.
왜 하나의 크기로는 부족할까?
512x512 PNG 를 favicon 으로 사용하는 것은 기술적으로 가능하지만 비효율적입니다. 불필요하게 HTTP 페이로드를 증가시킵니다. 브라우저가 크기를 축소하더라도, 브라우저의 축소 알고리즘은 미리 최적화된 32x32 버전보다 품질이 떨어지는 경우가 많습니다.
마찬가지로 16x16 ICO 를 앱 아이콘으로 사용하면 고해상도 Retina 디스플레이에서 픽셀이 깨진 모습이 됩니다. 운영체제는 현대적인 화면에서 날카로운 가장자리를 렌더링하기 위해 벡터 데이터나 고해상도 비트맵을 기대합니다.
각 옵션을 언제 사용해야 할까
두 가지 모두 필요합니다. 2026 년 현재 전문적인 웹 프레젠테이션을 원한다면 하나를 생략할 수 있는 시나리오는 없습니다.
- Favicon 사용: 브라우저 탭, 북마크, 히스토리 목록, 네이버/구글 검색 결과. 단순성과 대비에 집중하세요.
- App Icon 사용: 프로그레시브 웹 앱 (PWA), iOS 홈 화면, 안드로이드 런처. 확장성과 마스크 가능한 영역에 집중하세요.
PWA 를 구축 중이라면 manifest.json 내에 icons 배열을 반드시 정의해야 합니다. 여기서 192x192 및 512x512 PNG 를 지정합니다. 브라우저가 favicon 에서 이를 추측하도록 맡겨두지 마세요.
{
"name": "My App",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}우리의 추천
단일 파일로 게으름을 피우려 하지 마세요. favicon 과 app icon 의 차이는 현실이며, 이를 무시하면 브랜드 인식이 떨어집니다. 브라우저 탭을 위한 전용 32x32 또는 48x48 SVG/PNG 를 만드세요. 그다음 매니페스트를 위한 투명한 배경의 512x512 PNG 를 별도로 생성하세요.
원본 로고에서 이러한 특정 크기를 생성하려면 Mzu favicondl 같은 도구를 활용하세요. 하나의 이미지를 단순히 리사이즈하고 운을 떠보지 마세요. 두 가지 명확한 에셋을 유지하는 노력은 모든 기기에서 선명하고 전문적인 사용자 경험으로 이어집니다.
필요한 구체적인 크기에 대한 자세한 내용은 Favicon Sizes Guide를 확인하세요. 매니페스트 설정에 어려움을 겪고 있다면, Web App Manifest Guide에서 JSON 설정에 대해 깊이 있게 다루고 있습니다.