By signing up, you consent to receive email newsletters from me periodically.

Tutorial: How to Create a Custom Favicon for Your Blog

Tutorial: Create a Favicon for your Blog!
Tutorial: Create a Custom Favicon for your Blog!
Tutorial: Create a Favicon for your Blog! @ www.designyourownblog.com

Tutorial: Create a Favicon for your Blog!

This post was updated on 2/11/2015.

Do you have a custom favicon for your blog? You really should. It just adds a finishing touch to your blog branding and design. I still see many blogs and websites that are using the default favicon that comes with their blogging platform or don’t have one at all. So if you’re one of those bloggers without a custom favicon, follow this simple tutorial on how to create a custom favicon and get one step closer to blog design bliss!

First of all, what the heck is a favicon?

I’m glad you asked. Favicon actually means “favorite icon.” It’s used to help visually identify a website in your bookmarks and it’s also that tiny little icon you see next to your site or page name in the browser tabs.
(see image below)

Blogger default favicon | No favicon | Transparent favicon | Square favicon

Blogger default favicon | no favicon | Transparent favicon | Square favicon

A favicon is small and square: only 16 pixels high and 16 pixels wide.

How to Make Your Own Custom Favicon

For this tutorial, I’ll show you the process I used to create my own favicon for DesignYourOwnBlog.com.

1. Create the graphic

Using an image editor like Photoshop,* PS Elements, Pixlr or PicMonkey you want to create a square version of your logo. I took my logo above and cut it up so that it created a square:

Design Your Own lovely Blog square logo

2. Resize it to 16×16 pixels

Now using your image editor, resize the logo to 16 pixels by 16 pixels. This is quite tiny and you’ll notice that my logo doesn’t translate very well in that size: Unreadable for a favicon

Your logo may look just fine and if it does, you can skip ahead to step 4

3. Plan B

If your whole logo, like mine, does not translate well at that small of a size, you have a couple of choices:

  1. Choose a small piece of your logo like an image or icon.
  2. Choose the first letter of your logo or two to three initials. For example if your brand is two words like your name, use the initials. You may be able to fit 3 letters depending on the font you use. But you should use a font that is in your logo if possible.
  3. Create an image you feel reflects the content of your site.

I went with option A because to use “DY” or “DYO” from option B didn’t really make much sense. DYOB would definitely not fit (I tried). I didn’t go with option C either because I thought option A was the best choice for me.

4. Create the icon

I decided to take the circle in my logo because I’ve created a circle theme throughout my blog. My dilemma though was that I couldn’t put the word “lovely” in the circle like it is in my logo because at such a small size, you’d never be able to read it. So what I did was take the first letter of my brand (d) and insert that into the circle using the same font and color as the word “lovely.” This is what I came up with:

designyourownblog.com's favicon - enlarged

Notice that it’s currently at 100×100 pixels in size. I did this so that I could work with the graphic a little more easily. Now let’s see what it looks like at 16×16 and see if it’s readable. Looks like it is: designyourownblog.com's favicon image

Ok, undo the resize (this is important) and then resize it again to 32×32 and save it as a .png, .jpg or .gif. *see next step

5. Background: transparent or not?

Now I could have left the mint area around the circle transparent so that you only see the circle without a box around it, however when the background turns white (like it does when the tab is active in some browsers), then you won’t see the circle at all, just the “d.” So that’s why I decided to leave the mint box around it.

And yes, I did try a border too, but that just made the circle inside the border too small and hence the “d” was unreadable.

You’ll have to play around with yours to see if a colored or transparent background makes sense. As you can see in the first image above, Pinterest’s favicon looks much better with a transparent background so there’s no white box around its logo.

Remember that if you decide to have a transparent background, you’ll want to save your image as a .png file as .jpg’s do not support transparency and .gif’s will probably produce an unfavorable jagged edge around your icon.”

Favicon Showcase

Before we move on, let’s take a look at some nice (and some not-so-nice) favicons for inspiration. Explanations and links are listed in order of appearance.

Favicons using initials:
favicon inspiration with initials

Favicons using transparency:
favicon inspiration with transparency

Favicons without transparency:
favicon inspiration without transparency

