쓰레기처럼 보이지 않는 Favicon 만들기

지금 브라우저 탭을 열어봐. favicon만 보고 몇 개를 식별할 수 있어?

아마 대부분. 그 16x16 픽셀 사각형이 브랜드 인식에 진지한 일을 하고 있어. 구글의 다채로운 G. 트위터의 새. GitHub의 옥토캣. 즉시 알아.

그다음엔 기본 빈 페이지 아이콘이 있는 네 사이트. 또는 더 나쁘게, 500픽셀에선 멋져 보였지만 16픽셀에선 알아볼 수 없는 얼룩이 된 로고.

Favicon이 무시되는 이유

대부분은 로고 디자인하고, 사이트 만들고, 마지막 순간에 favicon을 기억해. "그냥 로고 축소"가 합리적으로 보여. 거의 작동하지 않아.

16x16 픽셀의 디테일한 로고는 진흙이 돼. 텍스트는 읽을 수 없어. 가느다란 선은 사라져. 색상이 섞여.

좋은 favicon은 큰 것에서 적응시킨 게 아니라 작은 크기로 디자인돼.

작은 크기에서 작동하는 것

간단한 형태. 하나의 문자. 기본 기하학적 형태. 2초 안에 인식 가능한 것.

높은 대비. 어두운 배경에 밝게 또는 밝은 배경에 어둡게. 미묘한 그라데이션은 작은 크기에서 사라져.

굵은 선. 얇은 획은 사라져. 두껍고 명확한 형태가 축소에서 살아남아.

제한된 색상. 최대 둘이나 셋. 복잡한 팔레트는 소음이 돼.

실제로 필요한 크기들

브라우저, 운영체제, 기기가 모두 다른 크기를 요청해:

• 16x16 - 브라우저 탭 (중요한 것)
• 32x32 - 작업표시줄, 바로가기
• 48x48 - Windows 데스크톱
• 180x180 - Apple 터치 아이콘
• 192x192 - Android Chrome
• 512x512 - PWA 스플래시 화면

각 크기를 수동으로 만들 수도 있어. 아니면 하나의 소스 이미지에서 전부 출력하는 생성기를 써.

흔한 실수

전체 로고 사용. 16픽셀에 텍스트로 "RunToolz"? 읽을 수 없어. 아이콘 부분을 쓰거나 단순화된 버전을 만들어.

다크 모드 잊기. 어두운 브라우저 테마에서 검은 아이콘은 사라져. 미묘한 테두리를 추가하거나 밝은 버전을 만드는 걸 고려해.

배경 무시. 어떤 맥락에선 favicon을 흰색에 표시하고, 다른 건 어두운 색에, 또 다른 건 네가 선택한 색에. 셋 다 테스트해.

저해상도 소스. 최소 512x512로 시작해. 축소는 작동해. 확대는 흐림을 만들어.

빠른 프로세스

1. 로고나 브랜드 마크로 시작
2. 가장 인식 가능한 요소로 단순화
3. 먼저 16x16에서 작동하게 만들어
4. 거기서 확대, 도움이 되는 곳에만 디테일 추가
5. 실제 브라우저 탭에서 테스트, 디자인 도구만이 아니라

---

Favicon은 세련된 사이트와 아마추어 사이트를 구분하는 작은 디테일 중 하나야. 잘 하는 데 10분 걸려. 누가 탭을 흘끗 볼 때마다 차이를 만들어.