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
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    CSS pointer-events

    The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events property is even more JavaScript-like, preventing: click actions from doing...

  • By
    Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement. I recently ran...

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!