App Icon

Question

Level 1

0 points

App Icon

Hey everyone!

I have made an app in Xcode using AppleScript, and for a finishing touch I just really need to know one thing:

How do I create, and apply an image to my Xcode project?

Thank you very very much in advance to anyone who can answer this question in an easy to understand, well described way! 🙂

PS: When you answer please include how to make the image (what image editor is good, how to make it the correct height and width etc.), what file type to save the image as (eg. '.png', '.icns' etc.), how to apply that to my application in Xcode, and finally how to save the app (as a '.app') with that image applied!! Thanks.

iMac, Mac OS X (10.7.5)

Posted on May 1, 2013 2:25 AM

Reply

Answer 1

red_menace

Level 6

17,030 points

May 1, 2013 7:40 AM in response to Jwpackard

There isn't really a handy one-size-fits all approach to making icons. Pretty much any graphics program that can generate a PNG file (with alpha channel) can be used, so pick your favorite. If you are graphically challenged, you could maybe look around the web for something you can convert, but be aware of any copyrights. Take a look at OS X Human Interface Guidelines:Icon Design Guidelines (this is also available in your local Xcode documentation) for guidelines about how to design the icons.

Normally an image is created in a larger size, and scaled down from there - the guidelines also have information about the various sizes and how to bundle them up. Apple used to have an Icon Composer application, but that has disappeared since they started pushing a new icon file layout for their retina displays. You might be able to find a version in an older Xcode installation - version 2.2 will handle 1024x1024, although it doesn't use the new .icns format.

Once you have an icon resource added to your project, it is just a matter of setting the icon file key in your project's Info.plist, and you are good to go.

Reply

Answer 2

Jwpackard Author

Level 1

0 points

May 1, 2013 5:15 PM in response to red_menace

I have an image, the background is transparent, it's 128 by 128... The only problem I'm having is I can't figure out how to add it to my project!! I clicked in my project (on the left side of the screen) and clicked on the Summary tab, and there was some text saying 'App Icon' with an empty box above it. I got my image and dragged it into the empty box, and it added it. Also, over on the left side of the screen where it had the 'Text to Speech.app' that also had the icon I had dragged in next to it. I THOUGHT it was working, but then when I dragged the 'Text to Speech.app' into my computer's Applications folder, it didn't have the icon I had used! Why is this happening, and how can I fix it...?

Reply

Answer 3

red_menace

Level 6

17,030 points

May 1, 2013 5:29 PM in response to Jwpackard

Are you using just an image, or an icns file? If you drag an image, it will be added to the project, but it needs to be converted to an icns file in order to be used as an icon.

Reply

Answer 4

Jwpackard Author

Level 1

0 points

May 1, 2013 8:18 PM in response to red_menace

I'm using an icns file...

Reply

Answer 5

red_menace

Level 6

17,030 points

May 1, 2013 8:25 PM in response to Jwpackard

It works for me, but you might check that the Info.plist file has the name of the icon under the Icon File key, and that the file is getting included in the bundle.

Reply

Answer 6

Jwpackard Author

Level 1

0 points

May 3, 2013 12:19 AM in response to red_menace

Yes, my icons file IS under Info.plist next to the Icon File key... But sorry, I'm a bit confused about what you mean by "that the file is getting included in the bundle"... Would you be able to explain that a bit further? 😉

Reply

Answer 7

Jwpackard Author

Level 1

0 points

May 3, 2013 12:41 AM in response to red_menace

Oh and also, if I add the application to my 'Applications' folder, right click on it and press 'Get Info' then go to another application and 'Get Info', and then click on the application's image (top left) then do Cmd + C, then go back to my application, click on my application's image and to 'Cmd + V' it will change the application's image to the image I copied and pasted. However, if I get my .icns file that I created, copy that and go to my application's 'Get Info' window and try to paste that in it doesn't work... I don't know if that helps, just thought I would let you know.

Reply

Answer 8

red_menace

Level 6

17,030 points

May 3, 2013 7:48 AM in response to Jwpackard

All of your application files are contained in a special kind of folder. This bundle is treated as a singe file by the Finder; you can look into it by right-clicking "Show Package Contents" (a bundle is a kind of package).

The Icon file should be included in the Contents/Resources folder of your application - normally it is copied there when Xcode builds the application, but depending on how you added the file you may need to add it to the Copy Bundle Resources build phase (you can also look there to see what is being copied).

