Favicon은 여러 곳에서 동시에 제대로 작동해야 한다: 브라우저 탭, 북마크, iOS 홈 화면, 그리고 Android에 설치된 웹 앱의 아이콘까지 — 각각 요구하는 크기와 형식이 다르다.
한글 한 글자가 favicon으로 쓰이기 까다로운 이유
영문 브랜드는 흔히 알파벳 한 글자를 색 배경 위에 올려 간단한 로고로 쓴다. 그런데 한글은 자음과 모음이 하나의 음절 블록으로 조합되는 독특한 구조라서, 획이 많은 글자(예: "쐐", "뷁")는 16×16 픽셀에서 자음과 모음의 경계가 뭉개지기 쉽다. 반면 받침 없이 자음+모음만으로 구성된 단순한 글자(예: "나", "모")는 작은 크기에서도 형태가 비교적 또렷하게 남는다.
<head> 안의 <link> 태그 역할
각 아이콘 형식은 크기를 나타내는 sizes 속성과 함께 각자의 <link rel="icon"> 또는 <link rel="apple-touch-icon"> 태그로 연결되어, 브라우저가 표시 상황에 가장 적합한 옵션을 세트 중에서 선택하게 한다.
PWA를 위한 Web App Manifest
프로그레시브 웹 앱은 아이콘 목록, 사이트 이름, 테마 색상을 JSON 형식으로 담은 site.webmanifest 파일이 필요하다 — 사이트가 독립 앱으로 설치될 때 Android는 정확히 이곳에서 아이콘을 가져온다.
왜 필요한가
- 하나의 원본 이미지에서 필요한 크기의 아이콘 세트를 전부 생성한다.
- <head>에 붙여넣을 준비가 된 <link> 태그 HTML 코드를 얻는다.
- 모바일 기기의 홈 화면에 추가했을 때 사이트가 제대로 표시되는지 확인한다.