2025년에 Favicon을 준비하는 법

(evilmartians.com)

favicon을 만드는 방식이 복잡해지면서, 단순히 브라우저 탭이나 터치스크린에 웹사이트 로고를 표시하기 위해 20개 이상의 PNG 파일을 사용하는 상황이 많음
이를 대체하기 위해, 상대적으로 적은 수의 아이콘 파일과 최소한의 설정으로 대부분의 환경을 커버할 수 있는 방법을 제안

매우 간단한 버전

복잡한 세팅 없이 핵심적인 다섯 가지 아이콘과 하나의 JSON 파일만 있으면 충분함

HTML에 넣을 기본 링크 예시임

<link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

PWA(Progressive Web App)를 지원한다면 다음도 추가함
```
<link rel="manifest" href="/manifest.webmanifest">  
```

예시 manifest.webmanifest 파일 구조임

{  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

maskable 아이콘은 가장자리 일부가 잘릴 수 있으므로, 409×409 원형 영역을 안전 지대로 두는 것이 좋음
이렇게만 구성해도 주요 브라우저와 기기 대부분에서 favicon이 잘 동작함

상세 설명 버전

favicon은 “favorite icon”에서 유래한 것으로, 브라우저 탭 등에 표시되는 작은 아이콘임
사파리 역시 최근에는 favicon을 제대로 지원함
여러 해상도별 아이콘 세트를 만드는 대신, SVG, 몇 개의 PNG 아이콘, 그리고 간단한 manifest를 활용해 효율적으로 처리 가능함

궁극의 Favicon 구성

SVG 파일 하나와 최소한의 PNG 파일 몇 장, 그리고 web manifest 파일을 통해 다양한 브라우저와 기기에서 아이콘을 통일성 있게 표시할 수 있음
SVG는 벡터 포맷이라 필요에 따라 자유롭게 확대·축소가 가능하며, 배경 다운로드로 성능 부담도 적음
PNG는 애플용(apple-touch-icon)과 PWA용 아이콘 등 꼭 필요한 크기만 준비함
윈도우 타일 아이콘, Safari Pinned Icon, rel=“shortcut” 등 과거 포맷들은 최근 브라우저에서는 크게 필요 없게 되었음
오래된 브라우저나 툴에서는 /favicon.ico 경로로 직접 아이콘을 가져오는 경우가 있으므로, 루트 경로의 favicon.ico는 여전히 중요함

Ultimate Favicon Set 만드는 방법

아래 단계는 아이콘을 직접 만들고 최적화하는 과정임
1단계: SVG 준비
- 정사각형 비율을 유지한 icon.svg 파일 준비가 필요함
- <svg> 내부에 CSS 미디어 쿼리를 통해 라이트·다크 모드에 대응하는 색상 전환을 구현 가능함
- 예시처럼 @media (prefers-color-scheme: dark)를 활용해 다크 모드 색상을 지정할 수 있음
2단계: ICO 파일 만들기
- 16×16 또는 32×32 크기로 icon.svg를 래스터 이미지로 변환해 favicon.ico 생성함
- GIMP나 Inkscape+ImageMagick 같은 툴 사용 가능함
- 작은 해상도에서 로고가 너무 뭉개지지 않도록 주의함
3단계: PNG 이미지 만들기
- 512×512, 192×192, 180×180, 512×512(maskable) 크기로 PNG 아이콘을 준비함
- iOS용 apple-touch-icon은 180×180으로 작업하고, 배경색을 넣거나 적절한 여백을 두면 좋음
- maskable 아이콘은 409×409 영역을 안전 지대로 두어야 함
4단계: PNG와 SVG 최적화
- SVG는 SVGO 등을 활용해 압축하고, PNG는 Squoosh로 압축률을 높임
- 사용자가 데이터 제한 환경에 있을 수 있으므로, 파일 용량 최소화는 유리함
5단계: HTML에 아이콘 연결
- 기본적으로 favicon.ico, icon.svg, apple-touch-icon.png를 <head> 태그에 연결함
```
<link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png">  
```
- Webpack 등을 사용한다면, 빌드 시에 해시를 포함해 캐시를 관리할 수도 있음
- 스테이징(개발) 환경과 프로덕션 환경을 구분하기 위해 다른 favicon을 쓸 수도 있음
6단계: Web Manifest 만들기
- manifest.webmanifest 파일에 PWA용 아이콘 정보를 넣고, <link rel="manifest" href="/manifest.webmanifest">로 연결함
- 아래 예시는 192×192, 512×512(maskable), 512×512 아이콘을 지정함
```
{  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}  
```
- Webpack 환경에서는 webpack-pwa-manifest 같은 플러그인을 활용해 자동화할 수 있음
위와 같은 과정을 거치면 적은 수의 파일로도 대부분의 브라우저와 기기에서 적절한 favicon이 표시됨
자동화 툴을 만들어 운영하면 더 편리