파비콘(favicon) 만드는 법
파비콘은 브라우저 탭·즐겨찾기·주소창에 표시되는 작은 사이트 아이콘입니다. 이 도구는 로고나 아이콘 이미지를 16·32·48·64px 멀티사이즈 favicon.ico 하나로 묶고, 필요한 크기의 PNG도 함께 만들어 줍니다.
1. 파비콘 크기 기준
- 16×16: 브라우저 탭·주소창 기본 크기
- 32×32: 고해상도(레티나) 탭·즐겨찾기
- 48×48 이상: 윈도우 바로가기, 일부 브라우저 UI
요즘 파비콘 세트 — ICO 하나로 끝나지 않습니다
favicon.ico는 출발점입니다. 요즘 사이트는 용도별 아이콘을 몇 개 더 둡니다 — 아이폰 홈 화면용 apple-touch-icon(180×180 PNG), 안드로이드·PWA 설치용 192×192 / 512×512 PNG(웹 앱 매니페스트에 등록), 크기 제약 없이 선명한 SVG 파비콘까지. 이 도구는 탭용 ico와 16~128px PNG를 만들어 주며, 더 큰 크기가 필요하면 원본 이미지를 크기 조절 도구에서 180·512px 정사각형으로 줄여 함께 쓰면 됩니다.
ICO가 멀티사이즈인 이유
ICO는 이미지 한 장이 아니라 여러 크기의 아이콘을 담는 컨테이너입니다. 브라우저는 탭·즐겨찾기·바로가기 등 표시 상황에 맞는 크기를 골라 씁니다. 큰 이미지 하나만 넣으면 브라우저가 즉석에서 축소하며 흐려지기 쉬워서, 이 도구는 16·32·48·64px 네 장을 각각 렌더한 뒤 하나의 ico로 조립합니다(PNG 내장 방식).
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">티스토리·워드프레스에 적용하기
- 티스토리: 블로그 관리 화면의 파비콘 설정에 ico 파일을 업로드하면 적용됩니다. 스킨 HTML을 직접 수정할 필요가 없습니다.
- 워드프레스: 사이트 아이콘(사이트 아이덴티티) 메뉴에 512×512 PNG를 올리면 워드프레스가 필요한 각 크기를 알아서 만들어 적용합니다.
- 직접 호스팅: 루트에 favicon.ico를 두면 link 태그가 없어도 대부분의 브라우저가 자동으로 찾습니다. 그래도 명시적인 link 태그를 함께 두는 것이 안전합니다.
파비콘이 안 바뀔 때 — 캐시 이야기
파비콘은 브라우저가 유난히 오래 캐시하는 리소스입니다. 파일을 교체해도 이전 아이콘이 한동안 남아 보일 수 있는데, 강력 새로고침(Ctrl+F5), link 경로에 ?v=2 같은 버전 쿼리 붙이기, 시크릿 창에서 확인하기로 해결됩니다. 하나 더 — 16px에서는 세부 묘사가 뭉개지므로, 글자가 많은 로고보다 단순한 심볼이 훨씬 잘 보입니다.
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)'은 이미지를 줄여 여백을 둡니다. 로고는 보통 정사각형 이미지를 쓰는 것이 가장 깔끔합니다.
Q. 파비콘을 바꿨는데 사이트에는 그대로예요.
A. 브라우저 캐시 때문입니다. 파비콘은 캐시가 오래 유지되는 리소스라, 강력 새로고침(Ctrl+F5)을 하거나 link 태그의 경로에 ?v=2 같은 버전 쿼리를 붙여 새 파일로 인식시키면 됩니다. 시크릿 창에서 열면 바뀌었는지 바로 확인할 수 있습니다.