MacOS – Custom Finder sidebar icon gets stretched

findergraphicsmacossidebar

Yesterday, I installed and configured Netatalk 3 on my Raspberry Pi in order to be able to mount it as an AFP share. Today I got fed up with how it looked in Finder's sidebar, so I set out to create an icon for it. I then made this (note the pixel-perfectness of the 16×16 version):

16x16, 32x32, and 64x64px versions of my icon

and combined the four resulting files (16×16, 16×16@2x, 32×32, 32×32@2x) using iconutil to get a retina-ready ICNS.
Inside of Finder, the 16×16 version of the icon looks like it got shifted to the side by half a pixel:

The 16x16 version of the icon in Finder's sidebar

Why is that? I double-checked the resolutions of my source icons and those inside the ICNS file and they're all correctly sized.

Best Answer

Turns out that Finder uses 18x18px icons, not 16x16px icons. If you're designing sidebar icons, you'll need to supply these as well, which is impossible because there is literally no tool that'll pack 18x18 images (or their @2x counterparts) into an icns file.

Related Solutions

I can’t remove items from the sidebar in Finder

On Lion, items that cannot be removed from the sidebar are usually listed under "Devices" or "Shared" (there are Snow Leopard counterparts to these as well). If you'd rather not see these items in the sidebar, you can remove them by following these steps.

With Finder focused, visit Finder->Preferences or ⌘, and select the Sidebar tab.
Uncheck items that you don't want shown in the sidebar

enter image description here

MacOS – Change Mac OS X Finder sidebar icons

This isn't an answer but it does add some information. The value associated with the com.apple.LSSharedFileList.TemplateSystemSelector key, 1935819875, is a decimal representation of the file type. In hex, it is 0x73624463, which are the ascii letters 'sbDc'. This file type is described in /System/Library/CoreServices/CoreTypes.bundle/Contents/Info.plist. This is a binary plist that you can convert to xml using plutil -convert xml1 -o Info.plist.xml Info.plist. Looking in the Info.plist.xml file, you can see a dictionary at the top level. Inside this there is a key "CFBundleDocumentTypes" and an array of dictionaries as its value. In this array is a dictionary that contains the following:

<dict>
    <key>CFBundleTypeIconFile</key>
    <string>SidebarDocumentsFolder.icns</string>
    <key>CFBundleTypeName</key>
    <string>Sidebar Documents Folder Icon</string>
    <key>CFBundleTypeOSTypes</key>
    <array>
        <string>sbDc</string>
    </array>
    <key>CFBundleTypeRole</key>
    <string>None</string>
    <key>LSTypeIsPackage</key>
    <false/>
    <key>NSPersistentStoreTypeKey</key>
    <string>Binary</string>
</dict>

An interesting key/value pair in this dictionary is CFBundleTypeIconFile: SidebarDocumentsFolder.icns. This file can be found at /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/SidebarDocumentsFolder.icns and it contains the icons used for document folders.

I would think that changing the com.apple.LSSharedFileList.TemplateSystemSelector value to a different value, or updating the dictionary for 'sbDc' to refer to a different icns file would get you on your way to having custom icons.

Best Answer

Related Solutions

I can’t remove items from the sidebar in Finder

MacOS – Change Mac OS X Finder sidebar icons

Related Question