HOW TO CREATE A CUSTOM ISO ICON FOR YOUR BLOG | Kaleidoscope

If you’re anything like me,  you check in on your blog at random times, in random places, just to make sure everything is as it should be. So, chances are you’re checking in from your iPhone.

There’s a simple way to make it super easy to do – and that’s adding your blog as an icon to your iPhone’s home screen. Let’s not just stop there though, let’s add a gorgeous graphic to the icon so that not only is it easy to use, but pretty to look at too!

Here’s how to create a custom iOS icon for your blog:

1. Firstly,  you will want to create your icon graphic. This can be done in a graphics program such as Photoshop or Illustrator, or you can do it through websites such as Canva and Picmonkey. Set the dimension to 152px x 152px and save the final design as a .png file.

TIP: if you want a white background, make sure you add a white square to the back ground as .png files will have a transparent background without this and your design might not look right. Also remember you icon is very small, so keep your design simple.

2. For WordPress users the next step is to install the All in One Favicon plugin.

Go to Settings > All In One Favicon and then, simply upload your .png file to both the Apple Icon Frontend and the Apple Icon Backend. Click Save and you’re done!

For Blogger users it’s a little more complicated, but not too much so. 

Go to Template > Edit HTML and make sure you back up your blog!

Then insert this code into your template immediately after the <head> tag.

 <link rel=”apple-touch-icon-precomposed” href=”http://YourImageDirectUrl.png” />

Make sure you change paste your image URL for the icon in between the quotation marks replacing the YourImageDirectURL.png section. Then click Save,

Sometimes an error message may appear – if it does, simply type the quotation marks in again and save again. Sometimes they don’t copy in correctly and cause issues.

3. Now we need to add the icon to your iPhone’s home screen. Go to your blog or website while using your iPhone.

phone-cover-image-2

When the blog as loaded, tap the square with the arrow icon and choose Add To Home Screen.

phone-cover-image-3

Then you can choose what you want the title under the icon to be. Click save,  and you’re done!

phone-cover-image-4

Simple, right!?

Now you can easily access your blog or website right from your iPhone’s home screen! It’s little tricks like this than can make our busy blogger and business owner lives just that little bit easier!

Amanda Fuller

Founder at Kaleidoscope
Founder of Kaleidoscope - facets of blogging, womanhood and life, Amanda is on a heart-led quest to create a savvy resource for the modern day woman — a one-stop-shop overflowing with real life, been-there-done-that wisdom and curated inspiration.