Believe it or not, sometimes there’s actually NOT an app for that.
Thankfully, in such cases, Apple has generously provided a “Add to Home Screen” button on my iPhone- a nifty little button that lets me add a shortcut to my favorite websites directly on my home screen. This comes in really handy for those blogs and websites that I like to visit on a regular basis by making them easily accessible…
And still pretty enough to fit in with the real apps.
Well, almost pretty enough.
By default, the iPhone uses a miniature snapshot of the website or blog to create the home screen icon. With detail easily lost and every icon looking extremely similar to the one next to it, that “Add to Home Screen” button quickly starts to look more like a curse than the blessing that it is.
For example, take a look at how my site looks on the iPhone browser:
Pretty and clean, yes? Now, let’s add it to the home screen and see what happens. (To add a site to the home screen or save it as a bookmark, click on the plus sign at the bottom of the screen.)
Ugh. That little generic-looking white square does nothing for me. What about for you? Nothing? Do you hate the thought of your blog looking that plain on someone’s home screen as I do?
Wouldn’t you like your blog’s icon to be something more memorable? Snazzier?
Here’s how to quickly and easily stand out from the crowd with a custom iPhone icon for your blog:
First, open up your favorite graphics/photo-editing program and create a new document that measures 45 x 45px.
Next, make it pretty. Drop in something that will banish the ugh and proudly say, “I am so much more than a generic little square.”
Flatten and save this file in PNG format.
Now upload that baby to your server and add the following bit of code to your blog design somewhere between the <head> and the </head>:
<link rel="apple-touch-icon" href="IMAGE ADDRESS HERE"/>
Be sure that the path to your image is correct! For example, mine, which I uploaded to the main directory of my site, looks something like:
<link rel="apple-touch-icon" href="/rockstar.png"/>
If I hosted it elsewhere, it may look something like:
<link rel="apple-touch-icon" href="http://www.thisisasite.com/rockstar.png"/>
Now the only thing left to do is to delete the plain little icon from before, pull up and refresh the site in the iPhone browser, click that “Add to Home Screen” button one last time, and put those snooty app icons to shame.
Ahhh… much better, if I do say so myself.
Loading ...
Ohh my favorite blog designer, you have done it again. I love it!! Now to do mine, I will have to work on that sometime today!
Let me know when you get it done, and I’ll gladly stick your face/avatar on my home screen.
Ok, that is seriously one of the coolest things I’ve seen for a while. How awesome! Glad you figured out how to take screen shots with your iPhone for that one.
This is really neat! Thanks for sharing. I’m wondering if you might be able to help me figure something out. Ok, for example when you have a google or yahoo tab open you see the little Y! or g on the tab. Do you know what these are called and how to make these? Thanks
Sure thing, honey! That’s called a ‘favicon’. It’s a 16x16px icon- really easy way to make one is the tool at http://tools.dynamicdrive.com/favicon/ . The directions and code example are there as well.
Oh my goodness thank you SOSOSOSO much!!
Web-based wow