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

18 comments:

  1. closy15 May 2014 at 09:37

    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. Claire Lillian15 May 2014 at 11:50

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

    ReplyDelete
    Replies
    1. Unknown15 May 2014 at 15:31

      Find what? Sorry I do not understand xx

      Delete
    2. Claire Lillian16 May 2014 at 08:12

      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. Unknown16 May 2014 at 08:18

      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. Moriah15 May 2014 at 13:35

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

    ReplyDelete
    Replies
    1. Unknown15 May 2014 at 15:31

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

      Delete
  4. Unknown15 May 2014 at 23:15

    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. Unknown16 May 2014 at 07:03

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

      Delete
  5. Pxlgram18 May 2014 at 03:52

    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. Unknown18 May 2014 at 07:48

      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. Unknown18 May 2014 at 18:07

      the exact same thing happened to me??

      Delete
    3. Unknown21 May 2014 at 09:08

      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. Unknown19 May 2014 at 18:41

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

    ReplyDelete
  7. Barbora25 May 2014 at 00:05

    Say whaat? This is soo cute

    Xx Barbora

    ReplyDelete
  8. M23 June 2014 at 01:48

    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