- Android: Iconography | Android Developers
- iOS: iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines
在此我是利用 PhoneGap 建立 mobile 專案，預設就有一組 icon，我們只要準備相同解析度的圖片覆蓋過去就可以了
Android 各解析度 icon 分別放置在不同的資料夾底下
- res/drawable/logo.png 96x96
- res/drawable-xhdpi/logo.png 96x96
- res/drawable-hdpi/logo.png 72x72
- res/drawable-mdpi/logo.png 48x48
- res/drawable-ldpi/logo.png 36x36
iOS 擺放 icon 的位置在專案資料夾底下的 {project-name}/Resources/icons/
- icon-72.png 72x72
- icon-72@2x.png 144x144
- icon.png 57x57
- icon@2x.png 114x114
利用 ImageMagick 搭配 shell script 就可以一次轉出所有解析度的 icon
安裝 ImageMagick 目前最新版本 6.8.6-8
$ ./configure --with-png=yes $ make && make install
轉換解析度
$ convert logo-src.png -resize 72x72 logo-72.png
批次轉換 script: convert.sh
#/bin/sh
res=(144 114 96 72 57 48 36)
for i in "${res[@]}"
do
echo "convert icon for ${i}x${i}"
convert logo-src.png -resize ${i}x${i} logo-${i}.png
done
記得 icon 的來源檔案解析度至少要大於144，轉出來才不會糊掉
