파비콘 만들기
사이트 아이콘 세트와 favicon.ico
파일 고르기
만들어질 아이콘
이미지를 고르면 결과가 나타납니다.
- 원본
- 16×16
- 브라우저 탭 · 즐겨찾기
- 32×32
- 브라우저 탭 · 즐겨찾기
- 48×48
- 브라우저 탭 · 즐겨찾기
- 180×180
- iPhone · iPad 홈 화면
- 192×192
- Android 홈 화면 · 웹 매니페스트
- 512×512
- Android 홈 화면 · 웹 매니페스트
- favicon.ico
- 16×16 · 32×32 · 48×48
사이트에 붙여 넣을 HTML
내려받은 파일을 사이트 최상위 폴더에 두고 아래 줄을 <head> 안에 넣으세요.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
모든 처리는 브라우저 안에서만 이루어지며, 이미지는 서버로 전송되거나 저장되지 않습니다. 결과 파일에는 촬영 날짜·위치(GPS)·카메라 같은 원본 정보(EXIF)가 남지 않습니다.
사용 안내
그림 한 장으로 사이트 아이콘 한 벌을 만듭니다. 브라우저 탭용 16·32·48px, 아이폰 홈 화면용 180px, 안드로이드용 192·512px PNG 와 favicon.ico 를 한 번에 만들고, `<head>` 에 붙여 넣을 HTML 까지 함께 드립니다. 그림은 브라우저 안에서만 처리되며 서버로 올라가지 않습니다.
이럴 때 씁니다
- 새로 만든 사이트나 블로그에 탭 아이콘을 넣을 때.
- 로고를 바꾼 뒤 아이콘 세트를 다시 만들어야 할 때.
- 휴대폰 홈 화면에 추가했을 때 보일 아이콘까지 챙길 때.
쓰는 법
- 원본 그림을 고릅니다. 정사각형에 가까운 512px 이상을 권합니다(최소 48px).
- 만들어질 아이콘이 크기별로 미리 보입니다. 어디에 쓰이는 크기인지도 함께 적어 둡니다.
- 전체 내려받기(ZIP) 로 한 벌을 받거나, favicon.ico 만 받을 수도 있습니다.
- ZIP 을 풀어 사이트 최상위 폴더에 두고, 함께 들어 있는 HTML 을 `<head>` 안에 붙여 넣습니다.
알아 두실 것
- favicon.ico 안에는 16 · 32 · 48px 세 가지가 함께 들어갑니다. 오래된 브라우저와 윈도우 탐색기가 이 파일을 봅니다.
- 원본이 정사각형이 아니면 잘라내지 않고 가운데 맞춰 넣고 남는 부분은 투명하게 둡니다 — 로고가 잘리는 쪽이 더 나쁜 결과이기 때문입니다.
- 원본보다 큰 크기는 늘려서 만들므로 흐려질 수 있습니다. 그런 크기가 생기면 화면에 어떤 크기인지 알려 드립니다.
- 아주 작은 16px 에서는 가는 선과 글자가 뭉개집니다. 단순한 모양일수록 작은 크기에서 잘 보입니다.
- 모두 브라우저 안에서 만듭니다 — 로고를 어디에도 올리지 않습니다.
자주 묻는 질문
ico 와 png 중 무엇을 써야 하나요?
둘 다 두시는 편이 안전합니다. 요즘 브라우저는 PNG 를 읽지만, 오래된 브라우저와 윈도우 탐색기는 favicon.ico 를 찾습니다. ZIP 에는 둘 다 들어 있고, 함께 드리는 HTML 이 알맞게 연결해 줍니다.
아이콘을 바꿨는데 그대로 보입니다.
브라우저가 아이콘을 오래 저장해 두기 때문입니다. 강력 새로고침(Ctrl+Shift+R)을 하거나, 파일 이름 뒤에 ?v=2 처럼 붙여 주소를 바꾸면 새로 읽습니다.
정사각형이 아니면 어떻게 되나요?
잘라내지 않고 가운데 맞춰 넣습니다. 남는 자리는 투명하게 둡니다. 로고 전체가 보이는 편이 잘린 것보다 낫다고 보았기 때문입니다. 꽉 채우고 싶으시면 "이미지 자르기" 에서 1:1 로 먼저 자르세요.
배경이 투명한 아이콘이 되나요?
원본이 투명한 PNG 라면 투명한 채로 만들어집니다. 다만 어두운 테마의 브라우저에서는 검은 배경에 어두운 로고가 묻힐 수 있으니, 바탕이 있는 그림이 안전할 때도 많습니다.