파비콘(favicon) 만드는 법
파비콘은 브라우저 탭·즐겨찾기·주소창에 표시되는 작은 사이트 아이콘입니다. 이 도구는 로고나 아이콘 이미지를 16·32·48·64px 멀티사이즈 favicon.ico 하나로 묶고, 필요한 크기의 PNG도 함께 만들어 줍니다.
1. 파비콘 크기 기준
- 16×16: 브라우저 탭·주소창 기본 크기
- 32×32: 고해상도(레티나) 탭·즐겨찾기
- 48×48 이상: 윈도우 바로가기, 일부 브라우저 UI
2. 사용 방법 (3단계)
- 이미지 올리기: 로고·아이콘 이미지를 올립니다. 정사각형이 가장 깔끔합니다.
- 맞춤·배경 선택: 정사각형이 아니면 채우기/맞춤을, 배경은 투명·흰색·검정 중에서 고릅니다.
- 생성·저장: '파비콘 만들기'를 누른 뒤 favicon.ico와 필요한 PNG를 내려받습니다.
3. 웹사이트에 적용하는 법
favicon.ico를 사이트 최상위 폴더에 올리고, HTML <head>에 아래처럼 넣으면 됩니다. 최신 브라우저는 PNG 파비콘도 지원합니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">4. 이미지는 브라우저 안에서만 처리됩니다
파비콘 생성은 모두 브라우저 Canvas에서 이뤄지며 이미지가 서버로 전송되지 않습니다. ICO 파일도 브라우저에서 직접 조립해 만듭니다.
💡 파비콘 만들기 자주 묻는 질문 (FAQ)
Q. 파비콘은 어떤 크기로 만들어야 하나요?
A. 브라우저 탭용으로는 16·32·48px이 기본이며, 이 도구는 16·32·48·64px을 하나의 favicon.ico로 묶어 줍니다. 더 큰 아이콘이 필요하면 128px PNG도 함께 내려받을 수 있습니다.
Q. 만든 파비콘을 어떻게 적용하나요?
A. favicon.ico 파일을 웹사이트 루트에 올리고 head에 link 태그(rel="icon")를 추가하면 됩니다. PNG는 type과 sizes를 지정해 넣습니다.
Q. 정사각형이 아닌 이미지도 되나요?
A. 네. '채우기(cover)'는 가운데를 잘라 정사각형으로 맞추고, '맞춤(contain)'은 이미지를 줄여 여백을 둡니다. 로고는 보통 정사각형 이미지를 쓰는 것이 가장 깔끔합니다.