Anna button big

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.

anna site

2. Hit the forward arrow at the bottom of the screen and choose “Add to Home Screen.”

add to home screen

3. It shows you what the button will look like and lets you name it any way you’d like.

edit name

4. Tap “Add” up in the top right corner of your device. Ta-da!

anna button

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.

amazon screen button

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

You might like:

Tagged with:

4 Responses to How to Add a Button to Your Apple Home Screen and Designate the Icon that Represents Your Blog

  1. Susan says:

    Thanks for showing me how to do it! You are now added to my iPhone!

  2. Courtney says:

    Amazon has an app which is why they haven’t created a homepage icon.

    • Betsy says:

      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.

Leave a Reply

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

Set your Twitter account name in your settings to use the TwitterBar Section.