How to Make an App Icon for Your Blog - writing in red lipstick.

How to Make an App Icon for Your Blog

 

Have you ever wished your blog could have its own app? We're coming close! With mobile webpages and all that jazz, we're never more than a click away from our favorite sites. Though I haven't quite figured out how to make my blog into an actual app, I did figure out how to beautify my blog's bookmark and add it to my iPhone's home screen! Stay tuned if you'd like to learn how to do this too!

The first thing you'll need to do is create the image you want to show up as the "app" icon on your phone. This is a 150x150 pixel image that will represent your blog on the home screen.

I chose to use the design elements from my blog's header to keep everything cohesive. Once you have this icon created, use an image hosting site like Postimage to turn your image into a direct link.


Once your image is uploaded to the hosting website, copy the direct link and paste it into this code: 

<link href='http://YOUR LINK HERE.jpg' rel='apple-touch-icon-precomposed'/>

Once you have your code sorted, you've got to add it to your blog HTML. Locate the <head> tag in the code and paste your mobile app icon code among one of the first lines. This page is located under the "template" section of blogger. If you've never been there before, there is a screenshot below to help you out!


Paste your code under the <head> tag, save your template, and you're cooking with gas! Now that you've done that, it's time to test it out and take a peek at your new app icon in use!


 

First things first, visit your blog in the Safari app. Then, press the "share button" which is the square with an arrow pointing out of it, found at the bottom of the page. After that, press the "Add to Home Screen" button.


 

Then, you should see your icon on the "Add to Home" page. Name it whatever you like! I used my blog's shorthand name "WiRL" because Writing in Red Lipstick has too many letters to show up under my app icon. Click the Add button and you've created a mobile shortcut for your blog! You did it!

Feel free to add Writing in Red Lipstick to your home screen and share this post if you found it useful! I'd love to see your blog icons, so tweet me a screenshot (@olivineeyes) when you're finished!

You can find me on Bloglovin' // Instagram //  Twitter // Pinterest // Facebook

What other tutorials would you like to see?
What are your favorite apps?

2 comments

  1. Thank you so much for this. I didn't even know this was possible. Definitely doing this! Thank you! xx

    Rebecca
    rebeccamariee.blogspot.com

    ReplyDelete
  2. Firstly, I didn't even realise you could bookmark web pages to the home screen... thanks for this, I had no idea you could customise an icon for the blog!

    ReplyDelete