Favicons - JessicaOPRD/docs GitHub Wiki
I have long felt this topic, especially as an .ico file, is underdocumented. MDN discourages continued use of .ico files. However, as far as I know, it is still the only true "container" solution that does not require additional setup in the document header.
Implementation
The most basic way is to drop the favicon in the site web root as favicon.ico. However, if you need more control, it can be signaled in a header tag. Wikipedia uncharacteristically includes a table of tags and browser support.
The oldest(?) and most supported way, although many variations are supported across modern browsers:
<link rel="shortcut icon" href="https://example.com/myicon.ico">
Caching
I have been unable to find official documentation about how long favicons are cached by browsers. It does however appear that they are cached separately from cookies, browsing data, etc. You can view them in a Windows/Chrome profile here:
C:\Users\[User]\AppData\Local\Google\Chrome\User Data\Default\Favicons
This is a SQLite database and you will need a SQLite browser/client to view the contents. See example usage on Stack Overflow. I was able to view the contents using a VS Code extension, but I did need to save the file with an appropriate SQLite extension.
Viewing the database can provide a lot of insight about how the browser stores favicons, and how other sites strategize favicons as well. Note that the image itself is stored in the database. Of my hundreds of favicons, most had a last_updated date of 0. Are these domains I have not visited more than once, or since an upgrade? Do "expired" favicons get a value of 0? You can query for dates using the following:
SELECT
f.url,
b.width,
b.height,
DATETIME((b.last_updated - 11644473600000000) / 1000000, 'unixepoch') AS 'last_updated'
FROM
favicons f
INNER JOIN favicon_bitmaps b
ON f.id = b.icon_id
WHERE
b.last_updated != 0
ORDER BY
b.last_updated
The oldest date is less than a month back. I needed to look up handling the datetime integer.
In the past, I have had issues with "sticky" favicons that get cached even when the user visits your site again. This leaves content producers at the mercy of browsers' internal behavior. However I can also see from the SQLite database that many websites do attempt to fingerprint or version (?v=) the favicons, especially when they are served as .png. Does fingerprinting/versioning work?
After uploading a new favicon, it was cached in Chrome even after going to the site again. Visiting the URL directly (favicon.ico) and reloading updated the icon for my profile.
| Method | Description | Browser tab | Browser start-up icon | Browser bookmark | Desktop shortcut |
|---|---|---|---|---|---|
Refresh favicon.ico |
It must be visited directly in the browser. This method does not require adding explicit code to the site index, but will only impact a particular browser profile. Not a global effect. | ✔️ Chrome | ✔️ Chrome | ||
Add version favicon.ico?v=2 |
Page must be revisited. This method requires adding explicit code to the site index if it is not already there. | ✔️ Chrome ✔️ Firefox ✔️ Edge (might have been beyond cache time) | ❌ Firefox ❌ iOS Safari ✔️ Edge (might have been beyond cache time) |
Inspection
Visual Studio
To at least explore the contents of an existing .ico file, you can use Visual Studio (not Visual Studio Code). I suspect the .ico tooling in Visual Studio is legacy and was developed to help C++ programmers ship their software with an icon. As such, it produces transparent icons that are more like GIF than PNG (at sizes <= 48 pixels). I could not determine a way to overcome this, which is why I don't use the tool for icon generation. However, for inspection it is still convenient, as it is otherwise difficult to tell what sizes make up a particular .ico file.
To use, simply open the .ico file with Visual Studio. In 2022 you do not need a project.
Mac
Ironically Apple provides better native tooling for inspecting .ico files than Microsoft does. Simply double-click the file to view all packaged sizes. The only issue I have encountered is some difficulty viewing the images at "100%." Since Macbooks tend to be 2x devices, it can be hard to tell what will happen on a 1x device.
Creation
I have tried more than once to research and create an .ico file using native Microsoft tooling, but it's always underwhelming to the point of falling back on a free generator. While this generally works, I feel a more professional solution should exist for such a base file type.
I have never found any documentation suggesting this was ever a native Photoshop capability, but peers have spoken of third-party extensions as if they were native. A former popular plug-in appears to have been a paid plug-in from Telegraphics.
| Tool | Type | Notes |
|---|---|---|
| Visual Studio | Native software feature | 🔴 Feels outdated 🔴 No image import, only paste capability from external image editor (interprets white as "transparent"?) 🔴 Seems to only support BMP (GIF-style) transparency for new image types 🔴 For existing .ico does not appear to support PNG at small sizes 🔴 Need to create or open project to create icon, but can save .ico as separate file 🟢 Can inspect sizes of existing .ico files by opening them with Visual Studio |
| Favicon Generator | Free cloud service | 🟢 Easy to use for many purposes 🟢 Allows user to choose from known scaling algorithms with shown examples (Mitchell, Nearest Neighbor, Cubic, Bilinear, Lanczos, Spline) 🟢 Package includes many use images and code samples 🟢 Also has "check" tool 🟢 Corresponding build tools libraries 🟡 May be falling out of date a little (based on changelog and "Does my favicon look good on an iPhone 6?") |
| ICO Convert | Free cloud service | 🟢 Popular and often cited solution 🟡 Many similar services have come and gone 🟡 Some unexpected output 🔴 Dark UI makes it easy to click on ads instead of submit buttons 🔴 What exactly is going into your .ico file? Could anything dubious be added by a "free" online generator? |
| to-ico | Node.js and command-line library | 🟢 Easy to use 🟢 Small and easy to browse source ⚪ Many like it, this is an example, not sure if any super popular ones exist |
Favicon .ico output
| Tool | Output | Notes |
|---|---|---|
| Visual Studio | 16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256 |
Manually choose preset sizes to include in the file |
| Favicon Generator | 16x16, 32x32, 48x48 |
Various different output files/conventions (such as .png and .svg) also included in package (Android, Apple, MS tile) |
| ICO Convert | 16x16 |
Only this size when "Favicon icon for your website" is selected |
Visual Studio
The following works for Visual Studio 2022:
- Create or open an existing project. I created a new C# "Console App" that I named "Icon Creator."
- Under the "Solution Explorer" panel, select the project ("Solution 'IconCreator'") with the Visual Studio icon next to it
- Navigate to Project > Add New Item...
- Select "Icon File"
- Click "Add"
In my opinion, this is a poor editor for 2022. You can paste from Photoshop, but Visual Studio attempts to set transparency seemingly where white exists, and applying jagged edges.
More Resources
🔗 ICO (file format) on Wikipedia
🔗 History of the Web: How We Got the Favicon
🔗 Google Search Central: Define a favicon to show in search results