favicon에서 Electron 앱 아이콘 만들기

패키징된 Electron 앱에 기본 Electron 로고가 계속 보인다면 native bundle 아이콘이 아직 설정되지 않은 것입니다. favicon 파일로 Electron 앱 아이콘 만들기에는 플랫폼별 asset이 필요합니다. rel='icon'으로 선언한 페이지 resource는 설치된 앱의 아이콘과 별개입니다([HTML Standard](https://html.spec.whatwg.org/multipage/links.html#rel-icon)).

사전 준비 사항

Electron 프로젝트와 electron-builder, ImageMagick가 PATH에서 사용 가능해야 합니다.
정사각형 SVG 또는 사용할 수 있는 가장 큰 PNG favicon이 필요합니다. 16-pixel raster를 확대해 선명해질 것을 기대하면 안 됩니다.
macOS 명령어를 실행하려면 sips와 iconutil을 사용할 수 있는 macOS shell을 여세요.

원본 파일이 없다면 다음 글을 참고하세요: How to Download a Favicon from Any Website. Mzu favicondl을 사용해 PNG와 ICO로 변환할 수 있습니다.

favicon 파일로 Electron 앱 아이콘 만들기

1024-pixel master를 만듭니다. artwork는 투명한 정사각형 canvas 중앙에 배치하세요:
```
magick -background none favicon.svg -resize '1024x1024&gt;' -gravity center -extent 1024x1024 icon.png
```
favicon.svg를 실제 파일로 교체하세요. vector artwork를 우선 사용하고, 아주 작은 raster는 export 전에 다시 그리세요.
multi-resolution ICO를 만듭니다. PNG 파일명만 바꾸면 ICO가 만들어지지 않습니다:
```
magick -background none favicon.svg -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico
```
실제 입력 파일명으로 바꾸고 icon.png와 icon.ico를 같은 위치에 두세요.

macOS에서 앞서 만든 master를 사용해 macOS ICNS를 만듭니다:

mkdir -p icon.iconset
sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
sips -z 32 32 icon.png --out icon.iconset/[email protected]
sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
sips -z 64 64 icon.png --out icon.iconset/[email protected]
sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
sips -z 256 256 icon.png --out icon.iconset/[email protected]
sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
sips -z 512 512 icon.png --out icon.iconset/[email protected]
sips -z 512 512 icon.png --out icon.iconset/icon_512x512.png
cp icon.png icon.iconset/[email protected]
iconutil -c icns icon.iconset -o icon.icns

이 과정으로 native ICNS container가 만들어집니다.

electron-builder.yml에서 각 asset을 지정해 electron-builder가 참조하도록 설정합니다:
```
win:
  icon: build/icon.ico
mac:
  icon: build/icon.icns
linux:
  icon: build/icon.png
```
세 파일을 모두 build/에 복사하세요. npx electron-builder를 실행한 뒤 해당 플랫폼의 package를 확인하세요.

자주 부딪히는 문제

브라우저 favicon만 사용하는 경우. 탭에 표시되는 favicon은 bundle icon을 대신할 수 없습니다. 디자인 측면의 차이는 Favicon and App Icon Difference에서 확인하세요.
PNG의 확장자만 ICO로 바꾸는 경우. 확장자만 변경해서는 multi-size container가 만들어지지 않습니다. 앞서 설명한 변환 명령을 사용하세요.
crop하면서 mark가 잘리는 경우. 중요한 형태는 가장자리에서 멀리 두세요. 가장 작은 크기로 rendering했을 때도 확인해야 합니다. Native icon은 full logo보다 단순한 artwork가 필요합니다.
path가 서로 맞지 않는 경우. YAML path는 project configuration을 기준으로 한 상대 경로이며, Linux path는 대소문자를 구분합니다. build 전에 각 file이 존재하는지 확인하세요.

결론

favicon을 source artwork로 사용하고, 플랫폼별 native container를 export한 다음, packaging tool이 각 application bundle에 올바른 icon을 배치하도록 하세요. Mzu favicondl은 favicon-to-PNG 변환과 ICO 준비를 지원하므로, 깔끔한 mark와 재현 가능한 Electron build에 집중할 수 있습니다.

사전 준비 사항

favicon 파일로 Electron 앱 아이콘 만들기

자주 부딪히는 문제

결론

favicon으로 Electron 네이티브 아이콘 만들기