“All The Word That's Fit To Press.”
A WP Engine
Publication
Feature

How to Add a Customized Icon on iOS Devices

home-screen

As you can see above I’ve added a customized / branded icon on my homescreen on my iPhone 5 – this gives it a much nicer look than a screen capture of the home page when adding it, right?

This is increasingly more important as more and more people are browsing your blog and site with mobile devices and choose to save your homepage right on their device. Give them something attractive to look at, especially if it’s going to sit among some other luminary sites!

Which is why I encourage you to save WP Daily to your homescreen on your iDevice! Go, do that now!

Ok, are you looking to create a branded icon for your blog and website? Sure, not a problem. It’s not that tough at all. Just a few steps and you’ll be done.

1. Create the Icon

The first step is easy – create the icon. I’ve chosen to make it 114px x 114px which will be large enough for retina display devices and it’ll scale down in older models gracefully. Make sure it’s 72dpi as well!

apple-touch-icon-png

Apple will automatically add the glossy look and rounded corners – you won’t have to do that. As you can see, ours is just a square.

2. Upload It

The next step is just uploading it somewhere so that it can be referenced via code. If you’re using WordPress you can just upload it via your media uploader and put it into your library.

icon-wordpress-upload

There she is.

Almost done…

3. Add Icon to Site

All you have to do now is open up your header file (header.php perhaps) and add this one line of code before the closing </head> line:

[code]<link rel="apple-touch-icon" href="/your_icon.png"/>[/code]

That’s it!

Then try adding it to your homescreen yourself:

add-to-home-screen

Done and done. Let us know if you add ours to yours! Appreciate it!

Subscribe to new posts by John Saddington

More WordPress News From Torque:

There are 3 comments

Your email address will not be published. Required fields are marked *

TOP