Chrome extension은 어떤 위치에서는 선명한 128픽셀 로고를 보여주지만, toolbar에서는 흐릿하고 탁한 정사각형으로 보일 수 있습니다. 이는 대개 brand mark 자체가 아니라 asset sizing 때문입니다. Chrome extension icon sizes를 올바르게 선택하려면 toolbar, extension, store artwork를 서로 연관되지만 역할은 다른 각각의 작업으로 다뤄야 합니다.
이 asset들은 웹사이트용 favicon과는 별개입니다. HTML Standard는 rel='icon'을 페이지 link relation으로 정의하지만, extension은 manifest.json에서 icon을 선언하고 별도의 action artwork를 정의할 수도 있습니다. 사이트 icon도 필요하다면 별도 설정 방법은 favicon size guide에서 다룹니다.
Chrome extension icon sizes: 각 asset의 역할
extension에서 icon size는 서로 다른 UI와 packaging 환경에 제공되는 파일의 픽셀 크기입니다. 픽셀 크기만으로 배치 위치가 결정되는 것은 아니며, manifest property와 asset을 요청하는 surface에 따라 달라집니다.
- Manifest artwork: 최상위
iconsobject에 선언하는 일반 extension artwork입니다. 이 아이콘 세트는 일관된 정체성을 유지해야 합니다. - Action artwork: toolbar에 표시되는 mark로, 일반 icon과 구분해야 할 때
action.default_icon을 통해 제공합니다. - Store artwork: Chrome Web Store의 listing workflow를 위해 준비하는 128x128 PNG입니다. package가 모든 listing asset을 제공한다고 가정하지 말고 별도 deliverable로 관리하세요.
보수적인 기준선은 16x16, 24x24, 32x32, 48x48, 128x128 픽셀입니다. 이 크기들은 작업 시 권장하는 크기이며, 모든 화면에 공통으로 적용되는 단일 표시 규칙은 아닙니다.
왜 extension icon size가 중요한가
작은 크기에서는 세부 디테일이 사라집니다. 세밀한 글자, 가는 획, 복잡한 mark는 16픽셀에서 색 덩어리로 뭉개질 수 있습니다. 정확히 맞는 크기의 파일이 없으면 브라우저는 사용 가능한 이미지를 scaling해야 합니다. 이 fallback은 부드럽거나 흐리게 보일 수 있습니다.
목적과 해상도를 나눠 준비한 icon set이 유용합니다. toolbar의 밀도에 적합한 compact artwork, 일반 extension 표면 전반에 사용할 일관된 icon family, store presentation용 고해상도 정사각형 이미지를 준비하면 됩니다. 그러면 각 export에 정해진 역할이 생기고, 하나의 oversized file을 모든 slot에 맞추는 데 의존할 필요가 없습니다.
manifest.json에서 icon set을 만드는 방법
Manifest V3에서 icons의 숫자 키는 참조 대상 파일의 픽셀 크기를 선언합니다. 경로는 확장 프로그램 루트를 기준으로 하며, 대소문자를 포함해 파일명과 정확히 일치해야 합니다. 다음 예시는 확장 프로그램 식별용 이미지와 toolbar용 이미지를 분리한 보수적인 구성입니다:
{
"manifest_version": 3,
"name": "Sample Extension",
"version": "1.0.0",
"icons" {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"action": {
"default_title": "Run Sample Extension",
"default_icon": {
"16": "images/action-16.png",
"24": "images/action-24.png",
"32": "images/action-32.png"
}
}
}icons 객체는 Chrome에 일반적인 용도로 사용할 수 있는 여러 아이콘 표현을 제공합니다. default_icon 맵은 16, 24, 32픽셀 크기의 더 세밀한 toolbar용 버전을 지정합니다. 이 크기에서는 전체 로고보다 단순화된 심벌릿이 더 잘 읽힐 수 있습니다. action 전용 아이콘을 생략하면 일반 아이콘이 fallback으로 사용될 수 있으므로, toolbar용 아이콘 세트를 선언하면 아이콘 표시를 더 정밀하게 제어할 수 있습니다.
웹사이트 favicon 구문을 manifest에 그대로 복사하지 마세요. sizes 속성은 <link rel='icon' sizes='32x32' ...> 같은 HTML에 넣어야 하며, JSON 맵에 넣는 것이 아닙니다. 마찬가지로 favicon으로 작동하는 .ico 파일이 자동으로 올바른 확장 프로그램 asset이 되는 것은 아닙니다. PNG가 보수적인 패키지 형식입니다.
일관된 확장 프로그램 아이콘을 위한 권장 사항
- 먼저 16픽셀을 기준으로 디자인하세요. 아이콘을 선명한 실루엣과 제한된 색상으로 구성하고, 밝고 어두운 toolbar에서도 형태가 구분되도록 해야 합니다. 더 큰 크기의 export는 그다음에 다듬으면 됩니다.
- 시각적 중심을 맞추세요. 수학적으로 동일한 여백을 적용해도 아이콘이 낮거나 답답해 보일 수 있습니다. 각 변형을 실제 toolbar 크기의 preview에서 비교해 보세요.
- 파일 dimensions를 일치시키세요.
icon-32.png의 실제 크기는 32×32픽셀이어야 하고, manifest key도32로 지정해야 합니다. package path도 함께 확인하세요. - 하나의 visual family를 유지하세요. toolbar, extension 관리 화면, store에 사용하는 artwork는 가장 작은 버전에서 장식 요소를 줄이더라도 도형 구성과 색상을 공유해야 합니다.
- 패키징한 내용을 확인하세요. unpacked extension을 로드하고
chrome://extensions에서 참조된 모든 이미지가 ZIP에 들어 있는지 확인하세요. 변경 사항을 적용한 뒤에는 extension을 reload하세요.
Mzu favicondl을 사용하면 깨끗한 SVG 또는 PNG 소스에서 PNG variants를 export할 수 있습니다. 사이트에 favicon도 필요하다면, favicon HTML code guide에서 별도로 필요한 markup 경로를 설명합니다.
설치 후 아이콘이 표시되지 않는다면 먼저 JSON syntax를 확인한 다음 파일, 경로, dimensions를 검증하세요. underlying webpage을 새로 고치는 것만으로는 packaged extension metadata가 반드시 reload되지 않을 수 있으므로, 테스트할 때는 extension의 reload control을 사용하세요.
결론: 목적에 맞게 구성한 아이콘 세트를 배포하세요
Chrome extension 아이콘 크기가 중요한 이유는 toolbar, extension 관리 화면, store처럼 사용 context마다 시각적 여유가 다르기 때문입니다. 실용적인 16, 24, 32, 48, 128픽셀 PNG 세트를 준비하면 하나의 파일을 모든 슬롯에 억지로 사용하는 대신 Chrome에 크기별 원본 artwork를 정확하게 제공할 수 있습니다. 이러한 dimensions를 관리 가능한 baseline으로 삼고, release 전에 현재 Chrome Web Store upload rules를 확인하며, extension 아이콘과 website favicon은 분리해서 관리하세요.