파비콘 만들기
사이트 파비콘은 어떤 크기로 몇 개 만들까?
파비콘은 ICO·180px(애플)·192·512px(안드로이드)를 씁니다.
HTML Living Standard·Web App Manifest 기준 · 브라우저 안에서만 · 업데이트
파비콘
만드는 중…
크기별 쓰임
| 파일 | 크기 | 쓰는 곳 |
|---|---|---|
| favicon.ico | 16·32·48 | 브라우저 탭 (옛 브라우저 포함) |
| favicon-16x16.png | 16 | 브라우저 탭 |
| favicon-32x32.png | 32 | 브라우저 탭(고해상도)·작업 표시줄 |
| favicon-48x48.png | 48 | 윈도우 바탕화면 바로 가기 |
| apple-touch-icon.png | 180 | 아이폰·아이패드 홈 화면 |
| android-chrome-192x192.png | 192 | 안드로이드 홈 화면 (웹 앱 매니페스트) |
| android-chrome-512x512.png | 512 | 안드로이드 시작 화면 (웹 앱 매니페스트) |
결과가 이상한가요?
어떻게 계산했나요
HTML Living Standard·Web App Manifest 기준 · 브라우저 안에서만
- 아이콘 연결: HTML Living Standard 의 link rel="icon"·sizes, 애플 홈 화면 apple-touch-icon 180×180, 웹 앱 매니페스트 icons 192·512
- favicon.ico 는 16·32·48px PNG 를 ICO 묶음(머리 6바이트 + 항목 16바이트씩)에 넣어 이 브라우저 안에서 만듭니다
- 그림은 canvas 에 크기별로 다시 그려 PNG 로 저장합니다
자주 묻는 질문
어떤 파일이 필요한가요?
favicon.ico 하나만 사이트 맨 위 폴더에 두어도 대부분의 브라우저 탭에 나옵니다. 아이폰 홈 화면은 apple-touch-icon.png(180px), 안드로이드 홈 화면은 웹 앱 매니페스트의 192·512px PNG 를 씁니다. 여기서 만든 파일을 모두 올리고 아래 태그를 <head> 에 넣으면 됩니다.
그림이 서버로 올라가나요?
올라가지 않습니다. 고른 그림과 넣은 글자는 이 기기의 브라우저 안에서만 그리고 저장합니다. 서버·분석 도구·주소창 어디에도 보내지 않습니다.
어떤 그림이 파비콘에 좋나요?
16px 에서도 알아볼 수 있게 단순한 모양·굵은 글자 한두 개가 좋습니다. 정사각형이 아닌 그림은 가운데를 기준으로 잘라 씁니다. 투명 배경 PNG 를 쓰면 탭 색에 어울립니다.
파일을 한 번에 받을 수 있나요?
압축 파일(zip)로 묶어 주지는 않습니다. 크기별 저장 버튼을 차례로 누르세요. 파일 이름은 태그에 적힌 이름과 같게 저장됩니다.