Skip to content

Instantly share code, notes, and snippets.

@pd95
Last active November 21, 2024 09:11
Show Gist options
  • Save pd95/f8afdeb6139d96019bd60b11a70d6367 to your computer and use it in GitHub Desktop.
Save pd95/f8afdeb6139d96019bd60b11a70d6367 to your computer and use it in GitHub Desktop.
A ZSH command file to produce the various PNG files required for iOS and macOS app Icons using `sips` (scriptable image processing system) available on any macOS. The resulting PNGs in the "AppIcons" folder can then be dragged into Xcode's `Assets.xcassets` onto a placeholder for an AppIcon.
#!/bin/zsh
# Shell Script to create all relevant icons from an high resolution artwork
if [ "x$1" != "x" -a -f "$1" ] ; then
INPUT=$1
else
INPUT="Artwork.png"
fi
if [ ! -f "$INPUT" ]; then
echo "Input file not specified"
exit 1
fi
mkdir -p AppIcons
while IFS= read -r line ; do
FILENAME=${line% *}
SIZE=${line#* }
if [ "x$FILENAME" != "x" ] ; then
COMMAND="sips -s format png \"$INPUT\" --resampleHeightWidth $SIZE $SIZE --out \"AppIcons/$FILENAME\""
echo "$COMMAND"
eval "$COMMAND"
else
echo ""
fi
done <<EOF
[email protected] 40
[email protected] 60
[email protected] 29
[email protected] 58
[email protected] 87
[email protected] 80
[email protected] 120
[email protected] 57
[email protected] 114
[email protected] 120
[email protected] 180
[email protected] 20
[email protected] 40
[email protected] 29
[email protected] 58
[email protected] 40
[email protected] 80
[email protected] 76
[email protected] 152
[email protected] 167
[email protected] 1024
[email protected] 16
[email protected] 32
[email protected] 32
[email protected] 64
[email protected] 128
[email protected] 256
[email protected] 256
[email protected] 512
[email protected] 512
[email protected] 1024
EOF
@pd95
Copy link
Author

pd95 commented Mar 11, 2020

This script basically converts the input file (passed as an argument or "Artwork.png" in the current directory) and produces all relevant AppIcon files in the AppIcons directory.

sips -s format png "Artwork.png" --resampleHeightWidth 40 40 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 60 60 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 58 58 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 87 87 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 80 80 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 120 120 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 120 120 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 180 180 --out "AppIcons/[email protected]"

sips -s format png "Artwork.png" --resampleHeightWidth 20 20 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 40 40 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 29 29 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 58 58 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 40 40 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 80 80 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 76 76 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 152 152 --out "AppIcons/[email protected]"
sips -s format png "Artwork.png" --resampleHeightWidth 167 167 --out "AppIcons/[email protected]"

sips -s format png "Artwork.png" --resampleHeightWidth 1024 1024 --out "AppIcons/[email protected]"

@pd95
Copy link
Author

pd95 commented May 25, 2020

Thanks to pilgrim-ivanhoefor sharing his knowledge about the Xcode naming conventions on stack-overflow "What is the correct App Icon (appicon) naming convention for Xcode 9.2?". Now it is finally possible to drag all the icons to Xcodes AppIcon placeholder and they are automatically assigned to the correct placeholder.
AppIcon-Screencapture

@KevinQuisquater
Copy link

KevinQuisquater commented Nov 3, 2020

Thank you so much! I have been looking for such an easy solution for years.

To save time to complete beginners like me: to run this, open Terminal, type sh , drag the .command file into the Terminal (it will paste its path), then drag your .png icon into the Terminal to and tap Enter.

The final command will look like this:

sh {PATH-TO-AppIcons.command} {PATH_TO_YOUR_PNG}

Also, in the file itself, I had to delete the ; at the end of line 16 for the script to run.

There are 3 formats that are asked by Xcode for iPhones that are not here, you can add them to the file too:

[email protected] 29
[email protected] 57
[email protected] 114

Here is the final script without the ; and with all the images formats:

#!/bin/zsh
# Shell Script to create all relevant icons from an high resolution artwork

if [ "x$1" != "x" -a -f "$1" ] ; then
    INPUT=$1
else 
    INPUT="Artwork.png"
fi

if [ ! -f "$INPUT" ]; then
    echo "Input file not specified"
    exit 1
fi
mkdir -p AppIcons

while IFS= read -r line ; do
  FILENAME=${line% *}
  SIZE=${line#* }
  if [ "x$FILENAME" != "x" ] ; then
    COMMAND="sips -s format png \"$INPUT\" --resampleHeightWidth $SIZE $SIZE --out \"AppIcons/$FILENAME\""
    echo "$COMMAND"
    eval "$COMMAND"
  else
    echo ""
  fi
done <<EOF
[email protected] 40
[email protected] 60
[email protected] 29
[email protected] 58
[email protected] 87
[email protected] 80
[email protected] 120
[email protected] 57
[email protected] 114
[email protected] 120
[email protected] 180

[email protected] 20
[email protected] 40
[email protected] 29
[email protected] 58
[email protected] 40
[email protected] 80
[email protected] 76
[email protected] 152
[email protected] 167

[email protected] 1024
EOF

@pd95
Copy link
Author

pd95 commented Nov 4, 2020

Thanks @KevinQuisquater! I've updated my script accordingly, to ensure everybody gets the latest version.

It seems that zsh does not complain about the unnecessary ; I had added. The missing icons you've identified are probably due to my focus on iOS 13 and above. Probably older iOS releases/devices expect even more icon variants...

@ice-cream-coder
Copy link

Thanks for the useful script. I think it's worth noting that when I used the script some of my icons where slightly of center. Resampling is quick approach, but I think I'm going to get better result rendering each on individually for the original art file.
Screen Shot 2021-01-22 at 8 06 19 AM

@pd95
Copy link
Author

pd95 commented Jan 22, 2021

Hi Roy

The result of the script depends on the quality of the input. Either your input image was not square (width = height) or the text was not aligned.
I tried to reproduce the problem myself and got an acceptable quality (see below). None of the icons seems to be misaligned.

App Icons

I created these icons based on an artwork image with dimensions 1024x1024 and the text properly centered.

Best regards
Philipp

@ice-cream-coder
Copy link

Ah, I thought the pixels where shifting from he resampling algorithm used in your script. I checked my 1024pt icon that I ran the script on and the text is actually off center. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment