Learn How to Create Apple iOS Icons for a Website using Sketch3

with 3lue3erry

Hjnxsddrrrqqv05d4tbo?cache=true

Why Create Apple iOS Icons for a Website or Blog?

Adding Apple IOS Icons is a simple way to make your website or app look more professional for Apple Users. When a user goes to your website on the iPhone, iPad, or any safari browser these icons will be keep in the bookmark section and look just like a regular app icon. This can help increase brand recognition and help click-through performance for users on Apple devices.

The graphic design tool we are using to build our icons is Sketch3

What I will Teach You

In this lesson, I will teach you how to quickly create beautiful icons and provide you with a Sketch3 template for creating your own IOS icons. If you’re not familiar with Sketch, don’t worry… This lesson cover every part step-by-step until you are able to export the icons beautiful looking png files.

Let's Do It!

Go ahead and create a new sketch3 project and let’s get started…

Creating the Artboards in their Proper Sizes in Sketch3

We will need to create several different icon sizes that are used on various Apple devices. The sizes we need (in pixels) include 60, 72, 120, 152, and 180. This could change in the future as apple releases new devices, so make sure to read the latest Apple developer guidelines for icons.

  1. Click insert >> artboard
  2. Place the artboard anywhere on the page, then resize it 180x180
  3. Name the artboard “apple-touch-icon–180x180”
  4. Repeat this process for all other sizes 60, 72, 120, 152

Creating a separate artboard for each individual icon will allow us to export them easily when we have finished the design of the icon

Blank Artboards Ready for our Awesome-Looking Icons

Convert?crop=0,37,1592,526
Your artboards in Sketch3 should look like this after following the steps listed above.

Designing a Subtle Apple-Style Icon Background

Now that the artbboards are in place, we need to design the background. The best looking Apple icons use a subtle gradient that is slightly darker at the bottom. You will see this gradient pattern on almost every Apple app icon - because it just looks damn good.

Starting from the 180x180 artboard, follow these steps

  1. Click insert >> shape >> rectangle
  2. Drag a rectangle that covers the entire artboard
  3. Turn off the border on the shape.
  4. Set the radius to 31.58. This is based on Apple formula for icons.
  5. Click on the “Fill Color” button, then choose the gradient pattern. In this example, I am using the color hex code #B2001D on the bottom and #FF6984 on the top.

As you can see, this gives us a really nice, yet subtle, background gradient. This technique can be used with virtually any set of closely matched colors to make professional looking app icons. Remember, it always looks best if you put the darker color on the bottom and the lighter color on top.

Examples of Icons in Sketch3 with Gradients

Ygbx00r2tn6uwfpoqqbe
Here's how your final icons should look, but with your own logo of course.

Finishing Up

Now that the background is in place, you just need to add your logo on top of it. Once you’re happy with the way it looks, the final step is to scale the graphic down each of the different icon sizes.

  1. Select the background rectangle and your logo, then click “arrange >> group”.
  2. Copy these grouped layers and paste them into each of your artboards.
  3. For each artboard, select the layers you pasted, then click the “Scale” button and set the width equal to the artboard’s width.
  4. You should now have a nice little family of icons that will spice up your website for Apple users. To export the icon, just click make exportable >> export .png.

HTML Markup

Finally, let’s add these icons to our website. Within the head tag of your site, include a link tag to point to each one of your icons. This implementation varies greatly depending on your content management system, but this is how the final HTML markup should look.

You will need to add this markup for each icon size: 

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">


See You Next Time!

Good luck and have fun using Sketch3 - it’s awesome! If you want to save some time, make sure to unlock my lesson to download the actual Sketch file used ! Thank you!

Don't forget to download the SKETCH3 template by unlocking my lesson below!!!

Sketch3 Template for Web Application iOS Icons

This Section is Locked!

Unlock this lesson for $5 to view all sections.

Signup and Unlock for $5

Grades

Nobody has graded this lesson yet.

n 0.0%
Technology Graphic Design

  • 1 Unlocks
  • 497 Total Reads
  • 28 minutes Est. Learning Time