Tutorial: Changing the AJ App Icon + Name (on Mac)

Hey Jammers! 

Do you ever get tired of this snow leopard's cold, unsympathetic smile staring back at you as you cry behind your computer late at night?  

I know I have.

...

Ok, so maybe the AJ Classic icon isn't that bad. Snow leopards are very nice. But would you ever wanna change it to something different?

Well, now you can! 

And what's more-- you can change the name of your app, as well! If you're annoyed at the name change from Animal Jam to AJ Classic, OR if you wanna hide the fact that you play AJ for whatever reason, you can easily change the display name to whatever you wish.

This isn't a hack or anything shady-- it's an easy built-in function you can do for any app you want. While this tutorial contains instructions for Mac computers, you can definitely get the same result on Windows. Just with different instructions that I don't know off the top of my head... 

(Here's an article from HowToGeek.com about how to customize application icons in Windows. It's pretty long and I didn't read it all, but it seems to have all the info you might need.)

Now, onto the Mac tutorial!

The actual process of changing the app icon is easy, but some basic editing in Preview may be required. Steps 2 and 3 are an easy editing tutorial.

Step 1: Find your new icon image.

You can turn any image you want into your new app logo– it just has to be square (the width and height of it should be the same length) and it has to be high resolution.

However, you can make any image you want meet those requirements by editing it! I'll tell you how in Steps 2 and 3. The first step is simply to find an image you like staring at more than the snow leopard.

The icons + emotes section of the Animal Jam Archives is a great place to start, because most of those icons already have equal height and width. You could use an emote, you could use the AJ game icon, you could use a transparent PNG of your favorite den item... you could use any image you want! As long as you're okay with editing it so it fits the requirements.

(I'd recommend an image with a transparent background, just because it looks a little neater. But if you want to use a square screenshot of your animal or something, go ahead! This tutorial works for that as well.)

Of course, if you don't wanna go through the trouble of editing your new app icon, here is the image I used in the example above:

I edited it myself so you can just download it and drop this into the icon box at Step 5 and voila! Customized app icon, no editing needed :)

Additionally, here's the gecko plushie I edited for the purpose of this tutorial, so you can use it too, if you wish:

(I'm probably going to come back to this post and add more edited icons as I make them, for your convenience.) 

Step 2: Edit your image in Preview to make it square.

For this example, I'll use an image of the gecko plushie! It definitely isn't square, so we'll make it square. If your image already is square, you can skip this step.

Once your image is downloaded, open it in Preview by clicking on it. Next, click the Markup Toolbar button as circled below:

Once you have the Markup Toolbar open, press Command + A on your keyboard to select your image, then Command + C to copy it. This is important for later.

Next, click the Adjust Size button, as circled below:

As you can see, the width is not the same amount as the height, so it's not square. If you open the Adjust Size panel and the height is the same as the width, you can move on to Step 3. 

In order to make this image square without making it look weird, we need to first make the canvas a large square. Do this by first making sure this little lock is unlocked:

Next, make both the width and height significantly bigger, and both the same. An increase by a couple hundred pixels is fine. For the gecko, I'll change both to 400px. Then, click OK.

Now, your image is bigger and slightly warped looking. No matter-- all we needed from this was a bigger canvas size. On your keyboard, press Command + A, then delete. 

The bigger, warped gecko is now gone, and the canvas is bigger, so press Command + V to bring back our original-sized image!

Now we can crop the image into a closer square. 

To the far left of the window, click the Rectangle Lasso tool (as circled below):

Then, drag your cursor to put a square dotted frame around your image. As you're adjusting its size, on your keyboard hold down both the Option and Shift keys to make sure it ends up a perfect square:

Make sure the square is tight as possible, so your icon doesn't end up too small, and that all parts of your image are as centered as possible within the square frame. When you're happy with it, click the Crop button (as circled above).

If you want, you can also check the Adjust Size window again to make sure the height and the width are the same.

Remember to click Save. Now, your previously un-square image is square enough to become a custom app icon!

Step 3: Edit your image in Preview to make it high-resolution.

This step is a lot faster. 

Like the beginning of Step 2, open your square image in Preview, click the Markup Toolbar button, and click the Adjust Size button to view the details of your image.

Keep the little lock between Width and Height locked, along with 'Scale proportionately' and 'Resample image'.

The only things you need to change are the width/height and the resolution.

I've found that 1300px by 1300px works fine, so I recommend you change the width and height to that. And in all cases, change the resolution to 300:

When your width and height are 1300 and your resolution is 300, click OK.

Now your image is super big! This is a good thing.

Just remember to click File, and then Save. Congratulations– you now have a square, high-resolution image perfect for a custom app icon!

Step 4: Changing the app name (if you want to).

For this little example, I'll change the app name of AJPW on my computer. Just because I don't wanna go back and change my AJ Classic icon again :P

First, open Finder:

In Finder, click 'Applications', which is located on the left sidebar:

In Applications, find your Animal Jam app of choice (or any app, really– this tutorial works for any app you want)

Once you found it, right-click it to bring up a little menu. From that menu, click 'Get Info':

When you click it, something like this should come up:

Under 'Name & Extension', you can easily change the name to whatever you want by changing the text before '.app'. 

Maybe if you're editing the AJ Classic app, you can change the name back to 'Animal Jam' if you're annoyed with the name change instigated by WildWorks. Maybe you wanna confuse yourself and call it 'Photoshop' or 'Calculator' or 'lampshade' or whatever floats your boat. 

For this tutorial, I'll rename AJPW to...

Yep.

All you need to do to apply this change is to close the Get Info section. However, you might need to input an administrator's password, so if it's your parent or guardian's computer and you don't know the password, you might need to ask their permission. 

Step 5: Changing the app icon.

Almost done! Open up your square, high-res image in Preview again:

Then on your keyboard, press the Command + A keys to select your image. After that, press the Command + C keys to copy it.

Now, like in Step 4– open Finder, go to Applications, find your Animal Jam app of choice (or any app you wanna customize), right-click it, and select 'Get Info' from the little menu that pops up.

Once this little window thing appears, click the little icon image, which is circled in the image above. Then on your keyboard, press Command + V to paste in your custom icon. 

This might be instantaneous, or you might need to input an administrator password to make the change. Like in Step 4, if the computer you're using belongs to a parent or guardian and you don't know the administrator password, you might need to ask their permission.

Now, all you gotta do to apply this change is to re-open your AJ app to see...

...it worked! Congratulations, your app icon is now 10x more beautiful :D

To my knowledge, this is just a fun cosmetic change and doesn't impact how the game works, so you don't have to worry C:

I hope you found this tutorial fun! This was probably one of my longer posts. I have no idea how many hours I spent on it... I'm a slow writer.

And if, somehow, you found this post while looking up how to customize your app icons... I hope it works for you, and welcome to my Animal Jam blog X)

See you all in Jamaa, and if you have any questions, feel free to comment below!

~DoomyPanda