How To Add A Home Screen Icon For Your WordPress Website
So you want to have a home screen icon for your site so when people save your website to their phones and iPads a beautiful little icon displays. Gosh, this is the easiest thing to do and so effective as part of your overall branding.
At the moment, anyone without this icon will have a screenshot of their whole website saved, and you’ll notice that when that screenshot is scaled down to between 57px to 114px then it looks terrible, messy + unpro.
Again, I’m thrilled at how easy this is to do, and you will be too! Now, I hope you didn’t go searching around the net too long to find out how to do this as you’ll end up on a wild goose chase – here is my easy 3 step method (also taking Apple’s Retina Display resolutions into account).
Step 1.
Create a relatively small, square .png file. 120x120px is the way to go if you want it to look good on all devices. If you have no background, know that a transparent background will come up black in iOS so make it white {for example} in your .png file if you don’t want it black. Don’t worry about rounding the corners, Apple will do that automatically and even add the gradient for you as well.
After you’ve created your snazzy little icon, name it “apple-touch-icon.png” {this is very important that you name it exactly as I’ve written}.
Step 2.
Now upload it in your WordPress Website’s root directory (via FTP) into the public_html folder with all of your core WP files.
Step 3.
Well that’s it really! But you just want to test it. Just refresh your safari/web app in your devices and go to your site tap “Add to Home Screen”, viola! You did it!
If, for some reason, you cannot get my tried & tested method to work, and you would rather use a plugin (bear in mind the more plugins you add to your WP site/ the more speed/load deterioration), check out these:
Happy iconing!
