If you’re really techie, you might already know about this. You can add a button to the home screen on your iPhone or iPad so you can get directly to your favorite blogs or sites. It’s really just a shortcut button so you don’t have to open Safari first, then go to the site.
Tutorial Part I: How to Add a Button to Your Home Screen
1. Go to Safari and open the website.
2. Hit the forward arrow at the bottom of the screen and choose “Add to Home Screen.”
3. It shows you what the button will look like and lets you name it any way you’d like.
4. Tap “Add” up in the top right corner of your device. Ta-da!
The Anna Nimmity icon looks like an App button. I think it goes along with the look of the other buttons on my screen. If the site owner hasn’t set up their own art for the button, it just takes a screen shot and makes the art out of that. It still works, it just doesn’t look clean on your device, sitting next to all the very simple icons. There are a lot of big companies that haven’t created icons for home screens. You can see in the screen grab below that Amazon hasn’t done it, so their button is just a screen shot. I think it looks awful next to the rest of the icons on my screen. I deleted it right after I got the screen shot for this post.
It’s easy to set up your own button to look much better than a screen grab. Consider it a beautification project. I think it adds to the experience of interacting with your blog. For anyone who likes my blog enough to put my button on their home screen, I want them to smile when they see it. I want it to blend in with their every day life. I don’t want them to feel visually assaulted and then connect the ugliness to my blog every time they see their phone. Here’s how you can choose your own button for the home screens of your fans:
Tutorial Part II: How To Designate a Home Screen Icon For Your Blog
1. Choose or create a simple, square icon that is 114 x 114 pixels, RGB and 72 ppi to represent your site. If you already have a favicon (a 16 x 16 pixel custom icon that shows up in the URL address bar), that would be a good choice. Focus on simple, because the icon will be very small and you want it to be instantly recognizable.
2. Save the icon as a PNG file and name it “apple-touch-icon.png”. Drop this file in the root of your site (where your index.html page or home page is located). Now you have chosen what the button representing your site looks like instead of a screen grab. I hope this tutorial will inspire you to start making the home screen buttons of the world a little easier on the eye! Good luck!
I’m linking up to:
Get Your Craft on Tuesday at Today’s Creative Blog
Thanks for showing me how to do it! You are now added to my iPhone!
I take that as a huge compliment that you added my button to your phone – thank you!
Amazon has an app which is why they haven’t created a homepage icon.
You are right, Amazon does have an app. This post was really aimed at the little guys (like me) who don’t have the budget for an app. I just found it interesting that some companies, even the ones who have an app and an enormous marketing budget, don’t use this easy tool to keep their branding consistent. Some people will still prefer the actual website to the app, so I think it makes sense to acknowledge that your customers consume the digital world in different ways. This is a simple way to do it.