Whether you are looking to start from scratch or change out the old Favicon (perhaps it's the default Wix Favicon, Squarespace or a WordPress theme), there's answers below. And FREE site icons available upon request.
To begin with, let’s go over some of the best practices when it comes to site icons. What is a site icon you may ask? Site icons, also known as “Favicons,” are the small icons in your browsing window that identify the site. They are commonly found above the URL bar of your preferred browsing window (pictured below).
These icons are designed to give you, the visitor, a quick way to navigate between the different tabs in your screen. The two most important factors when creating a favicon are:
1. Color Scheme Match
The colors, typically between 1-3 colors maximum, should match or compliment your site’s color scheme. This gives the user continuity between your business identity and the browser icon. This also helps with visitor recognition on your site over time. It is important to not over-complicate your site’s icon as well. If you look at the image above you’ll notice that each only has between one and three different colors (no more). Because the site icon is very small compared to the window/tab open, there is no need to overcomplicate matters. In fact, more than 3 colors can muddle and become confusing for the site’s icon.
2. Icons matter.
What is your site all about? Mainly, what icon or feature do you most want to exhibit? In the image example above we see Hubspot with only one orange molecule for the entire icon (simple is better). This stands out from the browser window not only because of the orange contrast against the browsing window, but also because it’s so darn simple.
Whether you want to focus on analytics (perhaps a bar graph), creativity (maybe a pencil), or another feature of your business, choosing the right icon gives the visitor a visual queue to what you do.
For the purposes of this tutorial, we will only be using the following tools:
2. Adobe Illustrator
For purposes of speed in creation, we will be selecting an icon from Shutterstock (a collection of stock images and vector icons). If you do not have a subscription to Shutterstock, or simply want a free option, something like “Iconfinder.com” will work just fine.
Following the best practices of site icons from above, we will choose a simple lightbulb shape. You of course are free to choose whichever icon, shape or style you like. Remember – simplicity is the key.
Once we have the icon selected, download it from whatever platform you so choose. If you do not have Adobe Illustrator you can also use something like Canva to create an image.
Download and import your icon to Adobe Illustrator. While this is not a full tutorial in Adobe Illustrator, you will want to recolor your newly-downloaded icon to match your site’s identity. For my icon this blue works perfect. One other aspect that I go back and fourth with often is the background color of your favicon.
In the image below, the icon is colored blue but we could easily reverse this by creating a blue background for the favicon and then creating the lightbulb icon to be white. An all white icon is sometimes underestimated and can be quite powerful for identifying bookmarks and site tabs.
Now that we have the icon ready to go we will have to save the file to be ready for the web.
The size dimensions will vary depending on which hosting provider or WordPress theme you are using. I’ll include some common dimensions below but best practices dictate a square dimension. The format will also vary but 99% of the time a .png (scaleable format) will suffice. The dimensions listed below are all in pixels, not inches.
1. Wix Favicon:
16 x 16
2. Squarespace Favicon:
Favicon images work best across all Learn more about our supported browsers.”>browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px.
3. WordPress Favicon:
512 x 512 (will vary on theme)
A standard dimensional display for site icons are 16×16 pixels, the size they will display within your browsing window when using desktop and laptop devices. Because these dimensions are so small it is important to keep in mind the simplicity factor, complex designs will only appear as muddled and overcrowded.
If you are using Wix hosting for your site, you will need to ensure that these two factors are enabled prior to changing:
1. Upgrade your site to a Premium Plan (except the Connect Domain plan).
2. Connect a domain to your site.
Once these two steps are enabled you will need to:
Then refresh your browser’s window and congrats! You will now see your stylish new Wix Favicon. These steps for creation and best practices can be replicated for every hosting provider and WordPress theme.
Whether you are using Wix or something else, I would be glad to assist with the creation of a new site icon to give you some ideas. These mockups will of course have a watermark but free to create. If you’re interested, get in touch below using the “Get In Touch Button.”
Get in touch below with projects, configuration questions, or just to bounce some ideas back and fourth.