파비콘·앱 아이콘 만들기 (PNG·ICO·manifest)

로고 이미지나 글자 한두 개로 파비콘과 앱 아이콘 세트를 한 번에 만듭니다. 사이트를 새로 열거나 홈 화면에 추가되는 앱을 만들 때, 16~512 px PNG와 favicon.ico, apple-touch-icon, 매니페스트를 한 묶음으로 받습니다.

사용 방법

1. '만드는 방법'에서 '글자로' 또는 '이미지로'를 고릅니다. 글자는 '글자'에 1~2자를 넣고 '글꼴 계열'과 '글자색'을 정하고, 이미지는 끌어다 놓거나 '예시 넣기'를 누릅니다.
2. '배경 모양', '배경색', '여백'을 조절하면 미리보기가 바로 바뀝니다. 이미지는 '배경 투명'도 됩니다.
3. '앱·사이트 이름'과 '짧은 이름'은 site.webmanifest에 들어갑니다. 안드로이드용이 필요하면 '마스커블 아이콘도 만들기'를 켭니다.
4. 'zip으로 저장'으로 받은 파일을 사이트 루트에 올리고, 'HTML head 조각'을 복사해 head 요소 안에 붙여 넣습니다.

계산 방식과 참고

• 512 px 원본을 그린 뒤 절반씩 단계적으로 줄여 16·32·48·180·192·512 px PNG를 만듭니다. 작은 크기에서 선이 뭉개지지 않게 하기 위해서입니다.
• favicon.ico는 16·32·48 px PNG 세 장을 ICO 형식에 담은 파일입니다. 최신 브라우저는 ICO 안의 PNG를 그대로 읽습니다.
• 마스커블 아이콘은 내용을 가운데 80% 안전 영역에 넣은 정사각 아이콘으로, 안드로이드가 원이나 둥근 사각으로 잘라도 내용이 잘리지 않습니다.
• 이미지와 글자는 이 기기의 브라우저 안에서만 처리되며 어디에도 올라가지 않습니다. 설정값은 다음 방문을 위해 이 브라우저에 남습니다.

자주 묻는 질문

파비콘 크기는 몇 px로 만들어야 하나요?

브라우저 탭은 16·32 px, 바로가기는 48 px, 아이폰 홈 화면은 180 px, 안드로이드와 PWA는 192·512 px를 씁니다. 이 도구는 여섯 가지를 한 번에 만듭니다.

ICO 파일이 꼭 필요한가요?

오래된 브라우저와 /favicon.ico 주소를 자동으로 찾는 경우를 위해 있으면 좋습니다. PNG 링크도 함께 넣으므로 최신 브라우저는 PNG를 우선 씁니다.

글자 아이콘에는 어떤 글꼴이 쓰이나요?

기기에 설치된 시스템 글꼴입니다. 다른 기기에서는 같은 계열의 다른 글꼴로 그려질 수 있습니다.

투명 배경 아이콘도 되나요?

'이미지로'에서 '배경 투명'을 켜면 PNG 배경이 비워집니다. 글자 아이콘은 항상 배경색이 있습니다.