제대로 된 파비콘 세트는 파일 하나가 아닙니다: 브라우저는 여러 크기의 .ico를, iOS는 180px apple-touch-icon을, 안드로이드는 192·512px PNG와 웹 매니페스트를 원합니다. 이 도구는 이 모두를 이미지 하나에서 렌더링하고, <head>에 붙여넣을 정확한 HTML 태그와 함께 하나의 ZIP으로 담아 줍니다.
미리보기가 아이콘을 실제 16, 32, 48px로 보여 주므로 배포 전에 작은 크기에서도 알아보기 쉬운지 확인할 수 있습니다.
사용 방법
- 로고 추가정사각형 이미지가 가장 잘 맞고, 다른 것은 중앙 자르기 됩니다.
- 작은 크기 확인탭에서 대부분의 사용자가 실제로 보는 것은 16px 미리보기입니다.
- ZIP 내려받기favicon.ico, PNG 6개, site.webmanifest, 그리고 붙여넣을 준비가 된 html-snippet.txt.
이미지 하나를 넣으면 완전한 파비콘 세트가 나옵니다
로고나 아이콘 하나를 넣으면 이 생성기가 현대 사이트에 필요한 완전한 세트를 만듭니다. 16, 32, 48 픽셀 버전을 묶은 다중 크기 favicon.ico, 16·32·48, Apple 터치 아이콘용 180, Android와 PWA 설치용 192·512의 독립 PNG, 그리고 site.webmanifest까지요. 모든 것이 하나의 ZIP으로 나오므로 프로젝트 루트에 곧바로 넣을 수 있습니다.
올바른 link와 meta 태그가 이미 연결된, 붙여 넣기만 하면 되는 HTML head 코드 조각도 함께 받습니다. 템플릿에 복사하고 파일을 업로드하면, 마크업을 직접 손으로 쓰지 않고도 파비콘이 브라우저 탭, 북마크, 홈 화면 바로가기에 나타납니다.
모든 크기에서 또렷한 아이콘
파비콘은 지독하게 작으므로, 생성기는 브라우저 탭에 표시될 그대로 16, 32, 48 픽셀의 실제 크기 미리보기를 렌더링합니다. 덕분에 16px에서 뭉개지는 로고를 출시 전에 잡을 수 있습니다. 원본 이미지가 정사각형이 아니면 도구가 가운데 자르기 하여 아이콘이 찌그러지지 않고 균형을 유지하게 합니다.
전 과정이 여러분의 원본 이미지로부터 브라우저에서 실행되므로, 업로드나 계정 없이 고해상도 로고에서 파비콘 PNG와 ICO를 생성할 수 있습니다.
이럴 때 사용해요
새 사이트 출시 — favicon.ico와 모든 PNG 크기를 한 번에 생성해, 첫날부터 탭과 북마크가 완성된 모습을 갖추게 하세요.
PWA 설치 아이콘 추가 — 192·512 PNG와 site.webmanifest를 내보내 앱이 제대로 된 홈 화면 아이콘과 함께 설치되게 하세요.
Apple 터치 아이콘 — 180x180 apple-touch-icon을 만들어 iOS 북마크와 홈 화면에 또렷한 타일이 표시되게 하세요.
기존 사이트 리브랜딩 — 새 로고 하나를 생성기에 넣어 아이콘 세트 전체를 한 번에 교체하세요.
클라이언트 전달 — ico, PNG, manifest, head 코드 조각이 담긴 하나의 ZIP을 넘겨, 개발자가 그대로 넣기만 하면 되게 하세요.
작은 크기 가독성 확인 — 실제 크기 16px 미리보기로 디테일이 많은 로고가 여전히 아이콘으로 읽히는지 확인하세요.
정사각형이 아닌 로고 — 가로로 긴 워드마크를 넣고 가운데 자르기가 균형 잡힌 정사각형 파비콘으로 만들게 하세요.
정적 사이트나 프레임워크 프로젝트 — 생성된 head 태그를 Next, Astro, 또는 순수 HTML 템플릿에 복사해 출시하세요.
이미지 하나로 전체 파비콘 세트 생성 — 브라우저에서, 한 번에
파비콘은 16×16 픽셀짜리 나중에 생각할 사소한 것처럼 들리고, 오랫동안 그랬습니다. 현대 브라우저와 플랫폼이 그것을 조용히 작은 프로덕션으로 바꿔 놓았죠. 오늘날 제대로 하려면 favicon.ico, 16px부터 512px까지의 PNG 묶음, iOS 홈 화면용 Apple 터치 아이콘, 사이트를 앱으로 설치할 수 있게 하는 site.webmanifest, 그리고 HTML <head>에 들어갈 올바른 <link>와 <meta> 태그 블록이 필요합니다. 크기 하나를 놓치면 레티나 화면에서 탭 아이콘이 뿌옇게 보이고, 매니페스트를 놓치면 "홈 화면에 추가" 아이콘이 스크린샷으로 대체되며, 태그 블록을 틀리면 일부 플랫폼이 전체를 무시합니다.
프로젝트당 한 번 하고 나서 세부사항을 잊어버리는 작업치고는 자잘한 출력이 많습니다. IMG.DIY는 단일 원본 이미지를 받아 전체 세트—.ico, 모든 PNG 크기, 웹 매니페스트, 복사-붙여넣기 HTML 스니펫—를 만들며, 크기 조절을 전적으로 여러분의 브라우저에서 Canvas로 합니다. 여러분의 로고를 로컬로 읽어 각 목표 크기로 기기에서 렌더링하며, 아무것도 업로드하지 않습니다. 출시 전에 제3자 서버에 올리고 싶지 않은 브랜드 마크나 미출시 제품의 로고라면, 그 로컬 보장은 가질 만한 가치가 있고 아무 비용도 들지 않습니다.
전체 파이프라인이 클라이언트 측에서 돌아가므로 PWA가 캐시되면 오프라인에서도 작동합니다. 잠긴 업무용 기기에서든 연결이 없든 아이콘을 다시 생성할 수 있죠. 무료이고, 계정이 없으며, 아이콘에 워터마크가 구워지지 않습니다.
무엇이 다른가
.ico만이 아니라 세트 전체. ICO, 16부터 512까지의 PNG, Apple 터치 아이콘,site.webmanifest를 한 번의 다운로드로.- 복사-붙여넣기 HTML 포함.
<head>에 떨궈 넣을 정확한<link>/<meta>블록이 있어, 아이콘이 브라우저 전반에 실제로 등록됩니다. - 아무것도 업로드하지 않습니다. 로고를 로컬로 크기 조절합니다. 마크가 기밀이거나 출시 전일 때 유용합니다.
- 한 번에, 마법사 없이. 이미지 하나를 넣으면 전부 나옵니다. 나중에 조사해야 할 플랫폼 선택을 묻는 여러 단계 흐름이 없습니다.
- 오프라인이고 깨끗함. 캐시된 PWA, 가입 없음, 생성된 어떤 아이콘에도 워터마크 없음.
IMG.DIY와 다른 파비콘 생성기 비교
| 항목 | favicon.io | realfavicongenerator.net | 수동 (디자인 앱 + 코드) | IMG.DIY |
|---|---|---|---|---|
| 파일 업로드 | 예, 자사 서버로 | 예, 자사 서버로 | 아니오, 로컬 | 아니오, 브라우저에 남음 |
| 전체 세트 (.ico + PNG + 매니페스트) | 있음 | 있음, 매우 철저 | 직접 조립 | 있음 |
| HTML 스니펫 제공 | 있음 | 있음, 상세 | 직접 작성 | 있음 |
| 결과까지 단계 | 적음 | 많음 (옵션 다수) | 많음 | 한 번에 |
| 오프라인 작동 | 불가 | 불가 | 가능 | 가능, 첫 방문 이후 |
| 가격 | 무료 | 무료 등급, 유료 옵션 | 앱 비용 + 시간 | 무료 |
| 계정 필요 | 아니오 | 아니오 | 아니오 | 아니오 |
경쟁 상대에 솔직하자면: realfavicongenerator는 훌륭하고 진짜로 더 철저합니다. 실제 플랫폼에서 아이콘을 미리 보여주고, Safari 고정 탭 마스크와 테마 같은 예외 경우를 다루며, 플랫폼별 모양을 조정하게 해줍니다. 그 수준의 제어를 원하고 이미지 업로드가 상관없다면 훌륭한 선택입니다. favicon.io는 빠르고 간단하며 역시 탄탄한 세트를 만듭니다. IMG.DIY의 차이는 완전한 출력과 업로드 없음, 한 번에의 조합입니다. 같은 실용적 결과물—ico, PNG, 매니페스트, 그리고 그것들을 연결할 HTML—을, 로고가 브라우저를 떠나지 않고 설정 마법사를 거치지 않고 얻습니다. "로고가 있으니, 붙여 넣을 것을 전부 주되, 내 파일은 어디로도 보내지 말라"에는 그것이 딱 맞습니다.
IMG.DIY를 선택하는 이유
완전한 세트
ICO + 16/32/48/180/192/512 PNG + 매니페스트.
복사·붙여넣기 HTML
정확한 link 태그가 텍스트 파일로 포함됩니다.
실제 크기 미리보기
아이콘을 실제 16/32/48px로 먼저 확인.
안전함
로고는 브라우저를 절대 벗어나지 않습니다.