If you’re building a new website and you’d like to make a free favicon, then this post is for you.
Pre-warned: it’s going to be a super simple favicon. But the thing is, in the early stages of your website and your brand, all you really need is a super simple favicon.
Long time followers of Your Big Sister know that I love helping would-be small business owners figure out simple ways to get beautiful websites, without tons of design and coding and photoshop experience.
My philosophy is basically, why make things harder for yourself than you need to? Focus on reaching and serving your customers and clients instead!
So, let’s make that super simple (but still branded) favicon now!
What Is A Favicon?
First, for the ultra newbies, here’s the run down on favicons.
Favicons are the little icons that get displayed in browser address bars and bookmark lists.
It’s meant to be a little graphical representation of your site, your ‘favourite icon’ (get it??).
How To Build Your Favicon For Free
Now, you can get fancy and use Photoshop to make a cool design for your favicon that’s transparent and all that jazz.
(Protip: if you’re paying to get a logo built, you might want to ask your designer for a favicon, too!)
But if you’re reading this far, I’m assuming it’s ‘cause you don’t have a ton of design experience.
And here’s the thing … yes you want a nice favicon, but it’s not that serious. For now, you really just don’t want the generic favicon your host makes, which basically screams ‘this is a new website, don’t take me seriously!’
So instead of getting fancy, let’s get simple. And let’s use Canva (a free tool which just happens to be one of my all-time favourite digital tools).
First, go to Canva.com (and make an account if you don’t already have one – trust me, once you see how great it is, you’re going to start using Canva lots).
We’re going to make a design using our own dimensions, so the top right, click ‘Custom Dimensions,’ and we just want this to be a small square that fits in with WordPress recommendations, so we can make it 550X550 pixels.
Next, I’m assuming that you have a main colour for your website or brand. Mine is the pretty blue I use in my logo – #375e97.
So we’re just going to use your main colour to fill out this whole box. Click somewhere on the box, and you’ll see a little colour box on the top left. Click here, and click the ‘+’ button. Add in your hexcode, and voila, you have a perfectly usable favicon.
If you want, you can get fancy, maybe add in your initials or another little graphic. But remember that everywhere your favicon is displayed is going to be really small, so any finer details won’t be visible.
I’d recommend just keeping things simple for now, so you can move on to things that matter a lot more on your website.
On the top right, title your favicon ‘YOUR SITE NAME favicon,’ download it, and you’re ready to install!
How To Upload Your Simple Favicon
Next I’ll show you really quickly how I install a favicon on WordPress on Extra, the WordPress theme I’m using for this site.
(Extra comes with Elegant Themes, a well-regarded, not-too-expensive premium theme provider with great support. Also highly recommended by moi, since I’m a proud, lifelong affiliate).
Your theme might be slightly different, but this should give you the idea. (Like everything with WordPress, this is really simple once you get the hang of it).
Just login to your WordPress dashboard, go to the ‘Customize’ section on the left hand menu, find ‘Site Identity,’ and upload to the ‘Site Icon’ section.
And you’re done!
Again, the Mailchimps and the Facebooks and the CNNs of the world … these heavily trafficked, built-by-an-expensive-team-of-designers websites should have fancy favicons. And nothing’s stopping you from getting fancier in the future.
But for now, stick to your simple free favicon, and move on to more important things!
Psssst …. like all the graphics used in this post? I built them super easily and FOR FREE using Canva.
It’s one of my favourite online resources available to digitial marketers …
find it plus more great (and free!) tools here!