파비콘 만들기 (ICO · PNG)

사용법

1. 이미지를 고르거나 상자에 끌어다 놓습니다. PNG·JPEG·WebP·GIF·SVG 를 쓸 수 있고, 512 × 512 픽셀 이상의 정사각형 이미지가 가장 선명합니다.
2. 여백과 둥근 모서리를 조절하고 배경을 투명 또는 단색으로 고릅니다. 바꿀 때마다 아래 목록이 다시 만들어집니다.
3. site.webmanifest 에 넣을 앱 이름이 있으면 입력합니다. 휴대폰 홈 화면에 사이트를 추가할 때 보이는 이름입니다.
4. ‘전체 내려받기(ZIP)’를 누르거나 목록에서 파일을 하나씩 내려받습니다.
5. 파일을 사이트의 최상위 폴더에 올리고, ‘<head> 에 넣을 태그’ 아래 태그를 페이지의 <head> 안에 붙여 넣습니다.

자주 묻는 질문

이미지가 업로드되나요?

아니요. 크기 조절과 묶기는 브라우저 안에서만 합니다.

어떤 파일이 들어 있나요?

favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. HTML 파일에는 붙여 넣을 태그가 들어 있습니다.

투명을 골랐는데 apple-touch-icon.png 에는 왜 배경이 있나요?

iOS 는 투명한 부분을 검은색으로 채우고 모서리를 직접 둥글게 깎습니다. 그래서 이 아이콘만은 항상 배경을 채우고(투명을 고르면 흰색) 모서리를 둥글게 하지 않습니다.

정사각형이 아닌 이미지는 어떻게 되나요?

비율을 유지한 채 가운데에 맞추고 짧은 쪽에 빈 공간을 둡니다. 아이콘을 꽉 채우려면 먼저 정사각형으로 잘라 주세요.

16픽셀에서 흐릿하게 보여요.

16 × 16 픽셀에서는 가는 선과 작은 글자가 뭉개집니다. 단순한 모양이나 글자 한두 개를 쓰고 여백을 줄이세요.

브라우저에 예전 아이콘이 계속 보여요.

브라우저는 파비콘을 오래 캐시합니다. 캐시를 지우고 새로 고치거나, 링크에 버전을 붙이세요(예: /favicon.ico?v=2).