Add a Favorite Icon to Your Web Site

In relation to Axialis IconWorkshop, this article offers information on the following topics:

What are Favicons and why are they important?

Favicons are small icons that represent a website or web page. They are typically displayed in the browser tab, bookmark bar, and browser history, and are used as a visual representation of the website. Favicons are usually in the format of .ico or .png, and can be created in a variety of sizes and styles. They can be designed to match the website's branding, logo, or theme.

Favicons are important for a few reasons. Firstly, they help to establish brand recognition for a website. A well-designed favicon can make a website more memorable and recognizable, especially if it appears consistently across different platforms and devices. Secondly, favicons can improve the user experience by making it easier for users to navigate through multiple tabs or bookmarks. They help users to identify the website they want to access at a glance, without having to read the page title or description. Overall, favicons are a simple but important element of web design that can improve branding and user experience.

icons

Adding a Favicon to your Website

To create a favicon for your website, you can follow these steps:

  1. Create a square image that is <16x16> pixels or <32x32> pixels in size.
  2. Save the image in .ico format.
  3. Upload the favicon.ico file to the root directory of your website.
  4. Add the following HTML code to the <head> section of your website's HTML document, using the <link> tag: <link rel="icon" href="favicon.ico" type="image/x-icon">
Important
Remember to replace favicon.ico with the name of your favicon file. By adding this code, you are telling the browser to display your favicon in the browser tab and bookmarks.

Creating the Favicon File

You can either start from scratch or create an icon from an existing image (your company's logo for example).

We recommend you to include these image formats in order to be compatible with all visitor configurations:

  • 16x16 - 16 colors
  • 16x16 - 256 colors
  • 16x16 - 32BBP RGBA (optional)
Important
Make sure to create an icon that is 16x16 pixels. If you create a larger version (32x32 or 48x48) the icon will be ignored by some browsers.