Change Mac App Icons

By  on  
Mac Book Pro

If you follow me on Twitter, you know that I recently got a new MacBook Pro.  Setting up a new machine is a pornographic euphoric experience:  no app collisions, optimal performance, and a fresh canvas to work with.  The first step is setting up your go-to apps, like an instant messaging client, Twitter client, browsers, and of course, your trusty text editor.  I jumped to Sublime Text 3 and it's been great...except the app's boring, blocky "S" icon.  I couldn't allow my precious new dock to be sullied by such a bland icon so I found another icon I wanted to use;  here's how it put that icon into place.

Updating an App Icon

Navigate the the Applications folder, right-click the app, and select "Show Package Contents".  Continue into the "Contents/Resources" directory and look for a .icns file -- that is likely the application's icon.  Most apps use the AppName.icns convention but not always.  Replace that .icns with your desired .icns file and you're almost done!

Restarting the Dock

To get the new icon to display in the dock, you'll need to restart the dock from the terminal:

killall Dock

The dock will disappear for a moment and then reappear.  If your app was in the dock in the first place, it will be replaced by the new icon.  Success!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Multiple Backgrounds with CSS

    Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came...

  • By
    Introducing MooTools Dotter

    It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...

Discussion

  1. João Machado

    Now you just need to share that ST3 icon ;)

  2. Ngoc Pham

    There’s another way to change the icon without diving into package contents.

    – You got the replacement icon (whatever file type, not neccessarily icns) somewhere, open it with Preview.
    – Cmd + Option + 2 to open Preview’s Thumbnail pane.
    – Select the image in the Thumbnail pane and Cmd + C
    – Use Cmd + I to open the Info panel for the App.
    – You see the small icon at the top left of the Info panel. Click to select and Cmd + V

    That’s it! It might take longer than your method, but it doesn’t require the icon to be with “.icns” extension.

    Cheers!

  3. Thomas

    Always good to know! We always need some simple and useful how-to, and this icon by DesignKode is really refreshing. Thanks for sharing!

  4. Been looking for a new ST3 Icon, and this looks the part.

    One thing worth noting is that this can cause issues with app updates for Mac App Store Apps updating. Not an issue in this case, but worth being aware of.

  5. Jrencz

    Prepare some kind of script because on each update whole .app is replaced

    Try to use Automator – OS X built-in automation tool to build it from pieces of readymade actions or write your own.

    Then you can save it as an application and just run it every time icon is gone

  6. Nathan Querido

    Another, more advanced really awesome way to replace is any app icon, using icon collections (iContainer) is CandyBar by Panic: http://www.panic.com/blog/2012/08/candybar-mountain-lion-and-beyond/ I usually customise all my app icons. Also. lots of great icons here: http://iconfactory.com/freeware/icon?page=1. I love the Flurry icons.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!