In this guide, we’ll talk about what favicons are, how to create one, and how to add it to your website.
What is a Favicon?
If you have visited a website, you might have noticed a small icon next to the site’s name in the browser tab. This icon is called a favicon, and it is a useful way to identify and brand your website.
A favicon is a small image file displayed in the browser tab, bookmark list, history, and other places where your website’s URL is shown.
The word favicon is short for “favourite icon,” and it is also sometimes called a shortcut icon or a website icon.
A favicon helps your website stand out from other sites and can help users easily recognise and return to a website when multiple tabs or windows open in their browser.
How to Create a Favicon for Your Website
To create a favicon for your website, you must design an image representing your site’s identity and theme. You can use your existing logo and shrink it down to an appropriate size.
The image should be simple and clear, as it will be displayed at a very small size.
You can use any image editing software to create your favicons, such as Photoshop, GIMP, or Paint.
You can also use online tools that generate favicons from text or images, such as Real Favicon Generator, Favicon Generator, or Favicon.io.
Once you have your favicon image ready, save it in a format compatible with most browsers.
The most common format is ICO, which can contain multiple images of different sizes and colours but can also be in other image file formats such as PNG, GIF, or JPEG.
How to Add Your Favicon to Your Website
After you have your ICO file ready, you need to upload it to your website’s root directory, which is the folder that contains your index.html file.
You can upload your file using FTP software or your web hosting control panel.
You also need to add the HTML tag that links to your favicon file in the head section of your web pages to help older browsers find your favicon image. You can edit your HTML code using a text editor or web development tool.
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
The href attribute specifies the image file’s location, which can be in any format supported by the browser, such as PNG, JPEG, GIF, or ICO. The type attribute specifies the MIME type of the image file, which helps the browser determine how to display it. The rel attribute specifies the relationship between the current document and the linked resource, which is “icon” in this case.
Once you have done these steps, you should see your favicon in your browser tab when you visit your website. You may need to refresh your browser cache or restart your browser to see the changes.
How to Add Favicon in GreyboxPro
Adding a favicon in GreyboxPro is easier than the method described above. Just follow the steps below.
In your WordPress dashboard, go to Appearance > Customize.
Click on Site Identity > Select Site Icon.
Drop or Upload your Favicon.
Click Select. Choose either Crop Image if you need to crop or Skip Cropping if you are satisfied with how your favicon looks.
Hit Publish.
You will now be able to see the favicon on your website.