Make file icons for a particular application (Emacs)

I’m doing this for Emacs, but the process can apply to any application. Also this is mainly for macOS since it relate file icons to a default application, rather than a systemwise register like what Windows does.

Template file

First you need a “template” file, I use a svg file because it can be edited by a text editor. That makes scripting really easy.

Here is the template, I skip the photoshop part since it’s not related.

The strange long string what script will replae with specific file extensions. To have the string always centered, you need to edit the svg file.

So when you convert png file to svg, it should look like this.

<!-- some meta data -->
<svg>
<image id="_image1" width="1024" height="1024" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAEAAAQBCAYAAABbg5MYAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAACA
AElEQVR42uz9eZgkV3nni78RuVdl1trV+6putfbFgDAgbGzANthjjBeYsRg8GDwsBnGxwQuWAQnZ
j8djxvuFwfObmfvc+3t8Z+4w9p17bQzGrGIMAhmQkAQSanWr971rXzIzIu4fWZF18tR7tojIrMyq
...
...
...
70dPKiMjzh6R1fl+z3veQwQAAAAAAAAAAAAAAAAAAAAAAACAzYO30Q0AQALPJABgUIk2ugEAAAAA"/>
</svg>

To add a string:

<!-- some meta data -->
<svg>
<use id="image0" xlink:href="#_image1" x="0" y="0" width="1024px" height="1024px"/>
<text text-anchor="middle" x="50%" y="89%" style="font-family:'SFProText-Regular',
'SF Pro Text';font-size:130px;fill:rgb(126,130,132);">STRINGTOREPLACE21145</text>
<defs>
<image id="_image1" width="1024" height="1024" x="0" y="0"
</defs>
<svg>

Here <use> “uses” a define object, in this case the image objec below inside <defs> tags. text-anchor“middle”= keeps the text centered.

Script

Now I have the template. A script is needed to make it into many icns files.

Fist I wrote a python script to put each extension into to svg file. It also modifies a Info.plist to point each file type to my icon’s path.

Here is the link to the python script: https://github.com/casouri/emacs-file-icon/blob/master/src/make-png.py

After a bunch of svg files are generated, I need to make them into icns files, At first I tried to simply convert them with imagemagick, then I wasted hours to figure out why the heck my icons are show showing up.

Turns out my icns file are not compliant. This article gave me some clue. Apple icons need to have 10 sizes.

The workflow of each png file is:

png --> convert to 10 sizes and pack into a iconset file --> convert to icns file

The shell script is png-to-icon.sh. This script calls make-iconset.sh to make a iconset for each png. Then for each iconset it uses icnsutil to convert the iconset to a icns file.

Ok, in the end, I ran the script and get a buch of icns files with a patched Info.plist. I copy then into /Applications/Emacs.app/Contents/Resources and /Applications/Emacs.app/Contents/Info.plist.

Done.

Happy折腾 :-)