# 2025년에 Favicon을 준비하는 법 > Clean Markdown view of GeekNews topic #19204. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=19204](https://news.hada.io/topic?id=19204) - GeekNews Markdown: [https://news.hada.io/topic/19204.md](https://news.hada.io/topic/19204.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2025-02-13T10:02:02+09:00 - Updated: 2025-02-13T10:02:02+09:00 - Original source: [evilmartians.com](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) - Points: 50 - Comments: 4 ## Summary favicon을 효율적으로 제공하기 위해서는 핵심적인 다섯 가지 아이콘과 하나의 JSON 파일만으로 대부분의 환경을 커버할 수 있습니다. SVG 파일과 최소한의 PNG 파일, 그리고 web manifest 파일을 활용하면 다양한 브라우저와 기기에서 아이콘을 통일성 있게 표시할 수 있으며, 오래된 브라우저를 위해서는 여전히 `/favicon.ico` 경로가 중요합니다. 아이콘을 직접 만들고 최적화하는 과정에서는 SVG와 PNG 파일을 압축하여 파일 용량을 최소화하고, HTML에 적절히 연결하여 다양한 환경에서 적절한 favicon이 표시되도록 설정하는 법을 설명합니다. ## Topic Body - favicon을 만드는 방식이 복잡해지면서, 단순히 브라우저 탭이나 터치스크린에 웹사이트 로고를 표시하기 위해 20개 이상의 PNG 파일을 사용하는 상황이 많음 - 이를 대체하기 위해, 상대적으로 적은 수의 아이콘 파일과 최소한의 설정으로 대부분의 환경을 커버할 수 있는 방법을 제안 ### 매우 간단한 버전 - 복잡한 세팅 없이 핵심적인 다섯 가지 아이콘과 하나의 JSON 파일만 있으면 충분함 - HTML에 넣을 기본 링크 예시임 ```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)를 지원한다면 다음도 추가함 ```html <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이 표시됨 - 자동화 툴을 만들어 운영하면 더 편리 ## Comments ### Comment 34603 - Author: carnoxen - Created: 2025-02-15T13:21:25+09:00 - Points: 1 [SVG Favicon](https://caniuse.com/link-icon-svg)은 아직 파폭에선 지원이... ### Comment 34608 - Author: carnoxen - Created: 2025-02-15T17:43:26+09:00 - Points: 1 - Parent comment: 34603 - Depth: 1 아 사파리였네요 ### Comment 34491 - Author: yeppyshiba - Created: 2025-02-13T10:13:30+09:00 - Points: 1 예전 회사에서 했던 프로젝트로 웹게임을 구현했는데 심심해서 이스터에그로 애니메이션 favicon 을 구현했는데 sprintsheet 로 애니메이션 구현했더니 꽤 그럴듯하더군요 ### Comment 34489 - Author: xguru - Created: 2025-02-13T10:03:01+09:00 - Points: 1 [2021년을 위한 Favicon 정리](https://news.hada.io/topic?id=3469) 4년전에 한번 올렸었는데 요즘에 맞게 업데이트 되었습니다.