• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
  • About
  • Contact
  • Subscribe
  • Advertise
methodshop

methodshop

tech news, reviews & how to's

  • Trending
  • Latest
  • Tech
    • Apps
    • Internet
    • Software
    • Security
    • Games
    • Advertising
  • Life
    • Entertainment
    • TV & Film
    • Music
    • Health & Science
    • Family
    • Social Media
    • Food
    • Style
  • Learn
    • Tutorials
    • Reviews
    • News
      • Business
      • Crime
      • Politics
  • Fun
    • Featured
    • Humor
    • Holiday

Home : DIY & Tutorials : How To Make Your Website an App Icon on Your iPad, iPod Touch or iPhone

How To Make Your Website an App Icon on Your iPad, iPod Touch or iPhone

February 20, 2012 by jayfrankwilson
FacebookTweetPinLinkedIn

MethodshopIf you are in sales and marketing, or run a website, then you’ll love this trick. Ever since Apple iOS 1.1.3, users have been able to add Home Screen Bookmarks to their iOS devices, including the iPad, iPhone and iPod Touch. These bookmarks look just like Apple App icons and allow you to pull up a page on your website the same way you would open an Apple iOS app.

Pretty cool right? It gets better! You can even customize the icon with a picture or logo. You can see an example of a MethodShop app icon in the image on the right (4th row, 4th column). This Home Screen Bookmark opens up https://methodshop.com when you tap on it.

Creating a custom bookmark icon is a great idea if you find yourself showing off your website in meetings or at conferences to potential clients and business partners. In this tutorial, we’ll first show you how to create a Home Screen Bookmark, then we’ll walk through the steps required to customize it.

 

01) Pull up your website using Apple’s Safari web browser on your iPhone, iPod Touch or iPad. Then tap on the little icon in the middle of the box with an arrow coming out of it [pictured below].

How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]

 

02) A screen with a bunch of buttons will appear including: Add Bookmark, Add to Reading List, Add to Home Screen, Mail Link to this Page, Tweet and Print. Tap on Add to Home Screen button.

Photo.png

 

03) A crappy screengrab will automatically be added as your icon image and you’ll be asked to type in a name for your bookmark. We suggest keeping the name short and sweet. If you’re happy with your crappy screengrab icon, then congrats! You’re done. Have a nice day. But if you think your screengrab icon looks like garbage and you want to make a better or custom icon, then keep reading…

How To Add An Icon To Your Iphone'S Home Screen

 

How To Make An Ipad Or Iphone App Icon That Opens Your Website [Tutorial]04) Here’s a little trick on how to customize your bookmark icon. Create a 57×57 pixel PNG file of your, name it “apple-touch-icon.png” and then upload it to the root directory folder of your website. As long as this file is on your web server, then any iOS device (iPad, iPhone or iPod Touch) will use this image as its app icon. You of course will need FTP access to your web server in order to upload this PNG file. Feel free to forward this tutorial to your creative and IT teams if they have any questions.

How To Customize Your Website Bookmark For Ios Devices

Also, here’s a layered TIF file that you can use as a template in Adobe Photoshop or GIMP (free) to make your 57×57 PNG bookmark icon.

How To Make An Ipad Or Iphone App Icon That Opens Your Website [Tutorial]

 05) If your server admins won’t allow you to add the “apple-touch-icon.png” file to the root level of your web server, then you can ask them to add this line of code to your site template. This code will tell Apple iOS devices where they can find the bookmark image elsewhere on your server.

<link rel=”apple-touch-icon” href=”https://methodshop.com/images/ios-icon.png” />

06) Once the “apple-touch-icon.png” is uploaded, then you can repeat the steps above and re-add your bookmark to your iOS device. The final result should look something like this:

How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]

07) That’s it! Congrats! Go grab yourself a beer (and us one too!)

Related Articles
  • How To Save Your iPod or iPhone from a Toilet [tutorial] (methodshop.com)
  • iPad Game: Game for Cats (methodshop.com)
  • Kid Slaps Brother with His iPad (methodshop.com)
  • How To Download Discontinued iPod Click Wheel Games [tutorial] (methodshop.com)
Minted Methodshop


