한 장으로 모든 크기를 만드는 파비콘 생성기
왼쪽에 이미지를 올리고 필요한 크기를 고르면 오른쪽에 미리보기가 바로 생깁니다. 생성 버튼을 따로 누를 필요가 없고, 다중 크기 favicon.ico와 붙여 넣을 head 코드까지 함께 만들어 줍니다. 이미지는 서버로 올라가지 않습니다.
이미지 올리기
이미지를 여기에 끌어다 놓으세요
PNG · JPG · WEBP · SVG · 정사각형에 가까운 이미지가 가장 좋습니다
만들 크기
옵션
생성 결과
- 원본
- —
- 선택한 크기
- —
- 만든 파일
- —
- 합계 용량
- —
샘플 이미지로 미리 보여주고 있습니다. 내 이미지를 올리면 그대로 바뀝니다.
head에 붙여 넣을 코드
생성은 브라우저 안(Canvas)에서만 이루어집니다. 이미지는 어디로도 전송되지 않으며, favicon.ico는 16·32·48 픽셀을 한 파일에 담아 브라우저가 상황에 맞는 크기를 고르게 합니다.
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
파비콘 생성기 사용 설명
파비콘은 브라우저 탭과 북마크, 홈 화면 아이콘에 쓰이는 작은 사이트 상징입니다. 크기가 작다 보니 대충 줄여도 될 것 같지만, 실제로는 16픽셀에서 알아볼 수 있어야 하고 동시에 512픽셀 홈 화면에서도 깨지지 않아야 해서 여러 크기를 따로 준비하는 편이 안전합니다.
이 파비콘 생성기는 이미지 한 장을 받아 13가지 크기를 한 번에 만들고, 브라우저가 실제로 찾는 다중 크기 favicon.ico와 HTML head에 붙여 넣을 코드까지 함께 내어 줍니다. 처리는 전부 브라우저 안에서 이루어지므로 로고 원본이 밖으로 나가지 않습니다.
파비콘은 어디에 쓰이는가
같은 이미지가 여러 자리에 다른 크기로 들어갑니다. 어디에 쓰일지 알아야 어떤 크기를 남길지 판단할 수 있습니다.
- 브라우저 탭과 주소창 — 16·32픽셀이 실제로 보이는 크기입니다
- 북마크 목록과 방문 기록 — 32·48픽셀을 씁니다
- iOS 홈 화면 바로가기 — 152·167·180픽셀
- 안드로이드 홈 화면과 PWA 설치 아이콘 — 192·512픽셀
- 검색 결과 옆 아이콘 — 최소 48픽셀의 배수를 권장합니다
이 도구가 이미지를 처리하는 방식
파일을 고르면 브라우저가 이미지를 메모리로 읽어 캔버스에 그리고, 고른 크기마다 다시 그려 PNG로 내보냅니다. 업로드 과정이 없어서 즉시 반응하고 원본 파일은 손대지 않습니다.
- 크기·옵션을 바꾸면 별도 버튼 없이 미리보기가 바로 갱신됩니다
- 각 크기는 원본에서 직접 축소해 그리므로 중간 단계의 화질 손실이 없습니다
- 다시 그리는 과정에서 촬영 정보 같은 메타데이터는 사라집니다
화면 순서대로 따라 하기
왼쪽 열이 입력과 설정, 오른쪽 열이 결과입니다. 위에서 아래로 한 번 지나가면 저장까지 끝납니다.
- 왼쪽 상자에 이미지를 끌어다 놓거나 파일 선택을 누릅니다
- 만들 크기에서 필요 없는 칩을 눌러 끕니다
- 정사각형이 아니면 자동 크롭을, 로고가 가장자리에 붙으면 여백 추가를 켭니다
- 출력 형식에서 PNG·ICO·둘 다 중 하나를 고릅니다
- favicon.ico 저장이나 ZIP 다운로드를 누르고, 아래 head 코드를 복사합니다
favicon.ico가 여러 크기를 담아야 하는 이유
ICO는 한 파일 안에 여러 해상도를 담을 수 있는 형식입니다. 브라우저와 운영체제는 상황에 따라 필요한 크기를 그 안에서 골라 쓰기 때문에, 16픽셀 하나만 든 ICO는 큰 자리에서 흐려집니다.
- 이 도구의 favicon.ico는 16·32·48 픽셀을 한 파일에 담습니다
- 사이트 최상위 경로에 두면 별도 선언 없이도 브라우저가 찾아갑니다
- 큰 아이콘은 ICO 대신 PNG로 두고 head에서 따로 가리키는 편이 가볍습니다
PNG와 ICO는 언제 쓰는가
두 형식은 경쟁 관계가 아니라 역할이 다릅니다. 대부분의 사이트는 둘을 함께 둡니다.
- PNG — 최신 브라우저와 모바일 홈 화면이 사용하는 기본 형식입니다
- ICO — 구형 브라우저와 윈도우 환경이 최상위 favicon.ico를 먼저 찾습니다
- PNG + ICO를 함께 만들면 어느 쪽에서 열어도 아이콘이 비지 않습니다
원본 이미지를 고르는 기준
작게 줄였을 때 남는 것은 형태와 색 대비뿐입니다. 원본이 복잡하면 16픽셀에서 뭉개집니다.
- 512픽셀 이상 정사각형에 가까운 이미지를 준비합니다
- 글자가 들어가면 한두 글자까지만 남깁니다
- 가는 선과 그러데이션은 작은 크기에서 사라집니다
- 배경이 흰색인 사이트라면 투명 배경 PNG가 안전합니다
head 스니펫을 어디에 붙이나
생성된 파일을 사이트에 올린 뒤, 오른쪽 아래 코드를 HTML의 head 안에 붙여 넣으면 됩니다. 경로는 실제로 올린 위치에 맞게 고칩니다.
- `<link rel="icon">`는 브라우저 탭 아이콘을 지정합니다
- `<link rel="apple-touch-icon">`은 iOS 홈 화면 아이콘입니다
- `manifest.json`의 icons 항목은 안드로이드와 PWA 설치 아이콘을 담당합니다
- favicon.ico는 최상위에 두면 선언 없이도 자동으로 탐색됩니다
실제 예시로 한 번 따라가 보기
가로 세로 1024픽셀 로고로 일반적인 웹사이트 세트를 만든다고 가정합니다. 필요한 최소 구성은 다음과 같습니다.
- 16·32·48을 켠 상태로 favicon.ico를 저장합니다
- 180을 켜서 apple-touch-icon.png를 만듭니다
- 192·512를 켜서 PWA 아이콘을 만듭니다
- 전체 ZIP을 받아 사이트 최상위에 풀고 head 코드를 붙여 넣습니다
자주 하는 실수
파비콘은 캐시가 강하게 걸리는 자원이라 바꾼 뒤 확인이 어렵습니다. 아래 네 가지가 대부분의 원인입니다.
- 바꿨는데 그대로 보이는 경우 — 브라우저와 CDN 캐시를 지우고 강력 새로고침합니다
- 16픽셀에서 뭉개지는 경우 — 원본이 너무 복잡합니다. 형태를 단순화합니다
- 홈 화면 아이콘만 잘리는 경우 — 여백 추가를 켜서 안전 영역을 확보합니다
- 투명 배경이 검게 나오는 경우 — ICO 대신 PNG 항목을 확인합니다
올리기 전 체크리스트
배포 직전 아래를 순서대로 확인하면 재작업이 줄어듭니다.
- favicon.ico가 사이트 최상위 경로에 있는가
- head 코드의 경로가 실제 파일 위치와 같은가
- 180픽셀 아이콘이 iOS 홈 화면에서 잘리지 않는가
- 192·512 아이콘이 manifest에 등록돼 있는가
- 브라우저 탭에서 16픽셀이 형태를 알아볼 수 있는가
자주 묻는 질문
올린 이미지가 서버로 전송되나요?
전송되지 않습니다. 파일을 고르는 순간부터 저장까지 모든 처리가 사용하는 기기의 브라우저 안에서 이루어집니다. 로고 원본이 외부로 나가지 않으므로 공개 전 단계의 이미지도 안전하게 다룰 수 있습니다.
어떤 원본을 준비해야 하나요?
512픽셀 이상의 정사각형에 가까운 PNG가 가장 안전합니다. 가로세로 비가 다르면 정사각형 자동 크롭이 가운데를 기준으로 잘라 냅니다. 작은 이미지를 올리면 큰 크기에서 흐려지므로 원본을 크게 준비하는 편이 좋습니다.
favicon.ico는 어디에 두나요?
사이트 최상위 경로, 즉 도메인 바로 아래에 두는 것이 관례입니다. 그 자리에 있으면 head에 아무것도 적지 않아도 브라우저가 스스로 찾아갑니다. 다른 경로에 둘 때는 head에서 경로를 직접 지정해야 합니다.
파비콘을 바꿨는데 그대로 보입니다.
파비콘은 캐시가 특히 오래 남는 자원입니다. 강력 새로고침으로 확인하고, 그래도 남으면 파일 이름에 버전을 붙이거나 CDN 캐시를 비웁니다. 브라우저 탭을 닫았다 다시 여는 것만으로는 갱신되지 않는 경우가 많습니다.
투명 배경이 유지되나요?
PNG로 만들면 투명 배경이 그대로 유지됩니다. ICO도 이 도구에서는 PNG를 담는 방식이라 투명도가 살아 있습니다. 다만 다크 모드 탭에서는 어두운 배경에 어두운 로고가 묻힐 수 있으니 실제 탭에서 한 번 확인해 보세요.
정사각형이 아닌 이미지는 어떻게 되나요?
정사각형 자동 크롭이 켜져 있으면 짧은 변을 기준으로 가운데를 잘라 냅니다. 꺼 두면 이미지를 정사각형 안에 맞춰 넣기 때문에 남는 부분이 투명하게 비어 있습니다. 로고가 가로로 길다면 미리 잘라 두는 편이 결과가 깔끔합니다.
여백 추가는 언제 켜나요?
로고가 사각형 가장자리까지 꽉 차 있을 때 켭니다. iOS 홈 화면처럼 아이콘 모서리를 둥글게 깎는 환경에서는 가장자리가 잘려 보이는데, 5% 여백을 두면 안전 영역이 생겨 잘림을 피할 수 있습니다.
PWA에는 어떤 크기가 필요한가요?
192픽셀과 512픽셀이 사실상 필수입니다. 두 크기를 만들어 manifest의 icons 항목에 등록하면 안드로이드 설치 아이콘과 스플래시 화면이 정상적으로 표시됩니다. 512픽셀은 마스크 처리용으로도 함께 쓰입니다.
SVG 파비콘도 만들 수 있나요?
SVG 원본을 올려 각 크기의 PNG로 변환할 수는 있습니다. 다만 이 도구는 벡터를 그대로 내보내지는 않습니다. SVG 파비콘을 쓰려면 원본 SVG를 그대로 올리고 head에 별도로 선언하면 되고, 구형 브라우저를 위해 여기서 만든 ICO와 PNG를 함께 두면 안전합니다.
참고한 곳
아이콘 선언과 크기 규격의 공식 문서입니다.