The icon will appear on iPhone's Home Screen when your visitors of your website bookmark your page as "Add to Home Screen" the icon is similar to App icon. You don't need to round the corner it will automatically done internally.
Related to: iPhone, how to, what is, make, free app, Web Clip, Add to Home Screen, icon, app icon, bookmark safari
Level: Intermediat and Advance Users
Users: Designer, General users, Programmers
Tools: iPhone and internet access
App used: CropForFree, iResize, Photos, Mail, Camera, Safari, Photobucket. (All are Freeware)
Usefulness: Your Visitors will be able to access your website on one click from icon on Home Screen
Pre-Start: Get all App ready...
***All Creating on iPhone***
Step 1: Choose photo or image.
Take photo for new image or Choose image from "Photos" App
Step 2: Using "CropForFree" App to crop image to almost square size.
- Click the button"Images" at the lower left of your screen.
-Browse to select image you want to use as icon.
- Click Crop button next to the "Images" button, if the crop marls at 4 corner to image is not appear on screen.
- Move crop marks at each corner to crop the part of picture you like. Try to make it closer to square as possible.
- You can rotate 90° clockwise or anti-clockwise as necessary.
- Click "Save" to save on camera roll.
Step 3: Use "iResize" App to scale the icon to 129x129 pixels for best result, (although Apple say you can use 57x57 pixels)
- Click "Photos" button on the top-right hand corner To choose image or photo.
- Click "Resize" button on the top-right corner
- In the resize page turn the "Maintain Aspect Ratio" off
- Change the "New Size:" value to H; 129, in W: 129
- Click "Resize an Save"
Step 4: Upload to free website image hosting like PhotoBucket
- Open Photo "Bucket" App, click "My Album" go to your page
- if you don't have photo yet, click "Upload Media" button at the Lower tools bar browse, one you touch the photo upload will begin, else touch on your photo.
- Clock on the "i" button at the lower tools bar left corner.
- URL page will open then touch the code box of Direct, code of image URL or link will be copy in to iPhone clipboard.
Assuming your image URL is:
http://i8888.photobucket.com/albums/abcd/usersname/icon1.png
Your HTML code to insert to your website will be:
Your also can sent the link via email copy and paste by your notbook computer
Step 6: Test by browsing your website in "Safari" App then bookmark by click on "Add to Home Screen" button
Done....Sent from my iPhone