These favicons kinda missed the mark:
Links not included to protect the innocent πŸ˜‰
favicons that need some work

  • This circle would have looked so much better on a transparent background
  • This is supposed to be a bird and a beard (from the logo). Can you tell?
  • It’s a photo of….something
  • Part of the cute logo, but at this size it just looks like a pixelated mess
  • This orange dot has nothing to do with any design elements in this blog. Their colors are pink and grey and the design uses triangles throughout, no circles.

6. Generate Your .ico File

Now that you have your 32×32 icon, we have to convert it to an .ico file. We’ll use this favicon generator to create our file. Upload your image and select the checkbox for Merge with a 32×32 desktop icon. This will create two sizes of the favicon but the cool thing is that they are both stored in one file.

You can view a preview of the favicon in the generator. If you’re happy with it, click the Download Favicon button and it will save a file named favicon.ico to your computer.

7. Adding Your Favicon to Your Blog

Depending on which blogging platform you are using, there are several ways to do this:

BLOGGER:
This is easy: In your dashboard, go to Layout. At the top left, click on Edit next to the Favicon box and upload your favicon.ico you just created.

SELF-HOSTED WORDPRESS:
There are two ways to add a favicon to your WordPress blog.

Option A
This is the quick and easy way. Go to Settings > General > Site Icon and upload your favicon.

Option B
For those that don’t want to activate Jetpack, there’s a slightly more complicated way to do it.

Upload your favicon.ico to your site’s main (root) directory and also to your theme’s main folder via FTP. Overwrite any that may already be in there.

Then you’ll need to add a reference to the icon in your site’s <head>. If your theme allows you to add code to the <head> in the Theme Settings, then you can add this code to the Header Scripts:

<link rel="shortcut icon" type="image/x-icon" href="http://www.YOURURL.com/favicon.ico"/> replacing YOURURL with your own domain name.

If your theme does not offer this option, then in your dashboard, go to Appearance > Editor. On the right side, look for the file called header.php. Open it up and look for the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. If it exists, overwrite it with the following code:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Otherwise add that line of code above the </html> tag.

WordPress.com
Follow this link to learn how to do this in a WordPress.com blog: http://en.support.wordpress.com/avatars/blavatars/

Note that even though they say it takes several hours for your favicon to appear, the forums say that it can take several days. Do not keep uploading it over and over or you will create an even longer delay.

Don’t See Your Favicon?

You may not see your icon right away after uploading it. If that’s the case, verify it’s there by typing http://YOURURL.com/favicon.ico in the browser’s location, where YOURURL is your site’s address.
If you still don’t see it, clear your browser’s cache and refresh. If using Safari, you’ll have to reset it.

Summary

When designing your blog, you want to make sure that you don’t leave out the details, even the tiniest ones. It’s really not that difficult to add a favicon and it’s one little thing that shows you’ve thought your design through and that you care about details.

Try not to think too hard about what to use for your favicon image. I mean, don’t stress yourself out about it. Yes, it’s tiny so it needs to be thought out a little bit, but as long as it’s something unique and can be identified with your blog, that’s great. I’m sure there is at least one unique element to your blog that you can create a favicon with, like a heart, a flower, a bird or even a little piece of your logo.

Your Turn

Please let me know in the comments if you need help identifying something to create your favicon with.
Do you have any questions about how to create your icon? Or just have suggestions on how you created yours? Please share with us!

And if you’ve enjoyed this tutorial, please share it by clicking one of the icons below!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

