파비콘이 무엇이고, 어떻게 만들고, 어떻게 반영했는가

사이트를 만들다 보면 생각보다 뒤늦게 챙기게 되는 것이 있다.
바로 브라우저 탭에 보이는 작은 아이콘, 파비콘(favicon)이다.

처음에는 아주 사소한 요소처럼 보이지만, 실제로는 사이트의 첫인상을 꽤 많이 바꾼다.
탭이 여러 개 열려 있을 때도 금방 눈에 들어오고, 북마크나 모바일 홈 화면에 추가했을 때도 사이트를 식별하는 작은 표정 같은 역할을 한다.

이번 글은 muabow.com에 파비콘을 붙이면서 정리한 기록이다.
파비콘이 무엇인지, 왜 필요한지, 어떤 식으로 만들었는지, 그리고 실제 사이트에는 어떻게 반영했는지를 한 번에 남겨두려 한다.

파비콘은 무엇인가

파비콘은 브라우저 탭, 북마크, 즐겨찾기, 주소창 주변, 모바일 홈 화면 같은 곳에 표시되는 작은 아이콘이다.

보통 크기는 아주 작다.

16x16
32x32
180x180 같은 모바일용 아이콘

이처럼 작은 요소인데도 중요한 이유는 단순하다.

사이트를 빠르게 구분할 수 있다.
브랜드나 별칭의 인상을 남길 수 있다.
아무 아이콘도 없을 때보다 사이트가 훨씬 완성되어 보인다.

특히 개인 사이트는 로고보다 먼저 파비콘이 기억에 남는 경우도 많다.

이번 사이트에서는 어떤 방향으로 잡았는가

도메인은 muabow.com이기 때문에, 가장 단순한 출발점은 M 하나였다.

너무 복잡한 심볼을 넣으면 작은 크기에서 금방 뭉개진다.
그래서 이번에는 아래 기준으로 방향을 정했다.

한눈에 보이는 단순한 형태
작은 크기에서도 무너지지 않는 굵기
사이트 분위기와 어울리는 부드러운 색감
너무 딱딱하거나 회사 로고처럼 보이지 않는 톤

결과적으로는 M 모노그램 하나를 중심으로, 배경에는 파스텔톤의 대각선 그라데이션을 넣었다.

실제로 만든 SVG 구조

현재 파비콘 원본은 SVG 파일이다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="muabow favicon">
  <defs>
    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0%" stop-color="#b7efe2"/>
      <stop offset="52%" stop-color="#d7f6ef"/>
      <stop offset="100%" stop-color="#c8dffc"/>
    </linearGradient>
  </defs>
  <rect width="64" height="64" rx="14" fill="url(#bg)"/>
  <path
    d="M14 46V18h8.5l9.5 14.6L41.5 18H50v28h-8V31.4l-8.3 12.2h-3.4L22 31.4V46Z"
    fill="#24555a"
  />
</svg>

구성은 아주 단순하다.

64x64 기준의 정사각형 캔버스
둥근 모서리를 가진 배경 사각형
좌상단에서 우하단으로 흐르는 대각선 그라데이션
짙은 청록색의 M 글자 모양 패스

이렇게 단순하게 만든 이유는, 파비콘은 작을수록 디테일보다 실루엣이 중요하기 때문이다.

왜 SVG로 먼저 만들었는가

이번에는 SVG를 원본으로 잡았다.

그 이유는 꽤 분명하다.

해상도에 덜 민감하다.
수정이 빠르다.
색상이나 형태를 텍스트처럼 관리할 수 있다.
작은 아이콘을 만들 때 구조를 파악하기 쉽다.

예를 들어 배경색을 바꾸거나, M 굵기를 다듬거나, 그라데이션 방향을 바꾸는 일이 모두 비교적 가볍다.

PNG 하나만 들고 시작했으면 이런 조정이 훨씬 번거로웠을 것이다.

PNG와 Apple Touch Icon은 왜 따로 만들었는가

브라우저마다 파비콘 처리 방식이 조금씩 다르다.
그리고 모바일에서는 홈 화면 아이콘을 따로 보는 경우도 많다.

그래서 이번에는 아래 파일을 함께 두었다.

assets/favicon.svg
assets/favicon-32.png
assets/apple-touch-icon.png

