퇴근길 지하철, 손님은 브라우저 탭을 스무 개쯤 열어둔 채 흔들린다. 어제 눈여겨본 그 가게를 다시 찾으려 탭을 훑는데, 대부분은 작은 아이콘으로 저마다 자기 얼굴을 내밀고 있다. 그 사이에서 우리 사이트만 아무 개성 없는 회색 지구본 하나로 앉아 있다면, 손님의 눈은 그 위를 그냥 스쳐 지나간다.
파비콘(favicon)은 브라우저 탭과 즐겨찾기, 검색 결과 옆에 뜨는 아주 작은 아이콘이다. 크기는 겨우 16픽셀 남짓이지만, 손님이 우리를 다시 찾을 때 가장 먼저 마주치는 얼굴이다. 작은 회사일수록 이 한 칸을 비워 두는 경우가 많은데, 그 빈칸은 '여기까지는 신경 쓰지 못한 회사'라는 인상을 조용히 남긴다.
1. 회색 지구본은 '여기까지 신경 못 썼다'는 신호다
파비콘이 없으면 브라우저는 기본 아이콘, 즉 밋밋한 문서나 지구본 모양을 대신 채워 넣는다. 손님은 그것을 '아직 덜 만들어진 사이트'로 읽는다. 반대로 또렷한 파비콘 하나는 탭이 여러 개 열려 있어도 우리를 즉시 알아보게 하고, 즐겨찾기 목록과 카카오톡 링크, 검색 결과에서까지 브랜드를 반복해 각인시킨다. 큰 비용이 드는 일이 아니라, 챙겼느냐 아니냐의 문제다.
2. 16픽셀 안에서 읽히는 것만 남겨라
가장 흔한 실수는 가로로 긴 로고를 통째로 줄여 파비콘에 밀어 넣는 것이다. 16픽셀로 축소되는 순간 글자는 뭉개지고, 회사 이름은 알아볼 수 없는 얼룩이 된다. 파비콘은 로고의 축소판이 아니라 상징 하나여야 한다.
- 심볼 하나: 로고에 도형·마크가 있다면 그 부분만 떼어 쓴다.
- 이니셜 한 글자: 마땅한 심볼이 없으면 상호의 첫 글자를 굵고 단순하게.
- 여백 확보: 아이콘이 가장자리에 꽉 차지 않게 안쪽 여백을 둔다.
3. 한 장이 아니라 한 세트로 준비하라
파비콘은 파일 하나로 끝나지 않는다. 기기와 상황마다 요구하는 크기가 다르기 때문이다. 최소한 이 세 가지는 갖춰야 한다.
- favicon.ico (16·32픽셀): PC 브라우저 탭과 즐겨찾기용 기본 파일.
- apple-touch-icon (180픽셀): 아이폰에서 '홈 화면에 추가'할 때 쓰인다. 이걸 빼먹으면 홈 화면에 흰 상자나 깨진 화면이 아이콘 대신 박힌다.
- 512픽셀 PNG: 안드로이드 홈 화면과 웹 앱(PWA) 아이콘용.
요즘은 확대해도 흐려지지 않는 SVG 파비콘을 함께 두는 것이 좋다.
4. 다크 모드 탭에서도 살아남게 하라
손님의 절반은 브라우저를 어두운 테마로 쓴다. 검은 글자만으로 만든 파비콘은 어두운 탭 배경에 파묻혀 아예 보이지 않는다. 배경을 투명하게 처리하고 밝은 배경과 어두운 배경 양쪽에서 모두 또렷한 색·대비를 골라야 한다. 여유가 된다면 SVG 파비콘에 다크 모드용 색을 따로 지정해, 테마에 따라 색이 바뀌도록 만들 수도 있다.
5. 만들고 끝이 아니라 눈으로 확인하라
파비콘은 브라우저가 강하게 캐시(임시 저장)해 두기 때문에, 새로 올려도 한동안 옛 아이콘이 그대로 뜨는 일이 잦다. 그래서 '올렸으니 됐다'가 아니라 직접 확인하는 절차가 반드시 따라야 한다.
- PC와 모바일에서 실제 탭·즐겨찾기에 제대로 뜨는지 본다.
- 아이폰에서 홈 화면에 추가해 흰 상자가 뜨지 않는지 확인한다.
- HTML의 <link rel="icon"> 경로가 실제 파일 위치와 맞는지 점검한다.
작은 칸 하나가 브랜드의 완성도를 말한다
파비콘은 사이트에서 가장 작은 요소지만, 손님이 우리를 다시 찾고 기억하는 통로다. 회색 지구본을 우리 얼굴로 바꾸는 이 작은 손질 하나가, 사이트 전체의 완성도와 신뢰를 조용히 끌어올린다. CYAN 에이전시는 홈페이지를 만들 때 로고와 브랜드 색에서 출발해 파비콘과 모바일 아이콘, 공유 미리보기까지 한 세트로 맞춰, 손님이 어느 화면에서 마주치든 같은 얼굴을 기억하도록 설계한다.
