How To Create An Apple App Icon For Your Blog

By Frederique Bros
on 21 October 2014

I changed the website design last week. For the readers who don’t know, I worked as web designer for over 10 years before starting Women love Tech, this is why I love so much technology. Coming back to the website new look, this site is filled with the latest technology features.

Don’t worry I won’t explained you the site’s backend – the only thing you need to know the site is easier to browse, wider and I hope Women Love Tech’s site is tasteful.

Anyway I’ve just created an Apple icon for the site. In this article I explain how to create an Apple iPhone or iPad app icon for your blog.

How To Create An Apple App Icon For Your Blog

First, you need to browse Women Love Tech website in your phone or tablet or both – it work also for Windows 8.

– Type the website web address in your browser – women love tech

– Click enter

– On iPad or iPhone, click on the add bookmark symbol (the little square symbol with an arrow)

– On the drop down click on ‘Add to Home Screen’

– Then click Add, done.

– Check now you home screen and you can see the icon, and unfortunately Women Love Tech is a too long, so I changed to WLT.

– Now you have Women Love Tech app icon, you can just click on it and it will take you straight to the website – easy and done in 2 minutes!

Sorry for the photos quality but taking pictures of a screen is not ideal.

Repeat the same process for you favourite websites

This process to add an app icon into your home screen is not only for Women Love Tech. You can repeat the same process for all of your favourite websites – if the website you love don’t have an icon, you will see the homepage of the site inside of the icon. Fun right?

How to Create Your Own From Scratch

– The first step is creating an image. To support the newest high resolution iPhone and iPad you’ll want to create several different sized images (The device will take the nearest size larger than it’s default size if you don’t have them all). You can save your images as PNGs to any directory on your site.

With iOS 8 you’ll just need to create a square icon and it will round the edges for you.

– add this code to your website, this should be added to your header.php file.

(WordPress Appearance > Editor/header.php)

Here’s the code you can copy

wp-content/themes/yourtemplatename/images/icon.png” rel=”apple-touch-icon” />

wp-content/themes/yourtemplatename/images/icon.png” rel=”apple-touch-icon” sizes=”76×76″ />

wp-content/themes/yourtemplatename/images/icon.png” rel=”apple-touch-icon” sizes=”120×120″ />

wp-content/themes/yourtemplatename/images/icon.png” rel=”apple-touch-icon” sizes=”152×152″ />

Note that you’ll only need some of the icons represented in these templates unless you’re releasing an app in the App Store.

Photos: mine

If you don’t understand the instructions, please leave a comment and I will help you. Thank you.

Related News


More WLT News