사이트 아이콘 생성기: 프롬프트 한 번으로 모든 파비콘 크기
사이트 아이콘은 세 가지 시험을 동시에 치릅니다. 브라우저 탭의 16픽셀, Google 모바일 검색 결과의 48픽셀 배수, iPhone 홈 화면의 180픽셀. 원하는 마크를 한 번 묘사하면 사이트 아이콘 생성기가 모든 파비콘 크기로 바꾸고, 1024px 마스터 한 장에서 전부 내보냅니다.
사이트 아이콘과 파비콘 예시
실제 웹사이트와 웹앱을 위해 생성한 마크입니다. 플랫, 라인, 글래스, 미니멀 스타일이 512px부터 16px 브라우저 탭까지 선명함을 유지합니다.
무한 캔버스에서 사이트 아이콘을 완성하세요
파비콘의 최종 크기는 16px. 작은 디테일이 모든 것을 결정합니다. 캔버스에서 생성하고 변형을 분기하고 원클릭으로 배경을 제거한 뒤, 전체 세트를 내보내기 전에 실제 탭 크기로 후보를 하나씩 검증하세요.
시각적 계보 트리 (Visual Lineage)
프롬프트 수정 이력과 리믹스 변형을 베지에 곡선으로 연결하여 조명, 질감, 색상 차이를 나란히 비교할 수 있습니다.
자체 내장 후처리 (Built-in Post-Processing)
원클릭 스마트 누끼 제거 지원. Apple App Store의 투명 배경 금지 규정에 맞춘 정밀 단색 채우기 및 색상 보정 완비.
안전 영역 보호 (Safe Zone Protection)
시스템 곡률에 의해 핵심 그래픽이 잘리는 현상을 방지하는 슬라이더 조절식 내부 패딩 가이드.
사이트 아이콘 프롬프트 예시
아래 예시 중 하나를 사이트 아이콘 생성기에 붙여넣고, 피사체·스타일·색을 나타내는 단어를 여러분의 것으로 바꾸세요. 좋은 사이트 아이콘 프롬프트는 세 가지를 담습니다. 피사체, 스타일과 색 팔레트, 그리고 16픽셀에서도 알아볼 수 있어야 한다는 사실.
미니멀 레터마크
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
친근한 가게 마크
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
글래스 SaaS 파비콘
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
3단계로 사이트 아이콘 만들기
한 문장에서 파비콘 세트까지. 리사이징은 사이트 아이콘 생성기가 담당하고, 이미지 편집기는 켜지 않습니다.
- 1
마크를 묘사하기
피사체, 스타일, 색을 한 문장에 담으세요. 예: "a flat compass mark, navy on white, site icon for a travel planner". 형태 묘사가 단순할수록 AI는 파비콘에 필요한 깔끔한 실루엣에 가까워집니다.
- 2
1024 마스터 생성 후 축소해서 확인
1024x1024로 생성한 뒤 16px와 32px 미리보기로 판단하세요. 탭이야말로 아이콘이 사는 곳입니다. 확대했을 때만 좋은 마크는 탭 바에서 실패합니다.
- 3
파비콘 세트 내보내기
멀티사이즈 ICO, 180px Apple 터치 아이콘, 192와 512 매니페스트 PNG, 최신 WEBP를 한 번에 내보내 사이트에 업로드하거나 저장소에 넣으세요.
사이트 아이콘 크기와 형식 전체 표
브라우저, Apple, Android, Google 검색은 저마다 다른 파일을 가져갑니다. 사이트 아이콘 생성기는 이 모두를 준비해야 합니다. 아래가 현재 기준 숫자입니다.
| 표시 위치 | 제출 항목 | 형식 규칙 | 나타나는 곳 |
|---|---|---|---|
| 브라우저 탭 | 16x16과 32x32 px PNG | 정사각형. 아이콘이 채우는 최소 표면이므로 모티프 하나, 강한 대비 유지 | 탭 바와 창 제목. Chrome은 일반 디스플레이에서 16px, HiDPI에서 32px 사용 |
| 레거시 favicon.ico | 16, 32, 48 px를 담은 멀티사이즈 ICO 하나 | 사이트 루트의 /favicon.ico에 두면 link 태그를 읽지 않는 도구도 찾아냄 | 구형 브라우저, 리더, 루트 파일을 직접 요청하는 크롤러 |
| Google 검색 결과 | 정사각형 파일, 변이 48px의 배수: 48, 96, 144 또는 192px | PNG, ICO, GIF, JPEG 또는 SVG. 크롤링 가능하고 홈페이지 head에서 선언되며 사이트를 시각적으로 대표해야 함 | 모바일 검색 결과의 사이트 이름 옆. 크기나 브랜드 규칙을 어기면 아이콘이 제외됨 |
| Apple 터치 아이콘 | 180x180 px PNG | 투명도 없는 완전한 정사각형 이미지. 라운드 코너는 iOS가 적용해 그대로 홈 화면에 놓임 | iOS 홈 화면 바로가기와 즐겨찾기 |
| 웹 매니페스트(PWA) | 192x192와 512x512 px PNG | 웹 매니페스트에 선언. 콘텐츠는 마스커블 세이프 에어리어 안에. Android가 자기 방식으로 잘라냄 | Android 설치 안내, 홈 화면 아이콘, 스플래시 화면 |
| SVG 아이콘 | 임의 크기의 정사각형 SVG 하나 | 어떤 표면에서도 선명하게 확대·축소되고 prefers-color-scheme 다크 모드 변형도 가능 | 최신 Firefox, Chrome, Safari는 선언되면 래스터 파비콘 대신 사용 |
크기는 Google 파비콘 가이드라인과 현재 브라우저 동작 기준으로 확인했습니다. 확인 시점: 2026년 9월.
마크를 묘사하고, 탭 크기로 미리 본 뒤, 위 표의 ICO·Apple 터치·매니페스트·WEBP 파일을 한 번에 내보내세요.
사이트 아이콘 생성기 열기마스터 한 장, 모든 표면
위 표의 각 표면은 같은 마스터에서 서로 다른 파일을 가져갑니다. 직접 코딩하는 사이트라면 head에 최대 세 줄이면 됩니다. <link rel="icon">, <link rel="apple-touch-icon">, 그리고 manifest 링크. 마음에 드는 로고가 이미 있다면 무료 앱 아이콘 리사이저로 전체 크기 세트를 자르세요.
16px 탭 바
사이트 아이콘이 채우는 가장 까다로운 표면. 1024px 마스터는 64분의 1로 줄고, 디테일 많은 로고는 뭉개집니다. 살아남는 마크는 피사체 하나, 색은 둘 이하, 픽셀이 절반 사라져도 보이는 굵은 스트로크를 가집니다.
favicon.ico 폴백
1996년부터 쓰여 온 형식. link 태그를 무시하는 브라우저도, head를 읽지 않는 크롤러도 지금도 사이트 루트의 /favicon.ico를 요청합니다. 그 자리에 멀티사이즈 ICO 하나면 가장 싼 호환성 보험입니다.
Google의 48px 규칙
모바일 검색 결과는 사이트 이름 옆에 파비콘을 표시하지만, 가이드라인을 통과한 아이콘만 대상입니다. 정사각형, 변이 48px의 배수, 홈페이지 선언, 크롤링 가능, 브랜드 대표. 32px만 내보내던 사이트는 표시가 사라지는 걸 경험했습니다.
CMS 업로드, 코드 불필요
WordPress는 파비콘을 사이트 아이콘이라 부르고, 사이트 아이콘 설정에서 512x512 정사각형을 올리면 작은 크기를 자동으로 만듭니다. Squarespace, Wix, Shopify도 설정에 favicon 필드가 있어 512px 결과물을 그대로 받습니다.
사이트 아이콘이 실제로 나타나는 곳
브라우저 탭이 가장 눈에 띄는 자리이지만, 같은 파일은 더 멀리 갑니다. 북마크 바와 나중에 읽기 목록, 방문 기록 페이지, 새 탭의 자주 방문한 사이트 격자, Google 모바일 결과의 URL 위, iOS와 Android 홈 화면 바로가기, 설치된 PWA의 작업 전환기까지. 표면마다 아이콘을 자르고 줄이는 방식이 다릅니다. 그래서 위의 표가 있는 것입니다. 탭의 16px에서 버틴 마크는 어디서든 버텁니다. 반대는 성립하지 않습니다.
사이트 아이콘을 얻는 세 가지 방법
사이트 아이콘 생성기와 파비콘 컨버터는 문제의 서로 다른 절반을 담당합니다. 컨버터는 이미 있는 아트워크를 줄이고, AI 생성기는 아트워크 자체를 만듭니다.
| AI 사이트 아이콘 생성기 | 파비콘 컨버터 | 디자이너 | |
|---|---|---|---|
| 출발점 | 프롬프트 한 문장 또는 참조 이미지 한 장 | 업로드하는 기존 정사각형 로고 | 브리프와 여러 차례 리뷰 |
| 결과물 | 요청에 맞춰 생성된 오리지널 마크 | 기존 아트워크를 파비콘 파일로 자른 것 | 손으로 다듬은 오리지널 아트워크 |
| 16px 가독성 | 탭 바에서 버틸 때까지 다시 생성 가능 | 처음 로고의 완성도에 달려 있음 | 반복할 시간이 있다면 충분히 좋음 |
| 세트 내보내기 | 마스터 한 장에서 멀티사이즈 ICO, Apple 터치, 매니페스트 PNG, WEBP | 대부분 컨버터의 전부가 바로 이것 | 계약 범위에 따라 |
| 완료까지 | 콘셉트 하나에 1분 미만 | 몇 분 | 라운드마다 며칠 |
| 비용 | 무료 크레딧으로 시작, 이후 배치마다 크레딧 | 무료 | 프로젝트당 수십만 원 이상 |
일반적인 워크플로 비교. 2026년 9월 확인.
생성기가 대신 처리하는 것들
첫 프롬프트부터 저장소나 CMS 필드에 넣을 파일까지, 사이트 아이콘 생성기가 그 사이의 모든 것을 처리합니다.
1024px 마스터 한 장
고해상도는 한 번만 생성. 모든 파비콘 크기가 여기서 축소되며 16px에서도 뭉개지지 않습니다.
바로 쓰는 파비콘 내보내기
멀티사이즈 ICO, 180px Apple 터치 아이콘, 192/512 매니페스트 PNG. 이미지 편집기가 필요 없습니다.
PNG, ICO, WEBP
플랫폼이 요구하는 형식을 그대로 내보냅니다. 가벼운 최신 WEBP까지.
투명 또는 단색 배경
커스텀 헤더 사이트에는 투명 PNG를, 어떤 탭 색과 다크 테마에도 버티는 단색 배경도 선택 가능.
변형과 히스토리
같은 콘셉트로 방향을 다시 생성하고, 세트가 나올 때까지 모든 버전을 보관합니다.
브랜드 자산 참조
기존 로고를 업로드해 색과 형태 언어를 끌어와 파비콘을 브랜드 시스템 나머지와 맞춥니다.
16픽셀에서 살아남는 사이트 아이콘 스타일
스타일은 탭 크기까지 줄였을 때 디자인이 무엇을 남기는지 결정합니다. 사이트 아이콘 생성기에서 두세 가지 후보를 비교해 보세요. 플랫과 미니멀 마크가 가장 안정적입니다. 그라데이션과 가는 선에 의존하지 않기 때문입니다. 글래스 프리셋은 실루엣이 하나의 덩어리로 굵게 유지되면 통합니다. 3D 스타일은 Apple 터치와 매니페스트 크기에서 빛나고, 윤곽이 분명하면 탭에서도 쓸 만합니다. 픽셀 아트는 작은 캔버스라는 제약 자체를 미학으로 바꿉니다. 생성 전에 아이콘 스타일 갤러리에서 아이콘 크기로 비교해 보세요. 미니멀, 3D, 글래스 페이지에 실제 마크가 표시됩니다.
탭 바에서 살아남는 사이트 아이콘 디자인
파비콘 문제는 대부분 잘못된 줌에서 디자인하는 데서 시작되고, 네 가지 습관이 거의 모두를 막아 줍니다. 피사체는 하나로 구성하세요. 16px에서 두 형태가 겨루면 그저 노이즈가 됩니다. 팔레트는 두세 색으로 제한하세요. 안티앨리어싱이 미묘한 대비를 지우는 속도는 생각보다 빠릅니다. 라이트와 다크 브라우저 테마 둘 다에서 시험하세요. 어두운 탭 바는 어두운 마크를 삼킵니다. 그리고 글자는 포기하세요. 16px에서 성립하는 건 알파벳 한 글자까지이고, 단어는 절대 들어가지 않습니다. 내보내고 나서가 아니라 결정하기 전에 탭 크기로 미리 보세요.
이 워크플로가 맞는 곳
사이트 아이콘 생성기가 만든 마스터 한 장을, 사이트 이름 옆에 작은 정사각형을 놓는 모든 곳으로.
WordPress 사이트 아이콘
사이트 아이콘 설정에 512x512 결과물을 업로드하면 작은 크기와 link 태그는 WordPress가 자동으로 만들어 줍니다.
Squarespace, Wix, Shopify
세 플랫폼 모두 사이트 설정에 파비콘(브라우저 아이콘) 필드가 있고 512px 결과물을 그대로 받아들입니다.
직접 코딩하는 사이트
내보낸 파일을 사이트 루트에 두고 link 태그를 한 번만 추가하면 브라우저, 검색 결과, 바로가기가 모두 커버됩니다.
PWA와 웹 앱
192와 512 마스커블 결과물은 웹 매니페스트로 직행하고, 같은 마스터가 탭 아이콘도 공급합니다.
스튜디오와 클라이언트 작업
프로젝트별 히스토리를 유지하고, 리브랜딩 때마다 세트를 다시 생성해 모든 사이트에 일관된 아이콘 세트를 납품합니다.
사이드 프로젝트와 포트폴리오
무료 크레딧으로 시작하고, 프롬프트 한 번으로 완전한 파비콘 세트를 만들어 같은 저녁에 탭 아이콘을 출시할 수 있습니다.
관련 도구
사이트 아이콘 FAQ
크기, 형식, CMS 업로드 등 파비콘에 대해 실제로 자주 묻는 질문.
사이트 아이콘 크기는 얼마로 해야 하나요?
1024x1024로 디자인하고 아래로 내보냅니다. 브라우저 탭에 16과 32px, Google 검색 결과에 48px 배수의 정사각형, Apple 터치 아이콘에 180x180, 웹 매니페스트에 192와 512px. 사이트 아이콘 생성기는 1024 마스터 한 장에서 전부 내보냅니다. 모든 크기가 깨끗한 축소이기 때문입니다.
사이트 아이콘을 웹사이트에 추가하려면 어떻게 하나요?
파일을 사이트 루트에 업로드하고 홈페이지 head에서 선언합니다. ICO·SVG·PNG를 가리키는 <link rel="icon">, 180px 파일의 <link rel="apple-touch-icon">, PWA 크기를 내보낸다면 매니페스트 링크 세 줄입니다. WordPress, Squarespace, Wix, Shopify라면 사이트 설정에서 아이콘을 올리기만 하면 됩니다. 플랫폼이 모든 태그를 대신 작성합니다.
파비콘이 Google 검색 결과에 표시되지 않는 이유는?
Google은 가이드라인을 충족하는 파비콘만 표시합니다. 정사각형 파일이면서 변이 48px의 배수, 홈페이지 head에서 선언, 안정적으로 크롤링 가능한 URL, robots.txt 차단 없음, 그리고 사이트를 시각적으로 대표할 것. 32px뿐인 아이콘은 크기 규칙을 충족하지 못합니다. 파일을 고쳐도 Google이 재크롤링할 때까지 며칠이 걸립니다.
사이트 아이콘, 파비콘, 앱 아이콘의 차이는?
파비콘과 사이트 아이콘은 같은 것의 다른 이름입니다. 탭, 북마크, 검색 결과에서 사이트를 대표하는 작은 정사각형이죠. 사이트 아이콘은 WordPress가 부르는 이름입니다. 앱 아이콘은 홈 화면과 스토어용 큰 소재로 자체 사양이 있으며, 모바일 애플리케이션 아이콘 가이드에서 다룹니다.
파비콘에 투명 배경을 쓸 수 있나요?
네, 직접 코딩하는 사이트의 기본 선택은 투명 PNG나 ICO입니다. 다만 게시 전에 다크 테마에서 확인하세요. 어두운 마크는 어두운 탭 바에 사라집니다. Apple 터치 아이콘은 불투명 이미지를 쓰세요. iOS는 투명 부분을 검게 채웁니다.
ICO, PNG, SVG 중 어떤 형식을 써야 하나요?
현재 최소 세트는 세 파일입니다. /favicon.ico에 둘 멀티사이즈 ICO(폴백), 최신 브라우저용 정사각형 SVG, Apple 기기용 180x180 PNG. PWA로 설치된다면 웹 매니페스트에 192와 512px PNG를 추가하세요. 그 이상은 중복입니다.
WordPress 사이트 아이콘을 바꾸려면?
외모 → 사용자 정의 → 사이트 아이콘으로 이동해 512x512 px 이상의 정사각형 이미지를 업로드하세요. WordPress가 자동으로 잘라 모든 작은 크기와 link 태그를 생성합니다. 위 도구에서 512px 파일을 만들어 올리면 캐시가 만료된 뒤 탭 아이콘이 갱신됩니다.
생성한 사이트 아이콘의 권리는 누구에게 있나요?
여러분에게 있습니다. 만든 모든 아이콘에 대한 상업적 권리를 유지합니다(서비스 약관 범위 내). 클라이언트 사이트와 상업 사이트에 쓰이는 파비콘도 포함됩니다.
탭 바에서 살아남는 사이트 아이콘을 만드세요
마크는 한 번만 묘사하세요. 사이트 아이콘 생성기가 모든 파비콘 크기를 한 번에 내보내고 같은 오후에 사이트를 업데이트할 수 있습니다.