🌐 파비콘 변환기
로고나 아이콘을 업로드하면 favicon.ico, 표준 PNG 크기, site.webmanifest 파일을 생성합니다. 모든 처리는 브라우저에서 로컬로 이루어집니다.
이미지를 여기에 놓으세요
PNG, JPG, WebP, GIF, SVG · 가운데 기준 정사각형 자르기
왜 파비콘 세트를 만들까요
요즘 사이트는 16×16 아이콘 하나로는 부족합니다. 브라우저, iOS 홈 화면, Android PWA, 검색 결과 미리보기마다 크기와 형식이 다릅니다. 이 도구는 원본 이미지 하나로 방송 브랜드 사이트·블로그· 도구 랜딩 페이지에 필요한 세트를 한 번에 만듭니다.
최소 512×512 정사각형 로고에서 시작하면 축소 품질이 가장 좋습니다. 단순 로고는 SVG 업로드도 잘 맞습니다. 16×16에서는 디테일 많은 그림이 흐릴 수 있습니다.
사용 방법
- 필요하면 사이트 이름(
site.webmanifest에 사용)과 정사각형이 아닌 이미지용 배경색을 설정하세요. - PNG, JPG, WebP, GIF, SVG를 업로드하세요. 정사각형이 아니면 가운데를 기준으로 잘라 정사각형으로 만듭니다.
- ZIP 묶음을 받거나 미리보기 아래에서 개별 파일을 다운로드하세요.
- 파일을 프로젝트
public/폴더에 넣고 HTML 레이아웃이나 Next.js metadata에서 참조하세요.
생성되는 파일
- favicon.ico — 구형 브라우저·북마크용 다중 크기 ICO (16, 32, 48px)
- favicon-16x16.png, favicon-32x32.png, favicon-48x48.png — 탭 아이콘
- apple-touch-icon.png — iOS·iPadOS 홈 화면 바로가기용 180×180
- android-chrome-192x192.png, android-chrome-512x512.png — Android·PWA 설치 프롬프트
- site.webmanifest — Android 아이콘과 테마 색을 연결하는 Web App Manifest
Next.js 예시
파일을 public/에 두고 루트 레이아웃 metadata에 아이콘을 추가하세요. 최소 구성은 favicon.ico, apple-touch-icon.png, manifest 링크입니다. 배포 후 브라우저 캐시를 강력 새로고침하거나 시크릿 창에서 탭 아이콘을 확인하세요.
자주 묻는 질문
서버에 업로드되나요? 아니요. Canvas API로 브라우저에서만 리사이즈·ICO 인코딩이 이루어집니다.
16×16 아이콘이 흐릿해요. 원본을 단순화하거나 가는 선 없이 굵은 마크를 쓰세요. 파비콘은 아주 작게 보이므로 가독성이 디테일보다 중요합니다.
투명 PNG도 되나요? 네. 자르기로 여백이 생기면 사이트 헤더 색과 맞는 배경색을 설정하세요.
디자이너를 대체하나요? 크기별 내보내기를 자동화할 뿐입니다. 좋은 로고는 여전히 필요하고, 웹용 패키징 시간을 줄여 줍니다.