Ever wondered how to create app icons for your website? It’s really simple, you just need some basic design skills and a little bit of coding knowledge.

If you use Wordpress, there are several plugins which will do the coding for you.

In addition, if you are looking for a website to download an app icon template, visit: Applypixels.com.

Once you have decided on an icon design, you will need to create several different sizes, which have been copied below for easy reference.

Please note these sizes are updated frequently, therefore please visit the Apple Developer Library for the latest sizes.

Once this is complete, copy the entire code below and place it into the section of your header.php file if you use WordPress or your main application file if you use Ruby on Rails.

If you use WordPress and do not have a child theme installed, you should create one, as future updates to your existing WordPress theme will overwrite any modifications you make to your header.php file. To learn more about creating child themes please click here.


<head>

<!– Apple, Google Icons –>

<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="link-to-image">

<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="link-to-image">

<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="link-to-image">

<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="link-to-image">

<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="link-to-image">

<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="link-to-image">

<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="link-to-image">

<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="link-to-image">

<!-- Chrome has a home screen icon of 192×192. 
If it’s not defined on that size it will take 128×128. -->
<link rel="icon" sizes="192x192" href="link-to-image">
<link rel="icon" sizes="128x128" href="link-to-image">

<!– End Apple, Google Icons –>

</head>
Apple Icon Template

We hope this tutorial was helpful!