Introduction: IPhone/iPad Web Icon for Your Site

Picture of IPhone/iPad Web Icon for Your Site

Have a website that needs a personalized web icon for iPhones or iPads? You can make them with no coding experience. The first picture is the "before" and the second picture is the "after". The method I used worked for my Blogger website on the iPad mini, but it should work for other websites. Unfortunately, I couldn't get it work for my iPhone 5. However, I think I found the problem and I'm waiting to see how it works out. Tell me if it works for you on your device.

Time : 10 minutes

Sources:

https://developer.apple.com/library/ios/documentat...

http://ivomynttinen.com/blog/the-ios-7-design-chea...

Step 1: Make Icons

Picture of Make Icons

First, go to this website: https://makeappicon.com/

Then drag your icon picture close to where the red arrow is. Unfortunately, you can't close the annoying ad so you're going to have to blindly figure out where the right spot is. You should be able to get it after a few tries. If you succeed, you should see a page similar to the second photo. When you get to the next page, keep the tab open.

Step 2: Open Your HTML Editor

Picture of Open Your HTML Editor

Step 3: Copy and Paste Code Into Header

Picture of Copy and Paste Code Into Header

You can just put the code at the end of the header, just as long as it's between the tags.

Get the code here:

https://developer.apple.com/library/ios/documentat...

Step 4: Edit Code

Picture of Edit Code

Don't pay too much attention to the order of the attributes "href=...", "sizes=...", and "rel=..."

Change the sizes attribute so that it matches whatever device you are using on the Dimensions chart. Next, go back to the makeicon tab. Right click on the app icon and "copy image address". Paste it after "href=" and be sure to delete "apple-touch-icon.png". Be sure that the icon image address and the dimensions match the device. I think the problem I had with the iPhone was that I used the iPad icon with the iPhone's dimensions

The third image is a sample of what the html code should look like. Remember to save.

Step 5: Add to Homescreen

Picture of Add to Homescreen

Go on your device and "add to homescreen". You might have to wait a few hours until your icon image changes.

Comments

irishjim68 (author)2016-06-04

As an FYI, in the bottom right corner of the ad, there is (barely visible) a word-link that says "Later". Clicking that will close the ad.

About This Instructable

774views

4favorites

More by Calcgal:IPhone/iPad web icon for your siteOrigami box for Index CardsDrawstring bag with pencil bag
Add instructable to: