파비콘 생성기

이미지를 업로드하면 웹사이트에 필요한 모든 해상도의 파비콘 아이콘을 한 번에 생성해 줍니다.

정사각형 형태의 고해상도 이미지를 권장합니다 (PNG, JPG)

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

완벽한 파비콘 생성 가이드

웹사이트의 첫인상인 파비콘(Favicon)을 최신 웹 표준 및 여러 디바이스(iOS/Android/Desktop) 환경에 맞추어 제대로 적용하는 방법을 안내합니다.

왜 이렇게 많은 파비콘 파일이 필요한가요?

과거에는 `favicon.ico` 하나면 충분했습니다. 하지만 현재는 iOS 홈 화면에 추가할 때 사용하는 고해상도 `apple-touch-icon.png`, 안드로이드(PWA)를 위한 `android-chrome-192x192.png`, 브라우저 탭에 보여지는 `32x32` 사이즈 등, 각 운영체제와 기기가 요구하는 최적의 아이콘 해상도 규격이 다릅니다. 이 도구는 단 한 장의 원본 이미지를 업로드하면 최신 웹 표준에 부합하는 모든 파비콘을 ZIP 압축 파일로 일괄 생성해 줍니다.

올바른 원본 이미지 준비

파비콘은 매우 작은 크기(16x16)로도 렌더링되므로, 복잡하고 글씨가 많은 로고보다는 **단순하고 또렷한 도형 기반 마크(Symbol)** 를 업로드하는 것이 좋습니다. 추천하는 원본 규격은 512x512 픽셀 이상, 투명 배경의 PNG 파일입니다.

웹사이트에 적용하는 방법

다운로드받은 ZIP 파일을 압축 해제한 후, 모든 파일(png, ico, webmanifest)을 웹사이트의 **루트(Root) 디렉토리 (예: public 폴더)** 에 업로드하세요. 그런 다음 하단에 제공되는 `<link>` 형태의 HTML 코드를 웹사이트의 `<head> ... </head>` 사이에 복사해 넣으면 모든 세팅이 완료됩니다.