파비콘이란 무엇인가요?

파비콘(favicon)은 웹사이트 브라우저 탭, 북마크, 검색 결과에 표시되는 작은 아이콘입니다. 'favorites icon'의 줄임말입니다. 필요한 크기: 16×16(브라우저 탭), 32×32(북마크), 180×180(Apple Touch Icon), 192×192/512×512(PWA). ICO 형식이 전통적이지만, 최신 브라우저는 PNG, SVG도 지원합니다. 브랜드 인지도와 사용자 경험에 중요한 요소입니다.

파비콘 생성기

이미지를 업로드하면 웹, iOS, Android, Windows 등 모든 플랫폼에 필요한 파비콘을 한 번에 생성합니다

이미지 업로드

이미지를 드래그하거나 클릭하여 업로드

PNG, JPG, SVG, WebP (512x512 이상 권장)

옵션

배경색

여백: 0%

모서리 둥글기: 0%

생성된 파비콘이 없습니다

이미지를 업로드하고 '파비콘 생성하기' 버튼을 눌러주세요

파비콘 가이드

플랫폼별 파비콘 사이즈

•웹 표준: 16x16, 32x32, 48x48, 64x64, 96x96 (브라우저 탭, 즐겨찾기)

•Apple Touch Icon: 57~180px (iPhone, iPad 홈 화면 아이콘)

•Android Chrome: 192x192, 512x512 (홈 화면 아이콘, 스플래시 스크린)

•Microsoft Tile: 70~310px (Windows 시작 메뉴, 타일)

•favicon.ico: 멀티 사이즈 아이콘 (레거시 브라우저 호환)

파비콘 제작 팁

•512x512 이상의 정사각형 PNG 이미지를 사용하세요

•심플한 디자인이 작은 사이즈에서도 잘 보입니다

•배경이 투명한 PNG를 사용하면 어떤 테마에도 어울립니다

•Apple은 둥근 모서리를 자동으로 적용하므로 정사각형 이미지를 사용하세요

•다운로드한 ZIP을 /favicons/ 폴더에 넣고 HTML 코드를 <head>에 추가하세요

파비콘 생성기란?

파비콘 생성기는 로고 이미지 하나를 업로드하면 웹(16×16, 32×32), iOS(Apple Touch Icon 180×180), Android Chrome(192×192, 512×512), Windows 타일(150×150) 등 21가지 크기의 파비콘을 자동으로 생성합니다. HTML 코드, Next.js 설정, site.webmanifest, browserconfig.xml까지 한 번에 제공하여 별도 개발 없이 웹사이트 아이콘을 완성할 수 있습니다.

파비콘 생성기 활용 팁

원본 이미지 품질: 최소 512×512px 이상의 정사각형 PNG(투명 배경) 이미지를 업로드하면 모든 사이즈에서 선명하게 렌더링됩니다.
ZIP 일괄 다운로드: 생성된 파비콘 파일 전체를 ZIP으로 한 번에 다운로드하여 public 폴더에 바로 넣으세요.
Next.js 통합: 제공된 Next.js 코드를 layout.tsx의 metadata.icons에 그대로 붙여넣으면 바로 적용됩니다.
PWA 필수 아이콘: Android Chrome 192×192, 512×512 아이콘은 PWA(Progressive Web App) 설치에 반드시 필요합니다.