15 May 2014

blog it // iPhone home screen favicon icon

I've got a tutorial for you today which I'm sure all bloggers will be able to use as I never see them
So you know how to make a favicon for your blog....but it doesn't come up if you bookmark it on an iPhone home screen
....and yes! it is possible, and I'm here to show you how!

start by making your favicon in photoshop or image editor sized 152 px square and upload it to somewhere like photo bucket
tip // don't make the background white because it turns black
find the direct image link for the uploaded image
photobucket has the image link on the side of the image. You want the one called 'direct link'
example //
                                                                                                              ^^ note that it ends in .jpg or .png

and now to the code....its so simple!!!

<link href='IMAGE LINK GOES HERE' sizes='152x152'/><link href='IMAGE LINK GOES HERE' rel='apple-touch-icon' sizes='76x76'/> <link href='IMAGE LINK GOES HERE' rel='apple-touch-icon' sizes='120x120'/><link href='IMAGE LINK GOES HERE' rel='apple-touch-icon' sizes='60x60'/>

add your direct image code into 'IMAGE LINK GOES HERE' and it's set to go
in blogger > blog > template > edit HTML
 + F > search for code  <b:skin> 
paste the above (^^) code directly above <b:skin> 

.....and you are done!
told you it was easy as
now you can save your blog onto your phone screen and have a pretty little favicon for it!



  1. I am definitely going to do this! I have always wondered how they add them in. Thank you for this tutorial, it is really helpful.

    x Cory

  2. Thanks for the tutorial, but I'm not sure how to find . If you could tell me, that would be great!

    1. Find what? Sorry I do not understand xx

    2. Oh, for some reason, it isn't showing up, even when it was there when I published it! I'm not sure how to find

    3. Ok, so sometimes it takes awhile to work but if you added the code correctly and have a direct image link then it should definitely work.

  3. How do you make a favicon for your blog on the web? Thanks!

    1. it will do that as well!!! You will get a favicon everywhere

  4. I know this is nothing about the post, but where did you get your iphone background picture from, it looks really cool? xx

    1. Thank you xx the iphone background is a photo that my dad took of our pool!! X

  5. I put it in, and this error came up :( Error parsing XML, line 13, column 101: Element type "link" must be followed by either attribute specifications, ">" or "/>". Idk what I did wrong...

    1. Hi, I just trialled it on a different blog of mine and it worked perfectly.
      from what the error said it looked like you might have left off the /> at the end.
      let me know if you have anymore problems
      x harri

    2. the exact same thing happened to me??

    3. I'm sorry but it is working for some and not for everyone. Make sure you have all parts of the code into the code and in the right place

  6. Hey Harri! Thx for amaze post! It totally worked for me! Thx!

  7. Say whaat? This is soo cute

    Xx Barbora

  8. Can the background be transparent?


Thank you for taking the time to write a comment. I read everyone and try to reply as soon as possible so check back. Hope you enjoyed this post x Harri