How to Add a Favicon to a Website
A favicon (short for “favorite icon”) is a small graphical icon associated with a website. It is displayed in browser tabs, bookmarks, history lists, and sometimes in search results, helping users quickly recognize and identify a site. Favicons serve both a functional and branding purpose by improving navigation and making a website visually distinct.
In the past, the .ico format was commonly used for favicons. Today, it is considered outdated and, in most cases, no longer required. Modern browsers fully support PNG and SVG formats, which are easier to manage and provide better quality, especially on high-resolution screens.
SVG is especially useful because it is vector-based and scales perfectly on any screen. Unlike PNG, it does not require multiple sizes. There is no fixed “size” for an SVG favicon, but it is recommended to use a viewBox like 0 0 32 32 or 0 0 64 64 and keep the design simple so it remains clear at small sizes.
Recommended setup
Below is a practical setup that covers modern browsers and Apple devices:
HTML
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
This combination ensures:
- SVG for modern browsers (best quality and scalability)
- PNG fallbacks for compatibility
- Apple touch icon for iOS home screen
Where to place the files
Place the icon files in the root directory of your website or in a dedicated /icons/ folder. Then include the <link> tags inside the <head> section of your HTML document.
An outdated method for adding a favicon. This is no longer recommended, but it’s still often seen on websites.
<link rel="shortcut icon" href="/favicon.ico">
Additional notes
After adding or updating a favicon, you may need to clear your browser cache to see the changes. Also, some CMS platforms may provide built-in favicon settings.
I usually add a favicon as written above. To generate icons I use the service: https://realfavicongenerator.net/
In summary, using SVG as the primary format along with PNG fallbacks and an Apple touch icon provides a modern, clean, and reliable favicon setup without relying on outdated .ico files.
Similar posts:
-
Infinite Rotation with CSS Animation
One simple yet effective technique is creating an infinitely rotating element. This kind of animation can be used to attract attention to specific parts of a page, such a...
-
How to Create a Drop Down Menu Using only HTML and CSS
In one of the previous articles, we looked at creating a drop down menu using JavaScript (jQuery). In this article, we will look at how to make a drop down menu using onl...
-
How to Hide Scrollbar Using CSS
There are several ways to hide the scrollbar using CSS, depending on whether you want to completely remove scrolling or just hide the visual appearance of the scrollbar. ...
Leave a Reply