You can copy/paste just about any image from the Get Info window, so it sounds like something isn't set right in your icon. What icon is getting used - the genric application icon?

Reply

Answer 9

Jwpackard Author

Level 1

0 points

May 3, 2013 3:54 PM in response to red_menace

Sorry, but where's the bundle I'm looking for in the Finder? Lol, I'm not sure where to look. Also, it wasn't in the copy bundle resources, but I dragged it in. The icon I am using is 128x128, and it's a .icns! I don't see what could be going wrong... (The background is transparent also) Ps. I downloaded it from a website. Is that a problem?

Reply

Answer 10

red_menace

Level 6

17,030 points

May 3, 2013 4:19 PM in response to Jwpackard

The application bundle is the application - right-click on it (or any other application) to see what is in there. If the icon wasn't listed in the Copy Bundle Resources build phase, then it wasn't being copied into the bundle, which is where the system looks for the icon named in the Info.plist file. Downloading from a website shouldn't be a problem, unless it is not an actual icns file (some of the resources out there are mainly for use with the Get Info window).

Reply

Answer 11

Jwpackard Author

Level 1

0 points

May 4, 2013 3:25 AM in response to red_menace

Okay, I have an idea -- I will just send you some screenshots because I have no idea what's going on... 😕 You might be able to see what's happening a bit easier then 😉

Screenshot 1:

I dragged in the icon below (above 'App Icon') from Finder. It is 128x128 and has .icns at the end!

Screenshot 2:

When I dragged the image from Finder to the box above 'App Icon' it automatically made it appear to the left of the window...

Screenshot 3:

I clicked on the project (to the left of the window), then clicked Build Phases and opened the Copy Bundle Resources section, however my image was not there...

Screenshot 4:

I then addded it by dragging it from the left of the window... (Was that a mistake?)

Screenshot 5:

I then dragged the Application under the Products section to the left of the window into my 'Applications' folder on my computer...

(As you can see, it doesn't have the correct icon...)

Screenshot 6:I right clicked on my Text to Speech application in the 'Applications' folder, and clicked 'Show package contents'. All that was there was a Contents folder, so I opened that. I then got this...

Screenshot 7:

I then opened the Resources folder, because I thought that was the most likely place for the image to be...

The strange thing was, the icon file you see there (GOOD ICON.icns) is an icon I had PREVIOUSLY been using, but not the one I had been using just then!

So, sorry for the long message, but I just thought I should try to explain in lots of detail because I am REALLY stuck with this!! 😟

Reply

Answer 12

red_menace

Level 6

17,030 points

May 4, 2013 6:58 AM in response to Jwpackard

If you click on the built application (in Xcode) and it shows the correct icon, then it should be there (the settings look OK to me) - are you sure that is the right file? In Xcode (4.6.2) on my system (10.8.3), dragging the application from the project navigator pane just creates an alias (if you really move the product out of Xcode the name will turn red). Try right-clicking on the application (in Xcode under Products), select "Show in Finder", then move that file somewhere (like the desktop) using the Finder.

Reply

Answer 13

Jwpackard Author

Level 1

0 points

May 4, 2013 3:24 PM in response to red_menace

I have got Xcode 4.5.2 and my comptuter is 10.7.5 .... The problem is, I can't update my computer any higher! I have tried and it couldn't find any higher updates... I will try updating Xcode anyway, then send another message. By the way, here is a screenshot of what comes up when I click on my application under products...

And when I drag the application from under Products into my 'Applications' folder on my computer, that's what comes up as the icon!! (I mean the ICNS thing, not what it shows to the left of the screen under products next to the name of the application!)

Any ideas...?

Reply

Answer 14

Jwpackard Author

Level 1

0 points

May 4, 2013 4:59 PM in response to red_menace

Okay, I updated Xcode to the same Xcode as you... It doesn't actually seem different! I also did the Show in Finder thing, and it had the ICNS image, like in the screenshot in my previous post!

Reply

Answer 15

red_menace

Level 6

17,030 points

May 4, 2013 5:08 PM in response to Jwpackard

No, they aren't that different - I just posted my versions since I don't normally use a signature.

That is a strange problem, though - even when you click on the icns file it shows the icon. Can you find another known good icon, say from one of the applications such as Safari, and drag it into the project and see if that works?

Reply