# 2021년을 위한 Favicon 정리

> Clean Markdown view of GeekNews topic #3469. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=3469](https://news.hada.io/topic?id=3469)
- GeekNews Markdown: [https://news.hada.io/topic/3469.md](https://news.hada.io/topic/3469.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-12-25T12:01:44+09:00
- Updated: 2020-12-25T12:01:44+09:00
- Original source: [evilmartians.com](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
- Points: 17
- Comments: 0

## Topic Body

- 브라우저 스펙에 따라 수많은 파일이 필요한데, 이걸 하나로 정리

- 5개의 이미지와 한개의 JSON 파일

ㅤ→ .ico 32x32 : 예전 브라우저들

ㅤ→ .svg : 스케일링 가능, 대부분 최신 브라우저들, 다크모드도 지원

ㅤ→ apple-touch-icon 180x180 : 애플 기기용 iOS8+ 이후는 180x180 크기. 20px 정도 패딩과 배경색을 넣으면 보기 좋음

ㅤ→ manifest(JSON) : PWA 및 안드로이드 기기용

ㅤ ㅤ→ 192x192 : 홈스크린

ㅤ ㅤ→ 512x512 : PWA 로딩시 스플래시 스크린용

- 글에서는 이 5개의 아이콘을 한개의 SVG에서 만들고 최적화 하는 걸 단계별로 설명

## Comments



_No public comments on this page._