15 May 2014

blog it // iPhone home screen favicon icon


hello!!
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 //
http://i1339.photobucket.com/albums/blog-design/vanilla-craft/iphone_favicon.jpg
                                                                                                              ^^ 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!



Follow

19 comments:

  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
    http://cranberrydeer.blogspot.com.au/

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

    ReplyDelete
    Replies
    1. Find what? Sorry I do not understand xx

      Delete
    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

      Delete
    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.

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

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

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

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

      Delete
  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...

    ReplyDelete
    Replies
    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

      Delete
    2. the exact same thing happened to me??

      Delete
    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

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

    ReplyDelete
  7. Say whaat? This is soo cute

    Xx Barbora

    ReplyDelete
    Replies
    1. thank you barbora. hope you use it

      Delete
  8. Can the background be transparent?

    ReplyDelete

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