121 Comments

  • Bobbi Emel says:

    Hi Marianne,

    Thanks so much for this informative, step-by-step article! I’ve had my blog for three years and still don’t have a favicon so I’m going to get to work on this!

  • Elizabeth says:

    Great tutorial, thanks!

    Just wanted to add that you can easily upload a favicon to a self-hosted WordPress, simply by installing one of many favicon plugins – e.g. the All In One Favicon. You just upload your image like any other image, and it will do the rest for you! Just in case playing around with the editor becomes a little too daunting πŸ™‚

    • Marianne says:

      Elizabeth,
      You are right, of course there would be a plugin for that! πŸ™‚ I guess I like to avoid using plugins (for page bloat) when it’s a simple code change, but you are correct in that many people will no doubt be a little daunted by making any code changes at all!

      Thank you for the suggestion!

  • Great tutorial, Marianne!

    Sharing with my peeps… now!

  • Sounds really cool. Most of the newbie web designers or blog owners don’t how to create a Favicon, this tutorial would be a valuable resource for them, thank you!

  • Nicholle says:

    Hi,
    I created my favicon using your amazing tutorial! Thank you so much! I am unable to see it on my blog though. I put in the URL you have listed about and was able to see it butt it is still currently not showing on my blog. Any ideas on how I can remedy this?

    Thank you again!
    Nicholle

  • Kristal says:

    Thank you for the tutorial! I also found that wordpress has a useful plugin. My theme did not support adding the favicon manually so I opted for this.
    http://www.techotronic.de/plugins/all-in-one-favicon/

    • Marianne says:

      Hi Kristal!
      Thank you for sharing this plugin! For some funny reason it didn’t occur to me to look for plugins because I’ve always done it manually myself, but it’s nice to know that you can easily skip some of these steps!

      Thanks again for visiting and subscribing! Cheers!

  • Amanda says:

    Thanks! Great post! I had used a plug-in. I didn’t realize it was so easy to add it manually. I think I’ll go and change that. I’m trying to keep the plug-ins to a minimum. Thanks again!

    • Marianne says:

      Hi Amanda,
      I do too which is why it didn’t occur to me to look for plugins to suggest at first. But you got to pick your battles and if it’s easier for some to use a plugin, then I think that’s great too!

  • gale says:

    Hi Marianne,
    Great information. Do you make these for others? I would love to chat with you πŸ™‚

  • Caroline says:

    Hope you don’t mind me posting this Marianne. I was passing and spotted the question.
    Here’s a video we did showing exactly how to upload the Favicon to a WordPress.org site.
    Like you, we don’t like adding any more extra plugins than ‘necessary’ but recognise the whole darn Editor in WP is scary. Hope this helps.
    http://www.youtube.com/watch?v=QGZL7Irm8HI

  • Elle says:

    Hi Marianne

    I just ran through this tutorial, great, thanks. I did notice a couple of mistakes in the self-hosted WordPress section though. In the line below, “favicon.png” should actually be “favicon.ico”, and the closing php tag ?/> should have the slash removed and just be ?>.
    Ie
    <link rel="shortcut icon" href="/favicon.png” />
    should be
    <link rel="shortcut icon" href="/favicon.ico” />
    Thanks!

  • I was just searching up what size I should make my site’s favicon and I’m so happy I stumbled across your very informative site! Great stuff. πŸ˜€

    • Marianne says:

      Awesome Mary! Your favicon looks great! I can see you’re just getting started and I already love your header! Can’t wait to see what you do next πŸ™‚

  • Fantastic and easy tutorial. Thanks!! I followed everything step-by-step and I still cannot see mine πŸ™ Hmmm… not sure what to do? I searched what you suggested above and got an error message but then I go in to Blogger and it shows me that my favicon is saved? So confusing…. I will keep trying.

    • Marianne says:

      Hi Kelly, I just went to your blog and I can see it! I think you’re having a caching issue. Try looking at your blog using a different browser.

  • Kin Wei says:

    Nope,still can’t see my favicon appearing..

  • Hi Marianne,
    Thank you so much for this detalied explanation. I find favicons give a professional as well as a personal touch to any blog. Ihad mine done a while ago. Would you be kind enough to let me know if itis good enough for my blog? Thank you so much πŸ™‚

  • Sandy says:

    Hi Marianne, awesome blog you have here. Will have many questions for you regarding my blog design ;p

    As for the favicon, It might be helpful to include where exactly is the ‘root directory’ as I had absolutely no clue where was it when i wanted to upload mine and all i could get from the web was ‘you can’t access it’… Luckily for me, after much exploring and expert advise from one of the group members, there actually has a place in my theme to just add. Phew! Thank goodness.

    As for the checking link: http://YOURURL.com/favicon.ico , it doesn’t show anything when i tested. even with other existing ones. Mind if you double check again? Just in case i wasn’t doing it correctly.

    Will catch on your other posts soon. Privilege to be here. To your Abundance! πŸ™‚

    • Marianne says:

      Hi Sandy, thanks for the feedback! I guess I shouldn’t assume everyone knows the correct web terminology, so thank you for letting me know. I’ll add a description of the root folder to the tutorial.

      I just looked at your blog and I see your favicon, a butterfly! Great job! Sometimes they take a while to show up for some reason. If I remember correctly I couldn’t see mine for at least a day, not sure why that is.

      Thanks so much for stopping by and checking it out!

  • Keyur Amin says:

    Wow, great tutorial on creating favicon for a blog. Awesome.

    And yeah, you really have a nice blog design too. Cheers.

  • Roopini says:

    Hi Marianne,
    Wow, very clear tutorial. Now I have a pretty favicon for my blog. Thank you πŸ™‚

  • Jamee says:

    UGH finally! I have been working at this favicon business for days before I stumbled upon your tutorial. Obviously I am no web design professional and you totally saved my brain from crashing. Thank you.

    • Marianne says:

      Hi Jamee, I am so glad this helped and thanks for letting me know πŸ™‚ I took a look at your favicon and it looks great, I really love the design, great job!

  • I came across your blog through a Google search. Thank YOU so much!!! xoxoxo

  • Thank you for this tutorial. I have one issue though. Even though I saved the picture as “.png” it still has the white background which is supposed to be transparent.

  • Marifer says:

    Thanks for this tutorial!
    I love the instructions and the result of this quick change on my blog.

  • thank you for sharing this is very good article this is working please check my logo

    http://www.riqqle.blogspot.com

  • Moira says:

    Thanks a lot! Very helpful post.

  • Shannon T says:

    Hello!
    Thank you, i’m starting my blog and i don’t know anything. You also give me design ideas.
    THNKS THNKS THNKS.

  • Sarah says:

    Hi there! I’m following your steps, but when I go to Appearance –> Editor, there are no applicable root directories under my theme (Foodie Pro) — e.g., I can’t find index.php (or header.php or anything) anywhere except under the Genesis theme, and within that code there is no text. Ideas? I’d really rather avoid using a plugin.

    (Things that DO show up under Templates are functions.php, helper-functions.php, etc.)

    • Marianne says:

      Hi Sarah! I took a look at your site and I DO see a favicon (a little heart right?) so it looks like you got it working, but in case you are still having trouble, in Genesis, you would go to Genesis > Theme Settings.

      Scroll down to Header and Footer scripts and you would paste your code into the first box there. Let me know if that didn’t help!

      • Sarah says:

        AHHH! I got it! Thanks so much for the fabulously quick response! That little black-outlined heart is the one that came with the theme, but now I’ve gotten my own uploaded. Still a heart, but matches my branding better. Thanks again!!

  • Good thing you cover the design of the icon! Articles often focus on the technical stuff alone.

    Desktop favicon is only half of the story. Nowadays, mobile devices all need their own icon. For example, iOS is looking for the Apple Touch icon. It must not be transparent. Android Chrome expects a manifest which in turn declares various icon sizes. Windows / IE11 also has a manifest of its own.

    Favicon is really messy actually πŸ™‚

    • Marianne says:

      True Phillippe, thanks for your insights. I wanted to keep this tutorial as simple as possible but it’s always changing so thanks for sharing your generator.

  • So I clearly just followed your directions to change my emoticon (the first one was designed for me but I wasn’t a huge fan) and VOILA! Success! Wasn’t nearly as hard as I paid somebody to do. lol Thanks so much!

  • I so have to do this. I am just not sure what I want to do, I have ideas, I just need to get on it!!! Thanks for the step by step, I so need it!

    • Marianne says:

      Hey Nikki, what about a mustache?! How cute would that be? Make sure you come back and let me know when you’ve created one, I’d love to see it. πŸ™‚

  • Deborah says:

    Hi Marianne. I’ve made a favicon for our new site about our workshop but I noticed the theme, Optimizer says only the pro version will allow a favicon. I think this is pretty mean, anyway is there a way around it. I tried putting the code in the header.php but when I go to check the url with favicon.ico at the end it just shows the little square that sites have if they don’t have a favicon. I’m noticing lately that with some of the free themes you can only get so far then to do anything else they want you to buy the pro version.

    • Marianne says:

      Hi Deborah, wow I haven’t heard of that before, that’s pretty terrible to take away the ability to manually do it. I know some themes have a quick and easy automatic function to add favicons but they should still allow you to do it manually on a free version.

      Unfortunately I don’t know of a way around it. It sounds like they may have blocked it somehow in the theme. Pretty terrible of them!

  • Casey says:

    Marianne, this is such a thorough guide! It gives such great step-by-step instructions, along with the needed explanations. Perfect! Great post!

  • J says:

    I’ve been trying to figures this out for such a long time. Thank you so much!

  • Suzy says:

    Just made my favicon. Thanks for the lesson:) One tip–I had to install the “All in One Favicon” plugin to wordpress to make mine work.

  • Patricia says:

    This tutorial is super detailed, I love it. You offered really awesome visualizations with the different examples. I think adding a favicon is super important and adds a professional look. I’m sick of seeing all the genesis child themes around with the original favicon still intact.

    • Marianne says:

      Thank you Patricia! I’m so glad you thought so, that means a lot and I totally agree with you on the generic favicons all out there. I always have so many tabs open that i love being able to quickly find a certain tab by its favicon.

      You did a great job on yours btw! it came out very clear and detailed.

  • Bee Phillips says:

    Just used this to create my brand spanking new favicon for my new/rebranded blog! I would link so you can see buuuuut i’m keeping it under wraps for now. Keep an eye out for the launch in september! b x

  • lucky82 says:

    You can create favicon with easy using drawing tool or favicon generator and upload your picture and make 16×16 or 32×32 ICO file at http://onlinefavicon.com/ , also at site you have gallery with favicons created by other users, you can see description how to set up favicon at your site, try and enjoy!

  • Oh my gosh, thank you so much for this clearly written and simple tutorial. I was getting very frustrated because I wasn’t seeing my favicon but then I cleared my cache just like you said and it worked like a charm. Thanks again!

  • Patti says:

    Hi there!
    I know this is kind of an old post, but I just used your tips to upload my custom made favicon. It works fine on the blog. Although I had to add it using the Chrome browser as under Firefox Blogger didn’t seem to validate my favicon.ico file. However, I managed to upload the favicon.ico file and like I said it works perfectly fine on the blog and all pages. But when I want to save the blog in my bookmarks (both Firefox and Chrome) or in my toolbar, it always shows the old Blogger favicon in the toolbar/bookmarks,
    Do you know what I could do to solve this? I am very grateful for any tips! πŸ™‚
    Patti

    • Marianne says:

      Hi Patti, I just looked at your site (cute favicon btw!) and bookmarked it in both FF and Chrome and can see the heart icon, no problem. I think that your browsers may just be caching. See here how to clear them: https://kb.iu.edu/d/ahic

      I’m not sure how you add a favicon using Chrome. Did you install an extension to do this?

      • Patti says:

        Hi Marianne!
        Thanks for replying!
        I just opened the blogger website in Google Chrome and edited my layout there! That’s how I did it basically.
        It now works for me in Google Chrome as well but for some reason I still can’t work it out in Firefox. I restarted the browser and emptied my cache but it doesn’t work for me. Maybe I’ll have to wait a little longer!
        Patti

        • Marianne says:

          Caching is weird like that. Sometimes I have to clear cache, restart my computer, refresh a bunch of times and then it finally works. Rest assured though, I definitely saw your favicon in Firefox so it’s working for everyone else πŸ™‚

  • Girl, I so wish I’d read this before I attempted mine last week! Ugh. I did it using directions from another site and they were kinda sketchy so now my little bird is on my browser and up top of my site, but I can NOT get it to show on Pinterest. I just copied and pasted your code up there to my header so I’ll give it another couple days and see if that works. If not, I’m deleting everything and starting from scratch again.

    • I DID IT!!! Thanks to your guidance, I figured it out!
      Thanks so much for always being so thorough.
      Oh, and I LOVED your examples in picture up there of the well done and the not-so-well done.
      And now, I have a cute little red bird. Giving you a shout-out today – watch for it! πŸ™‚

      • Marianne says:

        That’s so awesome Ruthie, it really looks great! And I saw your Instagram mention, thank you SO much! You’ve been such a great fan, I really appreciate you!

  • Cha` says:

    Hi Marianne! πŸ™‚ Thank you for the wonderful tutorial. I chose a picture of Peter Pan I got online but after going thru the step by step instructions, it was showing as pixelated. What have I done wrong?

    Please help me. Thank you!

    • Marianne says:

      Hello Cha,
      I would imagine an image like that of Peter Pan would be too detailed to show at such a tiny size. I suggest choosing a very simple image, one which can still be understood at small sizes. Try that and see if it helps. Thanks for following the tutorial!

  • Eleanor says:

    Wow, three years on and still gaining comments! Great article. I use blogger and have followed through the steps, and confirmed that the favicon is visible through the url/favicon.ico link as instructed. However, my favicon still appears to be the orange and white B that is preset by Google blogger. I use safari and have cleared my website data (is that what you mean by clearing the cache and resetting?). Is there a step that I may have missed? Thank you!

    • Marianne says:

      Hi Eleanor, those pesky favicons have a way of really staying cached for some reason. BUT I just went to your site and I see your little wave favicon so it looks like it does actually work. Hopefully you see that by now! Thanks for following the tutorial!

  • Merina says:

    I’ve had my blog for just over a year and after several times of trying to figure this out I put it on the back burner. Your article was SO helpful!! I was able to do this in under 10 minutes. I do need to change the color of my favicon now that I see what it looks like, but I’m just glad I FINALLY know how to do this! Thank you!!

    • Marianne says:

      Oh yay I’m so happy to hear this Merina, I’m so glad it worked for you! Yes it’s very cute, but doesn’t contrast enough against the gray tab. But at least you know it’s an easy change now!

  • Chelsea says:

    Thank you for the great tips. I haven’t come up with inspiration, so mine is just a simple square, but still in the main color of my site πŸ˜‰

    • Marianne says:

      Hey Chelsea, you’re very welcome, glad you found the tutorial helpful.
      I don’t see your custom button, did you take it down? I just see the red and white Pinterest one right now.

  • Danielle says:

    Thanks Marianne! Nice tips you got there. Also, hope you can visit my blog πŸ™‚
    http://danielleflestado.blogspot.com/

  • Sandra Go says:

    I did it ! Thank you so much for your tutorial :)))

  • Thanks a bunch!! Working on my blog design and hope to add a favicon soon!

  • Kitty Rose says:

    Thank you! This blog post has helped tons. It’s so easy to follow! Before I read it, I hadn’t a clue what a favicon even was. A bit embarrassing? I ended up with a simple design but can’t decide whether to go for a transparent background or not? What do you think? Thanks πŸ™‚

  • Rebecca says:

    Thank you for this! I made a favicon in about 20 minutes thanks to your great instructions πŸ˜€

  • Teri says:

    Thank you so much for this tutorial! You made it so easy!

  • Nice information Marianne

  • Alex says:

    Hello Marianne,

    I read your article and noticed you now have a very nice looking favicon that seems really complex. How did you make your current favicon and how do you make it look so crisp and not pixelated. Or creating something like the bee you have in your favicon examples. Mine are always so pixelated. You have a great blog and I love all your posts.

    • Marianne says:

      Great question Alex! I have uploaded a PNG that is 512x512px in size into my theme customization area. That said, it looks like I should update this tutorial as it’s a little old now. Here’s a better generator I’ve found: https://realfavicongenerator.net/ Try that one and see if it works better for you! I’d love to hear what you think.

  • Good information, It’s very helpful to me..

  • Thanks for your share this blog it has very useful for me………….

  • Portella says:

    Thanks! Now I can add my favicon to the blog!

  • Putra Eka says:

    Hello,

    Where I can get some showcase of best favicon? I struggled finding some examples to make my own favicon

  • Nice post, I really like your post because Lots of people do not pay attention to favicons, it is very important. Thanks for sharing because you told how to make a favicon.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.