Does your blog have a custom favicon? If not, it really should. Today we’ll learn what a favicon is, why you need one, and finally how to create a favicon for your blog or website.
I still see tons of blogs without one, so if your blog is one of them, do yourself a favor and create one now using the tutorial below. I promise it won’t take long and it’s also kind of fun!
Disclosure: This post may contain affiliate links (denoted by a *) which means that I may receive a small commission should you choose to make a purchase with my link. I appreciate your support and will never recommend products I do not stand by myself.
First of All, What is a Favicon?
A Favicon, pronounced fave-icon, is short for Favorites Icon which was named because they show up in your list of website bookmarks, in other words, your favorite websites. Favicons are a small version of your logomark that appears as a browser tab icon, a bookmark icon, or a shortcut icon.
Favicons are a quick way for users to recognize your website on first glance. Take a look at my browser tabs below. Do you recognize most of the websites I have open here?
Why Do You Need to Create a Favicon?
When you don’t assign a custom favicon to your blog or website, either a generic icon or no icon at all gets assigned to it. At worst, your blog uses your hosting company’s favicon. At best, each browser assigns its own thing for you: Chrome adds a little globe (see image above), Safari adds the first initial of your website’s URL in a gray box (see image below), and Firefox adds nothing at all. Either way, talk about BORING!
Look again at the browser tabs above. Having recognizable icons makes it easy to click back and forth quickly between websites doesn’t it? If you save a website to your bookmarks, you will also see the favicon in your bookmarks list. This makes it easy to quickly find what you are looking for. Help your readers quickly find your blog in their tabs or bookmarks by incorporating a favicon.
There’s another place I bet you didn’t think of where favicons appear: If you have websites you visit frequently on your phone, you can always add them to your phone’s home screen as a shortcut. If your readers love visiting your site often, they may want to add a shortcut to it from their home screen so you definitely want them to have a nice looking icon to stand out from the other app icons they already have added.
And here’s a new tab page from Safari. Picture your website shortcut here. You don’t want your blog represented by a boring gray icon like the “C” icon below do you?
How to Design a Favicon for Your Blog
Some Design Rules for Creating a Favicon
First, let’s talk about some best practices for designing your favicon.
- Your favicon should be noticeable and instantly recognizable
The best way to make your favicon recognizable is to use your logo as a starting point. Even if your blog isn’t super famous yet, that’s ok. Using consistent design elements and themes throughout your branding will help it stand out from the rest and help people eventually recognize your brand.Here are a couple of options for you to consider as you design your favicon:
- your logo or logomark
- simpler variation of your logo
- a symbol or icon which represents your brand
- the initials (or just the first initial) of your brand name – make sure the style of the initials matches your initial logo’s design and style
- a simple photo – lately I’ve been seeing bloggers using their profile photos to create a favicon
- Your favicon should use a very simple design
Take a good look at the favicons your browser tabs right now. What do you notice? They’re tiny! The typical favicon is displayed at 16 x 16 pixels. For this reason, it’s important to make sure that you use a very simplified version of your logo or branding element. Detailed and elaborate graphics won’t scale well at such a tiny size. They’ll most likely look like a blurry mess.
- Make sure your favicon contrasts well with light and dark backgrounds
Depending on your readers’ preferences, their browser tabs can be white, black, light or dark gray. For this reason, you’ll want to make sure to create a favicon with colors that contrast well on both light and dark backgrounds.Some favicons have transparent backgrounds and they work because their colors contrast well on any background. If your graphic is too light or too dark, it may help to add a solid colored circle or square behind the graphic or logo to help it stand out and be readable on any colored tab.
- Look at your browser tabs for inspiration
Click around the web and look at the favicons used on your favorite websites. Notice if they will work on light or dark backgrounds. Does the graphic have a transparent background or is it on a colored square or circle?
Favicons using transparency
Notice how these icons can stand out on either a dark or light background, except for the last one, ‘Say Yes.’ That one should have probably been placed on a white square. And it’s a little hard to tell, but the fourth icon, the lotus flower actually has a very fine black outline. This way you can see it easily even if it’s viewed on light colored tabs.
Favicons using a colored background
These favicons were designed with a square or rounded square background to ensure that they are clearly visible on both dark and light tabs.
Favicons using initials
Some of these initials icons use a colored backround, some use a transparent one. Either way, make sure it is readable.
Favicons using a profile photo
Using a profile photo seems to be a new trend that’s catching on. If you go this route, make sure to use the same profile photo in all your online profiles so that it is instantly recognizable.
How to Create a Favicon for Your Blog
Create a Favicon File Step-by-Step
- Create the Graphic in an Image Editor
Using an image editor like Photoshop (sign up for free trial)*, Pixlr, BeFunky or Canva,* create your favicon file at 512 x 512 pixels. Even though it is displayed at only 16×16 in browser tabs, it will also be displayed at larger sizes in some of the other applications I mentioned above.
- Preview Your Favicon in Tiny Size
If you’re done creating a graphic favicon, zoom out of the image until your graphic gets tiny, about the size of the favicons you see in your browser. Is it still readable? Does it make sense? If it does, great, move on to the next step.
- Save the File
First, save your graphic as an editable file in your software program so you can go back and fine-tune it if you need to.Next, save it as a PNG file.
- Generate a Favicon.ico File
Use a favicon generator to convert your PNG file to an ICO file. This step is necessary since some browsers will only read ICO files.
Alternatives to Designing Your Own from Scratch
If you want a quick and easy way to create a text or initials favicon, use the Text > ICO favicon generator. I quickly created this one for DYOB:
You can also use the Emoji > ICO favicon generator if you really want to make it easy on yourself.
Finally, Add Your New Favicon to Your Blog or Website
The easiest way to add a favicon in a self-hosted WordPress blog is to log into your dashboard. Then go to Appearance > Customize, then click on the Site Identity tab. Under the Site Icon section, select your new favicon.ico file to upload.
And boom, you’re done, check it out in your browser! Note that you may need to refresh a few times and/or clear the cache in your browser before it appears.
How to add a favicon to a WordPress.com blog.
It’s very easy to add a favicon to Squarespace as well.
Log into your blog and click on Settings in the left column. Then click Favicon under the Basic section. Next, upload your favicon.ico file, save and boom!
Test Your New Favicon
If you want to test what your favicon looks like in various platforms and settings, use this Favicon Checker. If you wish to edit the way your icons look in any of the platforms, say iOS (iPhones), you can use the generator to optimize them for each setting. Then just follow the instructions to add them all to your blog.
You Just Learned How to Create a Favicon
Congratulations! When designing your own blog, you want to make sure that you don’t leave out any details, even the tiniest ones. Adding a custom favicon to it not only helps your readers quickly locate your blog in their tabs or bookmarks, it shows that you care about keeping your branding consistent.
Now it’s Your Turn
Let me know in the comments if you have any questions about how to create a favicon or if you need help identifying a type of favicon to create for your brand. Otherwise, please share your favicon with us in the comments!
And if you’ve enjoyed this tutorial, please share it by clicking one of the icons below my signature!
This post was originally published on 8/14/2013 and updated on 2/11/2015, then again on 11/4/2020.
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!
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!
So glad i could help! it’s just one of this little details that makes all the difference!
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 🙂
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!
Thanks Kim! And so glad you liked it!
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!
You’re welcome Saje. I’d love for you to share this with your clients or followers!
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!
I see it now! False alarm!!! Thank you 🙂
Hi Nicholle, so glad it worked for you! Sometimes it takes a few minutes or your browser caches or whatnot. I just went and took a look and it’s very cute, good job! Love the pink heart!
I have created from this website, thank you
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.
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!
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!
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!
Great information. Do you make these for others? I would love to chat with you 🙂
I could do this for you. Send me a message via the contact form http://designyourownblog.com/contact/ if you’re still interested and let me know what you’re looking to do.
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.
No problem Caroline, anything that helps!
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 ?>.
<link rel="shortcut icon" href="/favicon.png” />
<link rel="shortcut icon" href="/favicon.ico” />
Oh you are so right Elle, thanks for pointing that out! I am fixing it right now!
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. 😀
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.
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.
Nope,still can’t see my favicon appearing..
Your browser was probably caching Kin, i can see a star favicon on your site.
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 🙂
It’s perfect Zakkiya, your blog and artwork are really pretty too! Thanks for coming by!
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! 🙂
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!
Wow, great tutorial on creating favicon for a blog. Awesome.
And yeah, you really have a nice blog design too. Cheers.
Hi Keyur, thank you so much, you’re very sweet!
Wow, very clear tutorial. Now I have a pretty favicon for my blog. Thank you 🙂
Very cute Roopini, it’s perfect!
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.
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
Hi Erica, thank you for stopping by and taking the time to write 🙂
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.
Hi the only think I can think of is that perhaps you didn’t take out the background before saving the png? Let me know….
Thanks for this tutorial!
I love the instructions and the result of this quick change on my blog.
You’re so welcome Marifer! Thanks for taking the time to write your kind words. Your favicon looks great!
thank you for sharing this is very good article this is working please check my logo
Yes it’s definitely working Muhammad, great job!
Thanks a lot! Very helpful post.
You’re welcome Moira, glad it was helpful!
Thank you, i’m starting my blog and i don’t know anything. You also give me design ideas.
THNKS THNKS THNKS.
You’re so welcome Shannon, thanks for stopping by and letting me know 🙂
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.)
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!
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 🙂
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!
Sethlina, it looks awesome. Great job!!
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!
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. 🙂
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.
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!
Were you able to figure that out by chance, Deborah?
Marianne, this is such a thorough guide! It gives such great step-by-step instructions, along with the needed explanations. Perfect! Great post!
Hey Casey, I’m so glad you stopped by! You did a great job on your favicon, congrats!
I’ve been trying to figures this out for such a long time. Thank you so much!
Great job J, it’s very clear and easy to read. Love how simple and clean your blog is too!
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.
It looks great Suzy! Yeah, I think perhaps some themes work better with that plugin. So glad you got it to work!
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.
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.
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
Oh I can’t wait to see Bee. Definitely come back and let me know when it’s live.
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!
My pleasure Serena! Your favicon looks great!
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! 🙂
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?
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!
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! 🙂
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!
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!
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!
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!
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!
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!!
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!
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 😉
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.
Thanks Marianne! Nice tips you got there. Also, hope you can visit my blog 🙂
Your favicon looks great Danielle, nice job!
I did it ! Thank you so much for your tutorial :)))
Yay it looks really great Sandra, way to go!!
Thanks a bunch!! Working on my blog design and hope to add a favicon soon!
Hey Sarina, thank you too! I just took a peek and it looks great!!
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 🙂
Hi Kitty, I’m so glad you found this so helpful! 🙂 I tried to go to your blog to take a look but it says it’s been removed?
Thank you for this! I made a favicon in about 20 minutes thanks to your great instructions 😀
great job Rebecca, it looks really nice!
Thank you so much for this tutorial! You made it so easy!
You’re so welcome Teri, looks great btw!
Nice information 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.
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………….
Thanks! Now I can add my favicon to the blog!
Where I can get some showcase of best favicon? I struggled finding some examples to make my own favicon
Hi Putra, did you see the examples in the article above?
This article helped me a lot.
So glad it helped, Putra!
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.
wow, amzing blog about to create a favicon nice tips i’ll follow these thanks for share with us
Thanks for the info!! It really helps…
Thank you. Worked fine
great Rhoda, thanks for letting me know!
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.
I try and do the same, glad you found this post to be useful!
thank you very much for your post it help me to add my I favicon in my blog …
I was looking for this kind of blog post. The favicon has to be attractive because it can be use on mobile phone as a app icon.
Amazing post! Going in, I didn’t know about favicons, but I have understood their importance and also learned the process of crafting the perfect favicon for my blog. So, thanks a lot for sharing this with us. I loved the section about favicon inspiration, it really gave me a lot of ideas I can implement in my icon. I really appreciate the step-by-step process. It will definitely make the task easier. Looking forward to creating my own favicon.
Amazing blog. Thanks for your help.