Sunday, April 3, 2011

A Guide to Creating a Favicon for your Blog



Today I’m going to show you guys how to create a favicon for your blog. Favicons are useful for making your blog more aesthetically pleasing and making it stand out in your readers bookmarks.

This is my favicon (its the heart made out of flowers). This is how it looks in Firefox 4.0

uk beauty blog



Right lets get straight into how to make one.

First of all decide on what you’d like to be your favicon. Some people use the first letter of their site while others use shapes or logos. Just make sure whatever you choose is clear to see even in very small dimensions. Save it as a .png file measuring 16x16 pixels.

Then follow the steps given below. They’re different for Wordpress and Blogger.

Blogger

Go to favicon generator site Dynamic Drive. Upload image to generate the favicon and download it. This will convert it to an .ico file. Upload this .ico file to photo sharing site Picturestack. Do not use flickr or photobucket as they do not support ico files. Copy the link and paste into an app like notepad.

Then log into your blogger dashboard and go to template –> Edit HTML

blogger

Find this line of code near the top.

<title><data:blog.pageTitle/></title>.

Directly underneath this line paste the following code.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    Replace 'favicon.ico' with the url of your favicon (the one you pasted into notepad).

    Then hit save and voila your done. The favicon may not appear immediately depending on the browser but it shouldn’t take long.



    Wordpress

    First of all add add your favicon as a .png to your media gallery (media -> add new)

    Log into your wordpress dashboard and scroll down to plugins –> add new.

    Search for ‘All in One Favicon’. Install and activate it.

    Find the plugin listed under settings and click on it.

    In the fields named ‘backend ico’ and ‘frontend ico’ fill in the url of your favicon image.

    uk beauty blog

    Hit save and your done. With this method your favicon will appear immediately. I hope this little tutorial will be of use to all of you who don’t yet have one. If you have any questions just leave them in the comments and if you use the tutorial to add a favicon let me know so I can check it out.

    38 comments:

    1. Again, this is such an awesome post. Thank you so much for posting this! :) I retweeted this :)

      ReplyDelete
    2. This is great girl! I've been working on a post about this exact topic, but I haven't gotten all of the wordpress information yet. Now I'll just spread the word about your post! :) I'm in the process of changing mine. Not even sure it shows up anywhere right now. :) You know, when I was searching on how to create one I never found information as good as your post all in one place, which is what prompted me to create one. Mine wouldn't have been this good either. ;) Way to go, I know this took time!! :)

      ReplyDelete
    3. Thanks so much for this great tutorial. I was wondering how to make one. I like the idea of using the first letter of the site name, after all they are so small.

      Thanks so much for your nice comment on my site!

      Love,
      Heather 
      http://thestyleconfessions.com/

      ReplyDelete
    4. Very useful post, so glad to see it up for the LALM: Tech roundup! A favicon is one of those oft forgotten about things that adds such a nice touch to websites. Everyone should have one!

      When I create my favicons, I love using this generator: http://tools.dynamicdrive.com/favicon/
      You can upload any image and it will spit out an optimized favicon file for you!

      ReplyDelete
    5. I am going to bookmark this article because I have totally been looking for a tutorial on how to do this! THANK YOU!

      ReplyDelete
    6. Oh boo it didn't work for me :( I'm on blogger and I kept getting an error message.

      ReplyDelete
    7. ok it doesn't let me add code to a comment so i'll update the post with the new code

      ReplyDelete
    8. didn't know how to create this
      great info!

      http://pinklemonincrystal.blogspot.com

      ReplyDelete
    9. Gah, still didn't work, even with the new code! I just keep getting an error message. I must be doing something wrong :\

      ReplyDelete
    10. Thanks for sharing! I never knew how to do this and have always wondered. What program would you suggest for creating the icon, that will give me the correct size and such that I need?

      XO
      Marissa
      http://tastesandstyle.blogspot.com

      ReplyDelete
    11. Excellent techy advice lady!

      ReplyDelete
    12. [...] Fuyume: A Guide To Adding a Favicon To Your Blog [...]

      ReplyDelete
    13. Great article, it was a big help, it just that it doesn't work for me as well, I keep getting error message, something about open element type href?
      Otherwise, great blog! :)
      xoxo, Peppi

      ReplyDelete
    14. try using the code given on the dynamic drive link. I tried it out myself and it worked for me but leia used the code on that site and that worked for her. Very odd! This is why i hate blogger

      ReplyDelete
    15. [...] Fuyume: A Guide To Adding a Favicon To Your Blog [...]

      ReplyDelete
    16. I never knew what they were - love the idea! thanks for showing us how.

      ReplyDelete
    17. I can't get it to work either way :(

      Pooh on blogger.

      ReplyDelete
    18. wait, i think i figured it out! Yay, never mind. :) Silly blogger. :) Thanks for this!!

      ReplyDelete
    19. Thank you for sharing. I was considering to try a favicon, but had absolutely no idea how to start. This is the past for me now.

      ReplyDelete
    20. This is great - am going to make sure I share it with my readers!

      ReplyDelete
    21. [...] Fuyume: A Guide To Adding a Favicon To Your Blog [...]

      ReplyDelete
    22. Great post! I need to start thinking of what kind of image I want to use...

      ReplyDelete
    23. You could do a double SS in a font similar to your blog title :)

      ReplyDelete
    24. [...] A Guide to Creating a Favicon For Your Blog [...]

      ReplyDelete
    25. Unfortunately I don't think you can do this on wordpress.com. I found on the wordpress website that you can only use plugins with privately-hosted blogs and web sites using the WordPress.org software (unless I'm missing something). So those of us using the free blogs through wordpress.com won't be able to create a favicon :( If someone finds that I am wrong, let me know because I would love to have a favicon!

      http://justabirdonawire.wordpress.com/

      ReplyDelete
    26. Thanks so much for this! I have been wondering for ages how that little icon in the browser was called - thanks a lot for telling AND for letting us know how to work it!!

      ReplyDelete
    27. [...] Fuyume: A Guide To Adding a Favicon To Your Blog [...]

      ReplyDelete
    28. Unfortunately, I don't think you can use this if you only have a free blog through wordpress.com. The favicon uses a plugin and I checked on the wordpress.com support page and it says that plugins can only be used with privately-hosted blogs and web sites using the WordPress.org software. That's really too bad. However, if I am mistaken, please let me know, I'd love to have a favicon :)

      https://justabirdonawire.wordpress.com/

      ReplyDelete
    29. Faye thank you so much for posting this. One more easy to understand and apply tech tutorial to help me better brand my blog- you da best!

      ReplyDelete
    30. This is such an awesome post! Unfortunately I keep getting an error about the ' rel '. How can I fix this?

      xx.
      Judy

      ReplyDelete
    31. can you tell me the exact error message you got?

      ReplyDelete
    32. this was the message I got: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
      XML error message: Open quote is expected for attribute "{1}" associated with an element type "rel". "

      Also was curious if my favicon would appear in all browsers or just on firefox?

      Thank you for your help!

      xx.
      Judy

      ReplyDelete
    33. try changing the speechmarks to open ones (") after rel, type and href. I just noticed they're closed speechmarks where they should be open.

      ReplyDelete
    34. This is a fantastic post. I'd changed my favicon through my theme's settings but it wasn't sticking on all all browsers. The plug-in you recommended was sorted it. Thanks!

      ReplyDelete
    35. Congrats!

      I did a post on adding a favicon last year. Favicons make your blog so much more noticeable.

      JTwisdom

      ReplyDelete

    i love comments i check out all your blogs :)