Adding A Website Favicon To Wix & Squarespace
Adding a Favicon to your WordPress, Wix, or Squarespace site is one of the easiest ways of branding your site and making it easily recognizable to your site visitors. In this post, we’ll walk you through what a Favicon is, how you can use it, and how to add it to your website.
First, the basics… What’s a Favicon or browser icon?
A Favicon is a small image that displays next to page titles, on some browser tabs, and bookmark folders. Typically, this image is your logo or an image closely associated with your brand or business.
Adding a Favicon to your site, although a small detail in the overall design, will help it stand out from other websites and creates a more cohesive branding for your business.
See example below:
How to Create a Favicon
We recommend that you use your brand’s logo as your site icon or favicon. To create one, use an image editing program like Canva or an internet platform like Favicon.io. You can use a transparent image or fill the image with a background color of your choice.
How to Size Favicons
The recommended file dimensions for Favicons are typically 100 x 100 to 300 x 300 pixels, although a best practice is to size them at 512 × 512 pixels.
Favicons will display in browsers at 16px × 16px.
Your Favicon file size should also not exceed 100 KB and should be saved as a jpeg or .png file.
*** Keep in mind, that Internet Explorer cannot display a .png file as a favicon, so some users accessing your site using that browser won’t be able to view it.
How to Add a Favicon to Your WordPress Site
1. Since WordPress 4.3, you can add a favicon or site icon from the WordPress admin area. Simply go to Appearance » Customize and click on the ‘Site Identity’ tab.
2. The site identity section in customizer allows you to change the site title, description, and control whether or not you want to display them in the header. It also allows you to upload your site icon. Simply click on the select file button and then upload the image you want to use as a site icon.
How To Add A Favicon To Your SQUARESPACE Site
1. In the Home Menu, click Design, and then click Logo & Title.
2. Scroll down to Browser Icon (Favicon) and then drag your image into the image uploader.
3. After your image uploads, click Save.
How To Add A Favicon To Your WIX Website
1. Access your Site Manager
2. On the left sidebar, click on “Settings”
3. Once in settings, move down to the Favicon section and click on “Manage”.
4. Click on “Upload Image” to save or change Favicon.
TERMINOLOGY GUIDE
Pixel/File Dimensions: The total pixel dimensions of an image will tell you how many total pixels (dots) the image is made up of. For example, let’s say we have a digital image that is 1200×1800 Pixels (dots). That means our digital image is 1200 dots high by 1800 dots wide.
Digital Image Size: The size in inches of your digital image.
DPI of a digital image: DPI means Dots Per Inch. This number is calculated using your digital image’s pixel dimensions and digital image size. Your image may display larger or smaller on your site depending on its container size.
.ico: .ico files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately.
.Png: This file format allows you to render images with millions of colors – much like a JPEG – but also offers the ability to preserve transparency.
Photo by Hal Gatewood on Unsplash