즉 원본은 SVG로 두고, 호환성을 위해 PNG도 같이 준비한 셈이다.

모바일 환경을 생각하면 이 구성이 마음이 편하다.

PNG는 어떻게 만들었는가

macOS에 기본 포함된 sips를 이용해 SVG를 PNG로 변환했다.

예를 들면 이런 식이다.

sips -s format png assets/favicon.svg --out assets/favicon-32.png
sips -z 180 180 assets/favicon-32.png --out assets/apple-touch-icon.png

실제로는 결과를 보면서 크기와 선명도를 다시 확인했다.
아이콘은 작게 보일수록 가장자리와 대비가 더 중요해지기 때문이다.

HTML에는 어떻게 반영했는가

사이트 공통 레이아웃에 아래 링크를 넣어두었다.

<link rel="icon" href="{{faviconHref}}" type="image/svg+xml">
<link rel="icon" href="{{faviconPngHref}}" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="{{appleTouchIconHref}}">

여기서 중요한 포인트는 세 가지다.

기본 파비콘은 SVG
호환성용으로 32x32 PNG도 함께 제공
모바일 홈 화면용 apple-touch-icon 추가

이렇게 해두면 데스크톱 브라우저와 모바일 환경을 비교적 고르게 커버할 수 있다.

캐시 때문에 바로 안 바뀌는 문제도 있었다

파비콘은 CSS보다도 더 끈질기게 캐시되는 편이다.

실제로 이번에도 색감을 바꿨는데, 새로고침만으로는 예전 아이콘이 계속 보이는 문제가 있었다.
그래서 빌드할 때 파일 수정 시각을 버전값으로 붙여서 URL을 분리했다.

결과적으로는 이런 식의 주소가 들어간다.

/assets/favicon.svg?v=1778682566337
/assets/favicon-32.png?v=1778682566337
/assets/apple-touch-icon.png?v=1778682566337

이 방식의 장점은 단순하다.
파일이 바뀌면 주소도 달라지기 때문에, 브라우저와 Cloudflare가 새 파일로 인식하기 쉽다.

실제 사이트에서는 어떻게 보이는가

현재 파비콘은 아래 인상으로 보인다.

부드러운 민트와 하늘빛 사이의 파스텔 배경
좌상단에서 우하단으로 흐르는 대각선 그라데이션
가운데 놓인 짙은 청록색 M

현재 사이트에 적용한 파비콘 미리보기

탭에서 보면 과하게 튀지 않지만, 여러 사이트 사이에 놓였을 때는 충분히 구분된다.
무겁거나 기술 문서 같은 분위기보다는, 조금 더 부드럽고 개인적인 기록 공간의 느낌에 가깝다.

작게 보이는 아이콘일수록 더 단순해야 한다

파비콘을 만들면서 다시 느낀 건, 작은 아이콘일수록 많은 것을 넣는 것이 오히려 손해라는 점이다.

텍스트를 길게 넣거나, 선이 너무 많거나, 색이 너무 복잡하면 작은 크기에서 거의 다 무너진다.
결국 남는 것은 실루엣과 대비, 그리고 색의 첫인상뿐이다.

그래서 개인 사이트의 파비콘이라면 오히려 이렇게 시작하는 편이 낫다.

한 글자
단순한 기호
두세 가지 색
분명한 대비

이번 M 파비콘도 그런 기준에서 나온 결과다.

정리

이번 파비콘 작업은 거대한 기능 추가는 아니었다.
하지만 사이트 전체 인상을 다듬는 데에는 생각보다 효과가 컸다.

정리하면 이렇다.

M 모노그램을 중심으로 방향을 정했다.
파스텔톤 대각선 그라데이션 배경을 가진 SVG를 만들었다.
PNG와 Apple Touch Icon을 추가로 생성했다.
공통 레이아웃에 파비콘 링크를 넣었다.
캐시 문제를 줄이기 위해 버전 쿼리를 붙였다.

아주 작은 요소지만, 사이트를 자기 것으로 느끼게 만드는 데는 이런 디테일이 꽤 크게 작용한다.
파비콘은 브라우저 탭 구석에 있는 점 하나가 아니라, 사이트의 가장 작은 간판에 가깝다.