One of the most lazy things I often see when looking at business websites around the internet is that a lot of local businesses do not have favorite icons set for their websites. Favorite icons, or favicons are the little icons at the top of the tab that display for your website, and in the bookmarks bar or area of your web browser.
This is one of the easiest website features you can implement that many businesses have not done. Why settle on your website being not as good as the websites of your competitors? Favicons aren’t just important for your search ranking, implementing a favicon will also benefit your brand awareness and build both credibility and trust for your business.
I want to do my part and educate business owners on how easy it is to create and insert a favicon into your website. In this list, I am going to give you 17 super simple steps that you can do within minutes to create a solid, high quality favorite icon for your website.
1. Look in depth at favicons of the biggest websites
Looking at the favorite icons of some of the biggest, most known websites on the internet can lead to some insight on favicon design. Write down a list of websites you usually visit. Pay attention to how these websites use design elements in their favicons, and see if you can notice any similarities between different favicons you find. Write down common trends you see amongst these favicons.
Smashing Magazine has a great article on some of the best 50 favicons on the web.
2. Research local competitor favicons in your area
It is important to see what is working in terms of favicon design in your area. Write down a list of your direct competitors along with their website URLs. Take a look at their favicons and see if you can notice a common trend. Are they using parts of their logo in the design? Do they tend to use the same color? Coincidences are hard to come by in design, and chances are if many people in the same industry who have been in business for a while are doing the same thing with their branding there is a solid reason behind their design choices.
If you want to look more in depth at favicons, Favicon Checker is a free tool you can utilize to check the favicon of a website just by typing in the URL of the site: https://realfavicongenerator.net/favicon_checker
3. Research favicons of biggest companies in your industry
Besides looking at local competitors, you can also gain insight by looking at some of the biggest companies in your industry across the country. The top ten largest cities in the United States are (in order): New York, Los Angeles, Chicago, Houston, Phoenix, Philadelphia, San Antonio, San Diego, Dallas, and San Jose.
Create a two-column table in Microsoft Word or Microsoft Excel. Place the city name on the left, and in the right column cells list out the top three website URLs for each city for businesses in your industry.
Google search a service plus the city name. For example, if you were looking up insurance companies you would type in “insurance New York” into Google.
Now that you have some data to work with, visit each website or pop the website URLs into the Favicon Checker, a free tool I mentioned in step #2.
What is similar between the favicons of these companies, despite the location being completely different? Write down any similarities you find across the different favicons.
4. Setting up your document in Photoshop/image editor
Now that we have some design elements written down, it is time to begin designing our favicon. Open up your favorite image editor such as Photoshop, and create a new document. Set your dimensions to 32 pixels by 32 pixels for height and width. This is the standard size for most favicons. We are now ready to begin creating our favicon!
5. Implement KISS formula throughout your design
It is important to remember that your favicon should be simple. Notice most of your competitors and big players in your industry do not have complex favicons. Usually most favicons have a few shapes or letters only, and most utilize a transparent background (more on that later.)
Stick to the good old “Keep It Simple Stupid” or in a nicer way to say, “Keep It Simply Stupid” formula throughout your design process. Remember that customers usually only glance at a favicon and immediately know what website it is.
6. Create different color versions of your favicon
It is almost always a good idea when engaging in design to make a few different reiterations or copies. We almost always design three different favicons samples to show our clients.
Color can be hit or miss, and you want to make sure your favicon looks good and not off-putting to your customers. Sometimes you might be surprised by which one you choose once you are looking at the different versions side by side.
7. Design with the limited space in mind
Keep in mind while designing your favicon that you only have 32 pixels by 32 pixels to work with. You are not going to be able to fit a lot of shapes, graphics, and colors into your space. Also remember that your favicon is small, and is usually looked at as a tiny image on a browser tab. From far away your favicon should convey to your customers that it matches your business.
8. Balance positive and negative space
To go along with step #7, make sure you are balancing out empty space with non-empty space in your favicon. Your favicon will look weird if one third of the icon has content, and the remaining part of the design is empty. Look at the favicons again from the research phase (steps 1-3) and pay attention to how those favicon creators managed the line between positive and negative space.
9. Stop and analyze, does your favicon go well with your website theme and logo?
Your favicon is another important element of your overall branding for your business. Make sure if you are using green on your website and logo that your favicon utilizes green as well. You want your favicon to look like it goes with your website. If your website, logo, and business cards are red and white and your favicon is yellow, it will come off as rushed and designed differently. Customers can notice these types of things and it leaves a taste of “unprofessionalism” in their mouths.
10. Implement part of your logo - does it fit your favicon?
One design trend I have seen a lot of recently is implementing a part of your logo into your favicon. Here at Presto Website Design we use the magic wand symbol from our logo in our favicon. If your logo is made up of symbols, it may be a good idea to implement the same symbols in your favicon. Going along with step #9, you want your favicon to match the rest of your branding.
11. Ensure favicon is recognizable as your company or brand
Make sure your favicon makes sense in the context of what you do. I have seen websites where the favicon looks like it was randomly selected. If you run a pizzeria, for example, you should probably be using a slice of pizza for your favicon, not a bottle of coca cola. I have seen several websites that are making a huge mistake with their favicon, and it is no wonder most of them are ranking low in Google search results.
12. Ensure the favicon visually demonstrates what you do
Along with making sure your favicon matches what products and services you offer, you want to make sure that your favicon clearly labels what you do, as well as the message you are trying to convey to your customer. Here at Presto Website Designs, we are telling our customers we “make websites like magic.” Have some fun with your favicon.
If you are a car repair shop, you may want to use a repair wrench as a favicon. Having a picture of a car part can confuse people as most people recognize a wrench and immediately know you do repair services in some shape or form.
13. Set the background as transparent in Photoshop
At this point you should have a solid favicon designed. Now it is time to publish the favicon and implement it into your website. Before you export your file, you want to make sure you have the background set as transparent.
Having a transparent or see through background means that your favicon will look good on any browser using any theme. Having that white background can look really bad in most browsers, and your clients will notice and think that you did a cheap job with your branding. You want to make sure your favicon is displaying in a way that makes you look professional, especially after investing the time and effort into making a decent favicon.
To set the background as transparent in Photoshop, click on the magic wand tool and then click on the background of your image. Now hit the “Delete” key on your keyboard. The background of your image should now be transparent.
14. Export your design properly as .PNG file
It is finally time to export our final design! Make sure you are selecting .PNG from the file types in your image program when you go to save your favicon. .JPG files do not keep the transparency in the image background, which is super important for our favicons.
15. Implement your favicon - here is how to add in WordPress
To add your favicon to your WordPress website, log in to your WordPress dashboard. Now hover over “Appearance” on the left side of the screen, and then click on the “Customize” option. Click on the “Site Identity” tab. You will find the Favicon settings in the section marked “Site Icon”. Upload your file, and your site icon should now be added to your website. Congratulations!
16. Implementing your favicon if your site uses HTML
While most of us are using some sort of content management system (CMS) like WordPress, some websites are still built using HTML. If your website uses HTML you will need to integrate a favicon using some code.
You can add a favicon to your website by implementing this set of code into the <head> section of your website pages:
<link rel="shortcut icon” href=”https://www.example.com/favicon.ico” />
You will need to make sure you have renamed your favicon file name to favicon, and that you have set the file format as a .ICO file. You can convert a .PNG to .ICO file using ICO Convert
17. Evaluate how your favicon looks on different devices. Pull up your business website both on a PC and a smartphone or tablet.
Now that your site icon is designed and implemented into your website, it is time to take a step back and do one final evaluation. Pop open your website and take a look at how the top of the tab looks with the favicon. Does it look professional? Does it convey the message you want it to send to your customers? Does it match the appearance of the rest of your website and logo?
If the answer to any of the questions above is no, it is time to go back and change your design. Remember that you can always alter your siteicon in the future.
Congratulations on making it to the end of this post. Thank you so much for reading. I look forward to seeing the favicons you have made using the steps outlined in this guide.