파비콘 생성기이란?

이 파비콘 생성기는 업로드한 이미지, 입력한 이니셜, 또는 이모지로 웹사이트에 필요한 모든 파비콘 크기를 만들어줍니다. 소스를 고르면 16×16, 32×32, 48×48 크기의 ICO 파일과 무손실로 확대되는 SVG, 그리고 Apple Touch 아이콘 및 Android 홈 화면용 PNG 버전을 받아 프로젝트에 바로 적용할 수 있습니다.

이미지로 시작하거나, 글꼴과 모양을 골라 한 글자에서 세 글자를 입력하거나, 이모지를 선택하세요. 그러면 도구가 PNG 6장(16, 32, 48, 180, 192, 512픽셀), 선명한 SVG, 그리고 Windows 탭이 여전히 요구하는 작은 사이즈 3종을 담은 멀티 레졸루션 ICO를 렌더링합니다. 모두 ZIP으로 묶여 site.webmanifest와 head에 바로 붙일 수 있는 link 태그까지 포함됩니다. 정사각형 SVG 또는 PNG 소스가 가장 깔끔하게 스케일링됩니다.

사용 방법

1. 소스를 고르세요: 정사각형 이미지(PNG, JPG 또는 SVG, 가급적 512×512 이상)를 업로드하거나, 글꼴과 모양을 골라 이니셜을 입력하거나, 이모지를 선택합니다.
2. 모든 표준 크기(16px, 32px, 48px, 180px, 192px, 512px)로 생성된 파비콘의 미리보기를 확인하세요.
3. ICO 파일, 모든 PNG 크기, 페이지 head에 붙여넣을 HTML link 태그가 포함된 완전한 파비콘 패키지를 ZIP 파일로 다운로드하세요.

사용 시기

• 새 웹사이트나 웹 앱에 탭과 홈 화면 아이콘을 추가할 때.
• 로고를 새로 디자인한 뒤 기존 사이트의 브랜드 아이콘을 전체적으로 교체할 때.
• 홈 화면 추가 기능에 맞는 manifest 사양을 충족하는 PWA 아이콘을 만들고 싶을 때.

결과

개발자가 스타트업의 1024x1024 로고를 업로드합니다. 도구가 favicon.ico(16/32/48), apple-touch-icon.png(180x180), Android 아이콘(192/512)은 물론 HTML 메타 태그까지 포함된 완전한 파비콘 세트를 생성합니다.

자주 묻는 질문

favicon 사이즈가 왜 이렇게 많이 필요한가요?

플랫폼마다 요구하는 크기가 달라서예요. 크롬 탭은 32픽셀, 북마크는 16, iOS 홈 화면은 180, Android 홈 화면은 192, PWA 스플래시는 512를 사용합니다. 모든 사이즈를 갖춰 두면 어느 위치에 떠도 아이콘이 또렷하게 보입니다.

PNG, SVG, JPG 중 어떤 걸 올려야 하나요?

SVG가 가장 좋아요. 어떤 사이즈로든 손실 없이 스케일됩니다. 그다음이 512×512 PNG. JPG도 동작은 하지만 손실 압축 탓에 아이콘 가장자리에 헤일로가 남을 수 있고, 특히 16과 32픽셀에서 도드라집니다.

ICO 파일 안에는 뭐가 들어 있나요?

ICO는 컨테이너 포맷이에요. 이 도구가 만드는 ICO는 비트맵 레이어 3장(16, 32, 48픽셀)을 담고 있어서, Windows가 아이콘이 표시되는 위치(작업 표시줄, 파일 목록, 브라우저 탭)에 맞춰 자동으로 적절한 레이어를 선택합니다.

이 파일들을 프로젝트 어디에 둬야 하나요?

사이트의 public 루트, 즉 index.html 옆에 압축을 풀어 두세요. 함께 제공되는 link 태그는 루트 경로(/favicon.ico, /apple-touch-icon.png)를 사용하므로 일반 HTML이나 Next.js, Astro, Vite 같은 프레임워크에서 추가 설정이 필요 없습니다.

favicon을 바꿨는데 브라우저에 여전히 옛 아이콘이 보이는 이유는?

브라우저는 favicon을 매우 적극적으로 캐싱합니다. 강제 새로고침(Windows에서 Ctrl+Shift+R, Mac에서 Cmd+Shift+R)하거나, link 태그에 /favicon.ico?v=2처럼 쿼리 스트링을 붙여 새로 가져오게 만드세요. 캐시는 보통 하루 안에 자동으로 갱신됩니다.

관련 도구