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...

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.

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...

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.

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