How to create an app icon - Carrie Loves blog

Did you know you can give your blog its very own app icon for iPhones and iPads? It only takes a few minutes and it makes your blog look really professional & important when it’s saved on a user’s home screen.

Above is my iPhone’s home screen, you can see that I created an icon for my blog, my design site and my blog friend’s Pink & Polka Dot and sealaura blogs, too.

Without an app icon, if you bookmark a blog on your iPhone or iPad you’re left with an ugly screenshot of the blog all smooshed into the little rounded square. But, by adding an image and/or one line of code to your site’s HTML you can have a fantastic icon that represents you. It’s very much like a favicon or social media icon, something that is useful & unique to just your blog.

So, how do you do it?

Design Your Favicon

Well, for starters you’re going to want to create your icon, I started with a 512px x 512px square set at 72dpi.

In my opinion using the k.i.s.s. rule is key – the more simple you keep it the better off you are. If you put too much on that little icon no one is going to know what the heck it is. Use the colors from your blog’s design, if your blog’s title is too long consider using initials, and/or a little graphic that is unique to your blog. Basically, you want to be as recognizable as possible so keep everything in the same.

Save your image either as a .PNG file for transparent backgrounds, or a .JPG file for non-transparent backgrounds.

nerd diy app icon glossy effects

Next, to generate the icon(s) I use Real Favicon Generator. Submit/Upload your image to the site. It will display how your icon will look on different devices, you can scroll through these setting and adjust accordingly. When you’re satisfied with how your icon will look click on the button “Generate your Favicons and HTML code”.

Download the Favicon package and save it to your desktop. Extract the files from this .zip file.

And, copy the HTML code.

Blogger

If you’re using Blogger, then Upload the images* to a file sharing site, I used Photobucket which is free, so that you will have access to the image’s URL. Insert the code below in between <head> and </head>, I usually put it right after the <head>.

The only images you’ll need to upload are the apple-touch-icon.png, favicon-32×32.png, and favicon-16×16.png.

WordPress

Drag & drop all of the files from the extracted .zip file into your root directory of your domain – I use FileZilla to do this.

And, paste the HTML code into the <head> section of your site.

 

11 Responses

  1. This did not want to work for me when I was using the “precomposed” version of the code, so I switched to the ”apple-touch-icon” version. Again, it seemed like it didn’t want to work so I exited out of my editor…but when I picked up my phone to bookmark my site, it worked! I guess technology is funny like that.

    P.S. The ”apple-touch-icon” version didn’t give me a glossy icon.

    Thanks for the tutorial!

  2. I see a lot of interesting content on your blog. You
    have to spend a lot of time writing, i know how to save you
    a lot of time, there is a tool that creates unique, SEO friendly posts in couple
    of minutes, just type in google – k2 unlimited
    content

  3. Works like a charm, thanks!

    Blogger people: if you are struggling, that’s because we need to change the quotes ” by ” everytime there’s one. Otherwise Blogger can’t recognize the proper link.
    I had the same error, changed it and it worked!

    Thanks Carrie

  4. My brother recommended I might like this website. He was entirely right.

    This post actually made my day. You cann’t imagine just how much
    time I had spent for this info! Thanks!

  5. I love the idea of doing this and I have gone through all of the steps, but where is the tag? I have my own personal domain on WordPress by the way. I just don’t know where the tag is.

    Thank you
    Kirsty

Comments are closed.