"Chrome 이 icon 을 다섯 곳에 네 size 로 보여 주고, single 128 PNG 가 16 으로 scale 되면 static 처럼 보임. Lesson 1 이 맞는 네 PNG 생산, 다음 sidenote — disabled-state greyscale / dark-mode 고려 / Web Store badge variant."
Chrome 이 요청하는 네 size
- 16 — chrome://extensions URL 옆 toolbar favicon, 관련 시 URL bar.
- 32 — Windows scaling 과 일부 platform-specific surface.
- 48 — extension 관리 page (chrome://extensions card).
- 128 — Chrome Web Store listing, install prompt, 가끔 New Tab page 에서.
네 size 다 별도 PNG 로 제공. Chrome 이 single 이미지 scale 가능하지만 결과가 pixel-tune 된 variant 보다 visibly 더 나쁨 — 특히 16, 128 의 antialiased detail 이 mush 로 변함.
Size 별 디자인
16 이 가장 어려움. Total 250 pixel 미만, 종종 dark UI chrome 옆에 보임. 실용 제약:
- 강한 silhouette 하나. Multi-element 로고가 16 에서 사라짐; 가장 인식 가능한 모양 하나 선택.
- White 와 dark background 둘 다에 high contrast. Chrome 의 UI 가 dark mode 따라 flip.
- 가는 stroke 피하기. 16 의 1-pixel line 이 grey smear 로 anti-alias; 2-pixel minimum.
- 실제 context 에서 테스트. Dark mode 의 Mac 에서 chrome://extensions 열기; icon 이 page 에 숨으면 더 강한 silhouette 필요.
128 이 가장 공간 많지만 가장 public 도 — Web Store screenshot 이 full size 로 보임. Hero asset 으로 다루고; 더 작은 size 는 그것에서 derive.
Manifest 선언
Icon list 할 두 자리:
icons(top-level) — chrome://extensions 와 Web Store 가 사용. Size 별 key 가진 object.action.default_icon— toolbar 에서 사용. 보통 top-leveliconsmirror.
같은 경로로 둘 다 선언 가능; Chrome 이 별도 field 로 read 하지만 file 두 set 필요 없음.
Disabled 상태
chrome.action.disable(tabId) 호출 시 Chrome 이 icon 자동 greyscale 처리 — 별도 disabled asset 필요 없음. Default greyscale 변환이 대부분 icon 에 동작. Greyscale 에서 사라지는 element (low-contrast color) 가진 거면, 손-tune 된 grey variant 가진 수동 setIcon 제공.
Dark mode
Chrome 이 dark mode 위해 icon 자동 flip 안 함. Icon 이 dark-on-transparent 면 Chrome dark toolbar 에 invisible. 두 option:
- Outline 접근 — icon 을 solid fill 없이 주로 stroke-based 로 유지. 두 background 다 동작.
- Programmatic swap — SW 에서
matchMedia('(prefers-color-scheme: dark)')listen, 필요할 때 light variant 와chrome.action.setIcon호출. 더 많은 work; v1 엔 거의 가치 없음.
ClipDeck v1 이 16 에 outline 접근 사용 — paperclip outline, brand color stroke, fill 없음. Light 와 dark Chrome 둘 다 깔끔하게 읽힘.
Web Store asset pack
Chrome Web Store 가 extension icon 외에도 필요 — 별도 upload 하는 store-only asset:
- 128 × 128 store icon — 128 의 manifest icon 과 같음.
- 440 × 280 small promo tile — store 검색 결과에 보임.
- 1400 × 560 marquee promo — featured-extension surface (indie extension 엔 드묾; 어쨌든 design).
- Screenshot — 1280 × 800 또는 640 × 400. 최소 하나; 최대 다섯. 가장 본 asset; marketing 으로 다루기.
Submission 전 screenshot set 준비. Web Store reviewer 가 screenshot 품질을 '이게 실제 software 인지' 로 count, bare manifest-only listing 은 extension 이 뭐 하는지 communicate 안 해서 거부됨.