프로그래밍/HTML

2025년 파비콘(Favicon ) 사용하는 방법: 세 가지 파일 알아보기

재우니 2025. 2. 17. 23:54

 

 

아래는 Evil Martians 블로그의 “How to Favicon in 2021: Six Files That Fit Most Needs” (2025년 업데이트 버전) 글을 기반으로 이 글은 파비콘(favicon)의 필요성과 최신 웹 브라우저 환경에 맞춘 최소 구성 세트를 어떻게 구현할 수 있는지 단계별로 설명하고 있습니다.

최신 웹 환경에서의 파비콘 구성 가이드

1. 파비콘의 중요성 및 역사

파비콘은 웹사이트 탭이나 즐겨찾기, 모바일 홈스크린 등에서 사이트를 대표하는 작은 아이콘입니다.

  • 사용자 인식: 사용자들이 사이트를 빠르게 식별할 수 있게 도와주며, 신뢰도 및 브랜드 인지도를 높입니다.
  • 역사와 발전: 2000년대 초 등장한 이후, 다양한 기기와 브라우저가 등장하면서 필요한 아이콘 파일의 종류와 크기가 점점 늘어났습니다.
  • 현재 트렌드: 최신 웹 표준과 성능 최적화를 고려해 불필요한 이미지 파일을 줄이고, SVG와 같은 벡터 이미지 및 최소 PNG 세트를 활용하는 방법이 주목받고 있습니다.

2. 최소 파비콘 구성 세트의 핵심 개념

기존에는 20개 이상의 PNG 파일만 있어도 사이트 아이콘을 제대로 표시하기 위해 필요했지만, 최신 트렌드는 최소한의 파일 세트로 대부분의 요구를 충족시키는 방향으로 나아가고 있습니다.

2.1. 기본 구성 요소

최소 세트는 다음의 요소들로 구성됩니다.

  • favicon.ico: 레거시 브라우저 호환을 위한 단일 32×32 픽셀의 ICO 파일.
    • ICO 파일은 여러 해상도를 포함할 수 있으나, 대부분의 경우 32×32 크기로 충분합니다.
  • SVG 아이콘: 벡터 이미지로, 해상도에 구애받지 않으며 다크모드 등 다양한 스타일 적용이 가능합니다.
    • CSS의 미디어 쿼리를 이용해 다크/라이트 테마에 맞게 색상을 전환할 수 있습니다.
  • 애플 터치 아이콘: Apple 기기에서 홈스크린 추가 시 사용되는 180×180 PNG 파일.
  • 웹 앱 매니페스트: Progressive Web App(PWA)을 위한 JSON 파일로, 192×192와 512×512 크기의 PNG 아이콘을 포함합니다.

2.2. 최소 구성의 장점

  • 성능 최적화: 브라우저는 파비콘을 백그라운드에서 다운로드하므로, 큰 이미지 파일이더라도 페이지 로딩에 큰 영향을 주지 않습니다.
  • 유지보수 간소화: 필요한 파일 수를 줄여 관리 부담을 덜고, 업데이트 시에도 간단하게 대응할 수 있습니다.
  • 현대 브라우저 지원: 최신 브라우저는 SVG 및 JSON 기반 매니페스트를 완벽하게 지원하여, 최소 세트만으로도 다양한 환경에 대응할 수 있습니다.

3. 단계별 파비콘 구성 방법

3.1. SVG 준비 및 수정

  1. 정사각형 SVG 파일 준비:
    • 파일의 너비와 높이가 동일한지 확인하고, Inkscape와 같은 툴로 문서 속성을 조정합니다.
  2. 다크 모드 지원:
    • SVG 파일 내 <style> 태그와 미디어 쿼리를 이용해 다크 테마에 맞게 색상 전환 코드를 추가합니다.

3.2. ICO 파일 생성

  1. SVG를 32×32 픽셀로 변환:
    • GIMP 또는 ImageMagick을 활용하여 SVG 파일을 32×32 크기로 변환한 후, ICO 파일로 저장합니다.
  2. 16×16 버전 고려:
    • 작은 해상도에서 아이콘이 선명하게 보이지 않는 경우, 별도의 16×16 버전을 생성하여 ICO 파일에 포함시킵니다.
inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./favicon.ico
rm ./tmp.png

3.3. PNG 이미지 제작

  1. 512×512 PNG 파일:
    • 고해상도 아이콘으로, 필요에 따라 Inkscape 또는 다른 편집 툴을 사용해 생성합니다.
  2. 192×192 PNG 파일:
    • PWA용으로 사용됩니다.
  3. 애플 터치 아이콘(180×180):
    • 아이콘 크기를 140×140으로 조정한 후 캔버스를 180×180으로 확장하여 생성합니다.
  4. 마스크블 아이콘(512×512):
    • 409×409의 안전 영역을 고려해 디자인한 후 생성하며, maskable.app 등으로 테스트합니다.

3.4. 파일 최적화

  • SVG 최적화:
    • SVGO를 사용해 다중 패스를 거쳐 불필요한 데이터를 제거합니다.
  • PNG 최적화:
    • Squoosh 같은 웹 앱을 활용해 PNG 파일의 용량을 줄이면서 화질을 유지합니다.
npx svgo --multipass icon.svg

3.5. HTML에 파비콘 링크 추가

  • HTML <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">
<link rel="manifest" href="/manifest.webmanifest">

3.6. 웹 앱 매니페스트 생성

  • PWA 지원을 위한 매니페스트 파일(manifest.webmanifest)을 생성하고, 아이콘 정보를 포함시킵니다.
{
  "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" }
  ]
}

4. 추가 팁 및 고려사항

  • 불필요한 포맷 제거:
    • 과거 Windows Tile Icon, Safari Pinned Icon, rel="shortcut icon" 등은 현재 대부분 필요하지 않으므로, 최신 표준에 집중하는 것이 좋습니다.
  • 스테이징 환경 아이콘:
    • 개발/스테이징 환경과 운영 환경을 구분하기 위해, 스테이징용 별도 아이콘(예: 색상 반전)을 사용하는 것도 유용합니다.
  • 자동화 도구 활용:
    • 반복적인 아이콘 생성 및 최적화 과정을 자동화하기 위해 Webpack, copy-webpack-plugin, webpack-pwa-manifest 등의 도구를 적극 활용할 수 있습니다.

결론

최소한의 파일 세트를 이용한 파비콘 구성은 단순함과 효율성을 동시에 추구합니다.

  • 최신 브라우저 지원: SVG, JSON 매니페스트 등 최신 웹 표준을 활용해 다양한 기기와 브라우저 환경에 대응합니다.
  • 유지보수 효율성: 파일 수를 최소화하여 관리 부담을 줄이고, 필요 시 쉽게 업데이트할 수 있습니다.
  • 퍼포먼스 고려: 백그라운드 다운로드 및 최적화 도구 활용을 통해 사용자 경험에 부정적인 영향을 주지 않습니다.

이 글에서 소개한 단계별 가이드를 참고하여, 여러분의 웹사이트에 최적화된 파비콘을 구성해 보시기 바랍니다.

 

 

발췌 사이트 : https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

 

How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.

evilmartians.com

 

Favicon Generator

 

https://dev-huiya.github.io/favicon-generator/

 

Favicon Generator

 

dev-huiya.github.io

 

저작자표시 비영리 동일조건