Ever go to add a website to your Home Screen in mobile Safari and notice it just looks like a jumbled, unidentifiable mess?
This doesn’t happen too often any more, as most sites have learned how to create a special icon for Home Screen bookmarks on iOS, but every so often, you’ll come across a site that won’t have a custom icon.
When that happens, here’s a quick and easy way to make that Home Screen icon look a bit better.
The way Safari works for sites without a custom icon built into their website code is by taking a screenshot of the web page and slapping that into the icon when you hit Share to Home Screen. That makes for a pretty fugly icon.
The way to fix this is to zoom in to the web page first with a pinch out gesture on the iPad, bringing whatever you want to fill the icon space to the middle of Safari’s screen. That way, when Safari takes a screenshot, it will only capture that zoomed in portion, allowing you to take any smaller image from the actual web site and make that the Home screen icon.
In the screenshot above, for example, I headed over to Pugs.com and hit the Share button. Once I did so, the icon Safari provided was just a shrunken-down image of the whole web page. I canceled the share, and then zoomed in to the picture of the pug in the middle of the page, and hit the Share button again. That way, the icon was an image of that zoomed-in pug (a very cute pug, I might add), instead of a lame web page image.
Excellent tip from the folks at iMore, right?