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.
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.
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.
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.
<link rel="apple-touch-icon" sizes="180x180" href="http://photobucket.com/.../apple-touch-icon.png">
<link rel="icon" type="image/png" href="http://photobucket.com/.../favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="http://photobucket.com/.../favicon-16x16.png" sizes="16x16">
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.