파비콘 생성기
이미지 한 장으로 favicon.ico + 전체 아이콘 세트를 — 전부 브라우저 안에서
1. 이미지 선택
2. 생성
로고나 이미지 한 장으로 사이트에 필요한 파비콘 전 세트를 만듭니다 — favicon.ico(16·32·48 멀티사이즈), 애플 터치 아이콘(180px), PWA 아이콘(192·512px), site.webmanifest, 붙여넣을 HTML 스니펫까지. 모든 처리는 브라우저 안에서 이뤄집니다.
이런 걸 할 수 있어요
- ✓멀티사이즈 favicon.ico
- ✓애플 터치·PWA 아이콘 PNG
- ✓site.webmanifest + HTML 스니펫
- ✓ZIP 한 번에 다운로드
이렇게 쓰세요
- 1정사각에 가까운 이미지를 올립니다
- 2파비콘 만들기를 누릅니다
- 3ZIP을 받고 스니펫을 <head>에 붙입니다
지원 형식 · PNG · JPG · SVG → ICO · PNG
로고 한 장으로 사이트에 필요한 파비콘 세트를 전부 만듭니다. favicon.ico(16·32·48 멀티사이즈), 애플 터치 아이콘(180px), PWA 아이콘(192·512px), site.webmanifest, 그리고 head에 붙여 넣을 HTML 스니펫까지 ZIP 하나로 받습니다. 처리는 브라우저 안에서 끝납니다.
사용 방법
- 1로고 이미지(PNG·JPG·SVG)를 끌어다 놓거나 선택합니다. 정사각형에 가까울수록 좋습니다.
- 2'생성'을 누르면 모든 규격이 만들어지고 미리보기가 나타납니다.
- 3ZIP을 내려받아 파일을 사이트 루트에 올리고, 함께 담긴 HTML 스니펫을 head에 붙여 넣습니다.
이럴 때 유용해요
새로 만든 블로그·회사 홈페이지·랜딩 페이지의 브라우저 탭에 로고를 달거나, 아이폰 홈 화면에 추가했을 때 나오는 아이콘과 안드로이드 설치형 웹앱(PWA) 아이콘까지 한 번에 준비할 때 씁니다.
규격마다 따로 그리고 ico로 묶는 작업을 손으로 하면 번거로운데, 이 도구가 전부 만들어 줍니다.
좋은 원본 고르기
16px로 줄어도 알아볼 수 있는 단순한 형태가 좋습니다. 글자가 많은 로고는 16px에서 뭉개지니 심볼 부분만 잘라 쓰세요. 배경이 투명한 PNG나 SVG를 넣으면 둥근 모서리 처리되는 iOS에서도 깔끔합니다.
512px 이상의 원본이면 모든 규격이 선명하게 나옵니다. 작은 원본을 키우면 흐려집니다.
적용 방법
ZIP 안의 파일을 사이트 루트(예: /favicon.ico, /apple-touch-icon.png)에 올리고, 스니펫의 link 태그들을 HTML head에 붙여 넣으면 끝입니다. site.webmanifest에는 앱 이름과 색을 적을 수 있는 자리가 있으니 열어서 고치세요.
바꾼 뒤에도 옛 아이콘이 보이면 브라우저 캐시 때문입니다. 시크릿 창에서 확인하거나 파일 이름에 버전을 붙이면 바로 반영됩니다.
자주 묻는 질문
파일이 서버에 올라가나요?+
아니요. 브라우저 안에서 처리되어 이미지가 기기를 떠나지 않습니다.
어떤 파일이 들어 있나요?+
favicon.ico(16·32·48), apple-touch-icon(180), PWA 아이콘(192·512), site.webmanifest, HTML 스니펫입니다.
적용은 어떻게 하나요?+
파일을 사이트 루트에 올리고 HTML 스니펫을 head에 붙여 넣습니다.
SVG도 넣을 수 있나요?+
네. PNG·JPG·SVG를 받습니다. 투명 배경 PNG나 SVG가 결과가 가장 깔끔합니다.
바꿨는데 옛 아이콘이 보여요.+
브라우저 캐시입니다. 시크릿 창으로 확인하거나 파일 이름에 버전을 붙여 보세요.