고객이 탭을 열댓 개 띄워놓고 견적을 비교하는 동안, 옆 가게 탭에는 또렷한 로고가 박혀 있는데 우리 탭에만 회색 지구본이 떠 있다면 어떨까요. 다시 찾아오려던 고객은 우리 탭을 못 찾고 옆 가게 탭을 누릅니다. 파비콘은 고작 16픽셀이지만 브라우저 탭, 즐겨찾기, 모바일 홈 화면, 심지어 구글 검색 결과에까지 노출되는 가장 작은 간판입니다. 실무에서 챙기는 다섯 가지 원칙을 정리했습니다.
1. 로고 전체를 욱여넣지 않는다
가로로 긴 워드마크 로고를 그대로 줄이면 탭에서는 읽을 수 없는 얼룩이 됩니다. 파비콘에는 심볼 하나, 글자 하나만 남기세요. 브랜드 색 배경에 이니셜 한 글자만 올려도 탭에서의 식별력은 로고 전체보다 훨씬 좋습니다.
2. SVG 파비콘 하나로 모든 해상도를 덮는다
예전에는 16, 32, 48픽셀짜리 PNG를 따로 만들었지만, 지금은 주요 브라우저가 모두 SVG 파비콘을 지원합니다. 벡터라 어떤 배율에서도 선명하고 파일 하나면 끝납니다. 구형 환경을 위한 favicon.ico 한 장만 루트에 함께 두면 사실상 모든 경우가 정리됩니다.
3. 다크 모드 탭에서 사라지지 않는지 확인한다
어두운 배경의 브라우저에서 검은색 심볼은 그대로 증발합니다. SVG 파비콘 안에는 CSS 미디어 쿼리를 넣을 수 있어서, 다크 모드일 때만 밝은 색으로 바뀌는 파비콘을 파일 하나로 만들 수 있습니다. 최소한 투명 배경에 한 가지 색만 쓰는 심볼이라면 라이트·다크 양쪽에서 한 번씩은 꼭 확인하세요.
4. 홈 화면에 추가될 때의 얼굴은 따로 있다
아이폰에서 '홈 화면에 추가'를 누르면 브라우저는 파비콘이 아니라 apple-touch-icon을 찾습니다. 이게 없으면 사이트 화면을 대충 캡처한 못난 아이콘이 깔립니다. 180×180 픽셀 PNG 한 장이면 충분하고, 모서리 둥글리기는 기기가 알아서 하니 정사각형 그대로 만들면 됩니다.
5. 파비콘은 검색 결과의 첫인상이기도 하다
구글과 네이버 모두 모바일 검색 결과에서 사이트 이름 옆에 파비콘을 보여줍니다. 파비콘이 없으면 그 자리에 기본 지구본 아이콘이 뜨고, 목록에서 우리만 '준비 안 된 회사'처럼 보입니다. 한 가지 주의할 점은 파비콘은 브라우저 캐시가 유난히 오래 간다는 것. 교체했는데 안 바뀐다면 파일 주소에 버전을 붙여 새 파일로 인식시키는 게 가장 확실합니다.
16픽셀에도 설계가 필요하다
파비콘은 사이트를 다 만들고 나서 마지막에 급하게 끼워 넣는 경우가 많지만, 고객이 하루에도 수십 번 마주치는 접점입니다. CYAN은 사이트를 제작할 때 파비콘과 홈 화면 아이콘, 검색 결과 노출까지 한 벌로 묶어 설계합니다. 우리 회사 탭이 스무 개 사이에서 바로 눈에 띄는지, 오늘 한번 확인해 보세요.