How to Add a Customized Icon on iOS Devices
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 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.
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:
<link rel="apple-touch-icon" href="/your_icon.png"/>
Then try adding it to your homescreen yourself:
Done and done. Let us know if you add ours to yours! Appreciate it!