How to Make an iPhone Web Site and Icon

Add to iTunes | Add to YouTube | Add to Google | RSS Feed

Yes, I have an iPhone. If you look closely, you can see my little Chris icon on there. It’s also on my home screen. When I tap it, it opens my blog. When you open my blog on your iPhone, it’s going to look a lot different than it would on a browser. That’s due to a plugin I am running in WordPress.

WP Touch is a plugin that was designed specifically for your iPhone or iPod Touch. What it does it to automagically reformat my blog (or any WP blog), and optimizes it specifically for the iPhone and iPod Touch. It gives it a whole new layout, even, that is designed to just render better on your Apple mobile device. There’s no better way of giving you a better experience than to use WP Touch on a blog that is running WordPress.

As I drill down into the actual content on the home page, I can cascade out and read brief previews. Or, I can dive deeper and go so far as to leave a comment. It loads fast, and it’s clean. It’s a great way of getting content specifically optimized. It even uses Gravatars! There’s even a little search button at the top. Simply tap that, and you’ll be able to run a search through my blog.

How did I get the little Chris icon, you ask? If someone is viewing your website and they press the little plus (+) icon at the bottom in their Safari browser, they can select “add to home screen”. When they do that, the little graphic that is on my web server (or yours) is automatically pulled in when it’s added to their home screen. Even if you don’t have the iPhone or the iPod Touch, you still want to do this. You don’t know who out there in your audience does have one. You want to give them an amazing experience. Just open up your favorite photo editor. You’ll need to create a .png file. The size can vary up to 60×60 pixels. I uploaded mine to my root directory. It’s very important to name it properly: apple-touch-icon.png. That has to be the name, and it has to be in the root directory. This way, the plugin will be able to pull in this icon.

Think of it: you’re doing something simple and free for your audience. If you’re like me, you want to do everything you possibly can in order to keep people coming back for more.

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

15 thoughts on “How to Make an iPhone Web Site and Icon”

  1. Pingback: Useful Habits
  2. I’m replying to this blog on my iPod touch! I need to buy the January update for the iPod touch so I can add the chris pirillo icon onto my home screen : p

  3. Pretty nice, iPhone and iPod Touch are just amazing, I’ll sure try to make my wordpress blog into wpt.

  4. Thats pretty cool man. But I have no idea how to do all that stuff to get the logo on the i phone lol

  5. hey I’m putting a comment on my iPod touch. This is really cool. I want to make an app for chris that’s an chris pirillo chat room app. That would be awesome.

  6. If you have either Safari 3 for Windows or Mac, you can see what the website looks like for Apple mobile devices by activating the Developer tab.

    Windows
    1. “Edit” menu –> select “Preferences” –> “Advanced” Tab
    2. “Show Develop menu in menu bar”
    3. “Develop” menu –> “User Agent” –> “Mobile Safari 1.1.3” (either option should work)

    Mac
    1. “Safari” menu –> select “Preferences” –> “Advanced” tab
    2. “Show Develop menu in menu bar”
    3. “Develop” menu –> “User Agent” –> “Mobile Safari 1.1.3” (either option should work)

Comments are closed.