FacebookTweetPinLinkedIn
Category: DIY & Tutorials, Software Tag: Apple, AppStore, Favicon, Home Screen Bookmark, iOS, iPad, iPhone, ipod touch, Mobile, Safari
Previous Post:5 Reasons to Use MySpace Music Player
Next Post:How To Rip Adele’s Music Videos off YouTube and Convert Them for iTunesAdele

Reader Interactions

Comments

  1. Kingsley Ryan

    March 7, 2013 at 6:50 AM

    Amazing, so easy to do. Fantastic. Thank you.

  2. Luis Estrella

    November 6, 2012 at 1:56 AM

    WOW!!
    It really works
    Do you know the same trick but for android?

Leave a Reply

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

Sidebar

Popular Posts

  • Job Automation Using ChatGPT Could Make These Jobs Obsolete - Is Your Job On This List?Job Automation Using ChatGPT Could Make These Jobs Obsolete – Is Your Job On…
  • 18 Weird Facts About Sea-Monkeys You Won't Believe Are True, Including Their Connection To The Ku Klux Klan18 Weird Facts About Sea-Monkeys You Won’t Believe Are True, Including Their…
  • 7 Pictures Of Naked People Captured By Google's Cameras7 Pictures Of Naked People Captured By Google’s Cameras
  • Top 200 Nielsen DMA Rankings (2023) – Full ListTop 200 Nielsen DMA Rankings (2023) – Full List
  • The Surprising Story Behind The NBC ChimesThe Surprising Story Behind The NBC Chimes
  • 20 Famous People Who Are Members Of The Sleepless Elite20 Famous People Who Are Members Of The Sleepless Elite
  • How To Change The Default LG TV Home Screen To Live TVHow To Change The Default LG TV Home Screen To Live TV
  • The Best Caddyshack Quotes: 30 Famous Caddyshack Quotes That'll Make You LaughThe Best Caddyshack Quotes: 30 Famous Caddyshack Quotes That’ll Make You Laugh
  • Is Your Hatch Restore Already Registered? Here's How To Fix It And Unregister A Hatch Restore.Is Your Hatch Restore Already Registered? Here’s How To Fix It And…
  • 40 Of Bill Murray's Best Groundhog Day Quotes40 Of Bill Murray’s Best Groundhog Day Quotes

Categories

Dr. Martin Luther King, Jr.

25 Inspirational Dr. Martin Luther King Jr. Quotes

Famous Dr. Martin Luther King Jr. quotes about education, love, equality, hope, freedom, religion, and activism.

Robot Rabbit - Robot Religion - Jewish Robot

Is Robot Religion The Next Phase Of The Artificial Intelligence Evolution?

A Rabbi shocked his New York synagogue when he confessed that his sermon was written by the ChatGPT chatbot. Despite initial shock, the congregation was impressed by the chatbot’s ability to deliver a thoughtful message. This sparked a discussion about the intersection of technology and Robot Religion and AI. Is spirituality part of the Artificial Intelligence evolution?

Recent Posts

  • Is Robot Religion The Next Phase Of The Artificial Intelligence Evolution?
  • RIP: Remembering The Tech That Died In 2022
  • 25 Inspirational Dr. Martin Luther King Jr. Quotes
  • Job Automation Using ChatGPT Could Make These Jobs Obsolete – Is Your Job On This List?
  • Unleash the Power Of AI-Generated Music With Riffusion – The Free Web App That Creates Original Tracks From Your Text Prompts

Jump to comments

About

MethodShop’s mission is to entertain, inform, and sometimes gross you out. MethodShop has affiliate relationships, so we may get a small share of the revenue from your purchases. Items are sold by the retailer, not by us. All prices are subject to change.

Latest

Robot Rabbit - Robot Religion - Jewish Robot

Is Robot Religion The Next Phase Of The Artificial Intelligence Evolution?

Tech That Died - Tech Graveyard

RIP: Remembering The Tech That Died In 2022

Follow

  • Facebook
  • Twitter
  • Instagram
  • YouTube
  • Pinterest
MethodShop Animated Zoom Icon
  • About
  • Submit
  • Disclaimer
  • Privacy Policy
  • Contact
  • Subscribe
  • Store

Copyright © 2023 MethodShop · All Rights Reserved · Powered by BizBudding Inc.