Make a Favicon
What is a favicon? A favicon, or browser icon, is the little mini logo that appears on the tab of your website when viewed on a laptop, tablet, or computer. When a website visitor has many tabs open, they may only be able to see the little favicon/browser icons for each tab that they are browsing.
Side note: If you do not yet have a website that you love and can edit at will, don’t worry. I’m in the process of developing a mini course to help growers with all their website needs. We all need a strong web presence and I’m going to walk you through it all! Stay tuned.
A favicon is TINY, but it is a helpful navigation tool, and adding a THOUGHTFUL one to your site will help customers recognize your site when they have multiple windows open. It also just looks a heck of a lot more “pro.”
Chances are good, if you haven’t intentionally added a favicon to your site, you may have the default icon for your web host. For example:
Squarespace sites will have this default favicon cube logo:
Wix sites will have this one:
Favicons are easy to make and add to your site when you know what to do. One thing you don’t want to do is just put your logo up there, unless it is a VERY simple design.
Favicons are limited in size to fit on the little browser tabs. That is so small. Most logo designs are unreadable at that size. For example, here is what my business logo looks like if I try to jam it into a favicon:
If I just take this logo:
And turn it into a favicon it becomes this unreadable blob:
Instead, choose a simpler element from your logo or brand package, or even just the initials of your business in a font you use and make that a recognizable favicon. I chose a rose illustration that appears in our main logo. It is a nod to the Cold Climate Rose Grower’s Program.
To make a custom, professional favicon:
Open Canva (www.canva.com) and choose a custom design measuring 100 x 100 pixels.
Make a simple design using a part of your logo or the initials for your business, or a free illustration from Canva.
Download your design as a .png file. I like to choose “transparent background” when I download my favicon file so that I can have the design without a background.
Upload your file to your web host platform. I’m showing you where to find this setting on a Squarespace site. In Squarespace, they’re calling it a browser icon, and you can find it in the Design menu. Your web host may call it a favicon.
If you find that your favicon is unreadable, return to Canva and simplify your design a bit more. Download the fixed design as a .png file again and add it to your site.
And that’s it! Now, your website looks even more professional to the rest of the world. Here is a video to walk you through the process. Let me know if you have any questions. Share a comment below.