THE WORDPRESS NEWS CORE
FEATURING WORDPRESS COMMUNITY EXPERTS AND THE WP DAILY ARCHIVES

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!

  • jbrad70

    Added to my home screen, on the coveted first page!

  • http://twitter.com/jasonwhitehorn Jason Whitehorn (@jasonwhitehorn)

    what i want to know is how you only have THREE screens of icons? lol. i feel like such an app horder right now. lol

  • http://www.cambrennan.com Cam Brennan

    Added you guys last night. Keep up the great work.

TOP