A favicon (short for "favorite icon") is the small image that appears in browser tabs, bookmarks, and address bars next to your website name. Adding a favicon helps improve the branding and professionalism of your site.
Step 1: Create Your Favicon
Favicons are typically 16x16 or 32x32 pixel square images saved in .ico format. You can create or convert an existing image using online tools such as:
-
https://www.xiconeditor.com – Allows you to create, edit, and download favicon files in the proper format.
Other useful tools:
-
https://favicon.io – Generates favicons from text, images, or emojis.
-
https://realfavicongenerator.net – Offers comprehensive favicon generation and cross-platform support.
Step 2: Upload the Favicon
Once your favicon is ready:
-
Name the file exactly:
favicon.ico -
Upload it to the main directory (also called the root or top-level folder) of your website’s Files area.
-
In most cases, the site will automatically detect and display the favicon.
Step 3: (Optional) Manually Link the Favicon in Custom Code/Scripts area.
If your favicon does not display automatically, you may need to add this line to the <head> section of your HTML.
Go to "Administration" -> "Configuration" -> "Custom Code/Scripts". Then add the following code, specifying the path and filename of your favicon.
You can also use other formats (e.g., PNG, SVG) and sizes for enhanced device compatibility.
Notes:
-
Favicons may be cached by browsers. If you don't see the update right away, try refreshing the page with Ctrl+F5 or clearing your browser cache.
-
For best results, ensure your favicon is simple and recognizable even at small sizes.