파비콘 생성기

파비콘 생성기란?#

파비콘은 브라우저 탭, 북마크 목록, 휴대전화의 “홈 화면 추가” 미리보기, Windows 타일에 표시되는 작은 아이콘입니다. 까다로운 점은 “파비콘”이 한 개의 파일이 아니라는 것입니다. 플랫폼마다 다른 크기와 다른 파일명을 기대합니다. 데스크톱 브라우저는 고전적인 favicon.ico를 원하고, iOS는 180×180 apple-touch-icon.png를, 설치 가능한 PWA는 192와 512를 site.webmanifest로, 최신 브라우저는 독립 PNG도 추가로 가져갑니다. 이 모든 것을 손으로 만들고, 거기에 연결하는 <head> 태그까지 손으로 두 번째 작업하기에는 너무 까다로운 종류의 일입니다.

이 페이지는 단일 원본에서 완전한 세트를 만듭니다. 직접 제공한 이미지이거나, 단색 배경 위의 글자(빠른 “이니셜” 브랜드 마크에 편리) 중 하나입니다. 필요한 크기를 선택하면 모든 것을 하나의 .zip으로 묶습니다. 다중 이미지 ICO, 독립 PNG, webmanifest, 그리고 붙여넣을 정확한 <link>와 <meta> 태그를 나열한 HTML 스니펫입니다. 모든 래스터화는 브라우저에서 일어납니다.

사용 방법#

1. 소스를 선택하세요.
   • 이미지 — 대략 정사각형인 이미지를 끌어 놓거나(또는 선택) 불러옵니다. 선택된 각 크기로 그려집니다.
   • 글자 — 한두 글자(기본 A)를 입력하고, 배경색(기본 하늘색)과 글자색(기본 흰색)을 고릅니다. 모든 크기에서 배경 위에 중앙 정렬로 글자가 놓입니다.
2. 16, 32, 48, 180, 192, 512 중 원하는 크기를 체크하세요. 기본적으로 여섯 개 모두 켜져 있습니다. 48은 favicon.ico 안에만 존재하므로(독립 PNG 없음), 16과 32가 켜져 있으면 자동으로 함께 묶입니다.
3. 미리보기 캔버스를 보세요. 투명 체커보드 위에 선택된 가장 큰 크기를 렌더링해서 투명 영역을 볼 수 있습니다.
4. .zip 다운로드를 클릭하세요. 기본 전체 크기 선택 기준 아카이브에는 다음이 들어갑니다.
   • favicon.ico — 16, 32, 48을 임베드된 PNG로 묶은 다중 이미지 ICO(모든 최신 브라우저가 받아들이는 Vista+ 형식).
   • favicon-16x16.png, favicon-32x32.png — 독립 PNG.
   • apple-touch-icon.png — 180×180 iOS 아이콘.
   • android-chrome-192x192.png, android-chrome-512x512.png — PWA 매니페스트 아이콘.
   • site.webmanifest — 192/512 아이콘을 참조하고 테마와 배경색을 포함.
   • html-snippet.html — <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest">, <meta name="theme-color"> 태그.
5. 사이트 루트에 압축을 풀고, 스니펫을 <head>에 붙여넣으면 아이콘이 /에서 해석됩니다.

주요 특징#

• 하나의 zip에 관행적인 이름의 완전한 세트. 파일명(favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest)이 브라우저와 빌드 도구가 사이트 루트에서 기본으로 찾는 것과 일치합니다.
• 직접 작성한 ICO 인코더. 처음부터 작성한 제대로 된 다중 이미지 Vista+ ICO(ICONDIR + ICONDIRENTRY 표 + 임베드된 PNG 페이로드)이지, 단일 이미지 32×32 스텁이 아닙니다.
• 즉시 브랜드 마크를 위한 글자 모드. 글자 두 개, 색 선택기 두 개로 끝. 30초 안에 알아볼 수 있는 아이콘이 필요한 내부 도구와 데모에 유용합니다.
• 실제로 필요한 파일만. 크기를 끄면 해당 PNG와 매니페스트 항목이 모두 생성되지 않고, HTML 스니펫도 맞춰 재생성됩니다.
• 바로 붙여넣을 수 있는 head 스니펫. 존재하는 에셋에만 범위를 둔 정확한 <link>와 <meta> 줄이라, 만들지 않은 파일로의 참조를 붙여넣는 일이 없습니다.
• 100% 로컬. 원본 이미지나 글자는 브라우저에서 래스터화되고 zip도 브라우저에서 조립됩니다. 업로드 없음.

실제 예시#

“Glide”라는 사이드 프로젝트용 파비콘을 만들려 합니다. 소스: 글자를 선택하고 G를 입력, 배경색을 #0ea5e9, 글자색을 #ffffff로 설정, 여섯 크기 모두 켠 채 .zip 다운로드를 클릭하세요. 압축을 풀면 다음이 나옵니다.

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

html-snippet.html은 정확히 다음을 포함합니다.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

이 여덟 파일을 사이트 루트에 넣고, 여섯 줄을 <head>에 붙여넣으면 모든 플랫폼(브라우저 탭, iOS 홈 화면, Android PWA)이 올바른 아이콘을 해석합니다.

FAQ#

왜 독립 48×48 PNG는 없나요?#

48은 favicon.ico 안에서만 소비됩니다(일부 구형 도구가 ICO에서 48 항목을 읽습니다). 독립 favicon-48x48.png를 만들면 어떤 브라우저도 가져가지 않는 죽은 무게일 뿐이므로, 이 도구는 48을 ICO에 묶고 독립 파일은 건너뜁니다.

정말 여섯 크기가 모두 필요한가요?#

완전한 덮임을 원한다면 네. 브라우저 탭만 신경 쓰고 iOS나 PWA는 신경 쓰지 않는다면 180, 192, 512를 끄면 ICO와 16/32 PNG만 얻습니다. 훨씬 작은 번들입니다. 그러면 스니펫에는 icon 링크만 들어가고 매니페스트나 apple-touch 줄은 없습니다.

ICO가 “임베드된 PNG”라고 설명되어 있는데 유효한 건가요?#

네. Windows Vista 이후 ICO는 PNG 페이로드를 임베드할 수 있고(오래된 BMP 형식 대신), 모든 최신 브라우저가 이 형태를 읽습니다. 별도의 BMP 인코더를 피하고 48 크기에서 더 작은 파일을 만듭니다.

한 크기에서 글자가 중앙에서 벗어나 보여요.#

모든 크기에서 일관된 글꼴로 캔버스에 중앙 정렬되지만, 글꼴 메트릭 때문에 M처럼 매우 네모난 글자나 상승부·하강부가 있는 글자는 살짝 높거나 낮아 보일 수 있습니다. 픽셀 단위 완벽한 중앙 정렬이 중요하다면 이미지 편집기에서 마크를 렌더링한 뒤 소스: 이미지를 사용하세요.