Definitive edition of “How to Favicon” in 2023

Getting your website’s favicon right is incredibly complicated. This article puts together all you need to know about favicons. Last updated on Aug 11, 2023.

MasaKudamatsu
Web Dev Survey from Kyoto
17 min readJul 7, 2021

--

The recommended HTML code to deal with all the favicon files (image created with Carbon)

TL;DR

In the <head> element of your HTML document, insert

<link rel="icon" href="/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

where site.webmanifest is a JSON file with the content like this:

{
"name": "Your website name",
"short_name": "A shorter version of your website name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#4a4a4a",
"background_color": "#4a4a4a",
"display": "standalone"
}
  • Change the values of "theme_color" and "background_color" to your favicon design specification

Then create a favicon in the SVG format.

Convert this SVG image into favicon.ico, apple-touch-icon.png, android-chrome-192x192.png, and android-chrome-512x512.png with RealFaviconGenerator.

Finally, make sure that the favicon.ico file is named as it is (don’t change it) and saved in the root directory. (Otherwise MacOS Safari and IE won’t recognize the favicon.)

That’s all! :-)

Motivation

I thought adding a favicon to my website was a simple thing: create a file called favicon.ico, save it in the root directory, and add to the <head> section of the HTML file the following code:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

I was wrong.

In the 2020s, the use of a favicon is a lot more advanced, partly because we need to take care of shortcut icons on iOS and Android home screens. Today a favicon’s color scheme also needs to be responsive to the dark theme.

However, there is no consensus on exactly how we should use favicons. Adam, Nathan and Patrick (2021) show how diverse (and often wrong) the favicons of the top 100,000 most popular sites are, in terms of image size, image formats, and how <link rel="icon"> is written in the HTML code.

It’s a nightmare for any web developer who wants to add a favicon to the site they’re developing.

One source of confusion is that people don’t back up their claims. It turns out that quite a few claims on favicons are simply wrong.

In this article, I do my best to back up each piece of argument by citing the sources of information extensively. Hopefully, what’s written below is the definitive answer to “How to Favicon in 2023”.

Literature Review

Skip this little subsection if you just want to learn the recommended HTML code.

In the past few years, different people suggested different solutions on how to use favicons. Gant (2019), Schwarz (2020), RealFaviconGenerator (n.d.), Bailey (2020), and Boulanger (2020) did not agree with each other.

Disagreement is not limited to the blogsphere. Major websites do not seem to agree, either:

“Top websites are surprisingly inconsistent in the way they declare icons (via elements in the page’s head).” (Vidas 2019)

“But apple.com, as of this writing, has absolutely no markup for any favicon. They have a /favicon.ico file and nothing else—the old fashioned thing that still works everywhere." (Reamsnyder 2021).

More recently, Sitnik (2020), whose article was cited by Coyier (2021a), proposed the minimalist solution, cutting down to just 4 lines of code in HTML with one JSON file and five favicon files. However, this proposal was partly rejected by Reamsnyder (2021).

Sitnik (2020) then updated his proposed solution, in response to subzey (2021). In the previous version of this article, I adopted this solution as the recommended way of using favicons. As a record, this was the solution:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

However, in 2023, this solution no longer works due to changes in how Chromium browsers behave (as reported by Waldron (2023) and Noakes (2023a), both of which are the comments to the Dev Community version of this article).

Thankfully, xcuses (2023a), another comment to the Dev Community version of this article, has proposed a work around. This solution, along with several alternatives, is tested against the latest versions of Chrome, Firefox and Safari and confirmed as the best solution by Noakes (2023b).

Accordingly, on August 11, 2023, I revised this article to recommend the solution by xcuses (2023a) as how to favicon in 2023.

Okay, a long introduction is finally over. Let’s get into the detail.

1. SVG favicon

1.1 Future-proof

One reason for the favicon nightmare is that, as the time passes, browsers and OS’s can handle higher resolution images. With PNG images, this means we need to prepare the same image in various dimensions (see Bernard (2019). With an SVG image, one single file takes care of all the dimensions, including the future ones. As a future-proof solution, we should use an SVG favicon.

To illustrate the future-proof aspect of an SVG favicon, go back in time to May 2019, when Google started showing the webpage’s favicon in its search results (Leach 2019):

Two smartphone screens are shown side by side, both showing Google search results for “hike yosemite”. On the left, each search result consists of text only. On the right, each search result starts with a little icon, followed by the site title.
Left: Google search results before May 2019; Right: after May 2019 (Image source: Leach 2019)

Google requires your favicon to be a multiple of 48px square (48x48, 96x96, 144x144, etc.) (Google Developers, n.d.). But if your favicon had been an SVG image, you wouldn’t have had to create another version of the favicon image file after hearing the news that Google search results would start showing favicons.

1.2 HTML code

To use an SVG image as your site’s favicon, add the following to the <head> element of your HTML file:

<link rel="icon" href="favicon.svg" type="image/svg+xml">
  • Boulanger (2020) claims that the type attribute is unnecessary. But Can I Use (2021a) says all the browsers that support SVG favicons (Chrome 80+, Edge 80+, Firefox 41+, Opera 67+) require "the served mime-type to be image/svg+xml". (Well, my understanding is limited on this issue: Robinson (2022), a comment to the Dev Community version of this article, says that the type attribute is indeed unnecessary.)

1.3 Other benefits of SVG favicons

One additional benefit of SVG favicons is that you can toggle its color scheme for the dark mode. Sitnik (2020) shows the following example code for an SVG image file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
@media (prefers-color-scheme: dark) {
.a { fill: #f0f0f0 }
}
</style>
<path class="a" fill="#0f0f0f" d="…" />
</svg>

This way, the fill color changes from #0f0f0f to #f0f0f0 if the user sets the dark theme on their browser. (For detail on the prefers-color-scheme media query, see Kravets 2021.)

For other benefits of an SVG favicon, see Bailey (2020).

2. The .ico favicon (for Safari and IE)

2.1 Safari doesn’t support SVG favicons

In July 2023, the browsers fully compatible with SVG favicons account for 73.81% of global page views (Can I Use 2023a). Not surprisingly, IE doesn’t support SVG favicons. But Safari, even the latest version, doesn’t fully support SVG favicons, either. It only supports a colorless SVG image with one single color being specified in the <link> tag (see Section 5 below for detail). As pointed out by Reamsnyder (2021), such an SVG favicon prevents us from toggling the color scheme by the user’s choice of the dark mode, as mentioned above.

Therefore, we need a fallback for these “legacy” browsers, by using an .ico favicon that every browser supports, even IE 5.

2.2 Creating an .ico file

Creating an .ico file requires some dedicated software. RealFaviconGenerator makes life very easy. It allows you to upload an SVG favicon file and then download an .ico file version that corresponds to 16x16, 32x32, and 48x48 (an .ico file can contain multiple dimensions of the same PNG image). See RealFaviconGenerator (n.d.) for detail.

2.3 Referring to the .ico favicon

NOTE: This section is substantially revised on August 11, 2023 (equivalent of “breaking change” in semantic versioning terminology), to reflect the discussions in the comment section of the Dev Community version of this article.

To refer to the .ico version of a favicon, use the following HTML code (xcuses 2023a):

<link rel="icon" href="/favicon.ico" sizes="48x48">

Note the sizes="48x48" attribute. This is a trick to fool the latest versions of Chromium browsers (Chrome, Edge, Opera, etc.) so that they will pick the SVG favicon rather than the .ico version of the favicon.

What’s happening is as follows. If we don’t use sizes="48x48" as follows:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium browsers will then use favicon.ico instead of favicon.svg. It was reported as a “bug” (Anonymous 2020; see also RealFaviconGenerator 2020 and subzey 2021) though Chromium developers appear to think of it as expected behavior.

This effectively disables the above-mentioned SVG image’s capability of toggling the favicon color scheme by the user’s choice of the dark mode (Armadillo 2020). This is undesirable.

Reamsnyder (2021) explains the reason behind this behavior of Chrome:

.ico files typically contain a few different sizes of icons, one of which might be exactly the size the browser needs at that moment, so Chrome thinks that’s a great thing to use even if there’s a perfectly flexible .svg available. (Reamsnyder 2021)

To fully understand the issue, we need to know how browsers should behave when there are multiple <link rel="icon"> statements:

If there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. (MDN Contributors 2021a)

Now we understand the issue. What is a workaround? The answer is the sizes attribute for the <link> element, which does the following:

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple’s apple-touch-icon. (MDN Contributors 2021b)

By setting sizes="48x48", Chromium browsers think it is too large to use because the browser tab favicon whose size is typically 16x16 (or 32x32 on retina displays) (Cardello 2023). Indeed, xcuses (2023b) reports that, with sizes="16x16" or sizes="32x32", some versions of Chrome choose to use the .ico file instead of the SVG one.

Given that “if several icons are equally appropriate, the last one is used” (MDN Contributors 2021a), it is best to declare the .ico favicon first:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium browsers (and Firefox) will then choose to use the SVG favicon file, even when they consider both files equally appropriate. And Safari (and IE) uses the .ico favicon file.

This expected behavior of browsers is confirmed by Noakes (2023b), who extensively tested the favicon behavior of Chrome, Firefox, and Safari.

2.4 Adding sizes="any" for referring to the SVG favicon

In addition to adding sizes="48x48" for referring to the .ico favicon, both xcuses (2023a) and Noakes (2023b) recommend adding sizes="any" for referring to the SVG favicon. So the HTML code should be:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">

As of 2023, whether sizes="any" is included or not, browsers behave as expected (Noakes 2023b). However, if I understand correctly, the addition of sizes="any" makes it more likely in the future as well that the SVG favicon will be chosen over the .ico favicon by Chromiumm browsers.

Apparently, Chromium browsers has changed the way they interpret sizes="any" since December 15, 2022. According to Söderquist (2022), a commit message on the Chromium repo, Chromium browsers used to ignore <link rel="icon"> if it includes sizes="any".

This is why, back in 2021, the recommended way of fooling Chromium browsers to ignore the .ico favicon was:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

It was a hack discoverd by subzey (2021).

However, with the commit made on December 15, 2022 to fix a reported bug, Chromium browsers now regard sizes="any" as the indication of priority. Consequently, with the above hack, Chromium browers no longer ignore the .ico favicon.

To make sure Chromium browsers treat the SVG icon as the most desirable, therefore, adding sizes="any" is recommended. (This is my own interpretation. Correct me if you are an expert on favicon file selection algorithms).

2.5 Playground

I recommend playing with a favicon demo webpage by subzey (2021). Open it with DevTools of Chrome and Safari, respectively, and edit HTML. You’ll see which favicon is shown.

2.6 Other topics

Skip this section if you are only interested in the recommended HTML code for favicons.

Before closing Section 2, let me discuss three pieces of advice on favicons found on the web.

(1) PNG favicon for Safari?

Reamsnyder (2021) recommends creating a PNG version of the favicon image for Safari, and refer to it with the <link> tag:

<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

As explained above, browsers will pick the most appropriate favicon file if there are multiple <link rel="icon"> tags, and if there is a tie, they pick the last one. So SVG-compatible browsers will pick the SVG favicon with this HTML code.

Personally, however, I don’t really see the benefit of creating an PNG file for Safari. It is going to be used as a tiny image on the browser tab. It won’t pay off to have a higher resolution PNG image instead of a low resolution ICO image. RealFaviconGenerator (n.d.) argues that the 32x32px resolution is enough.

(2) The alternate attribute value

To prevent browsers from choosing the .ico file instead of the SVG file, Bailey (2020) suggests using the alternate attribute value, like so:

<link rel="alternate icon" href="/favicon.ico">

However, some people report that the alternate attribute value doesn’t work with Chrome 84 (Armadillo 2020). After all, the use of the alternate value together with icon is not in the spec (WHATWG 2021).

(3) The shortcut attribute value

Other people (including Google Developers, n.d.) suggest the use of rel="shortcut icon". But Bynens (2010) argues that it does more harm than good.

3. Apple Touch Icon

3.1 iOS/Android shortcut icons on home screen

An SVG favicon is great for desktop browser tabs and, just in case you don’t know, Google search results as well (Leach 2019).

However, it has limitations when a mobile device user “installs” the website to create a shortcut icon on the home screen for both iOS and Android, because mobile devices require a different icon design (see Bernard 2018 for detail).

So we need to revise the original SVG favicon a bit to fit into the design requirements by iOS and Android. For iOS, we need an apple touch icon (which we discuss in this section). For Android, we need a web app manifest (see Section 4 below).

3.2 HTML code

For iOS, include the following <link> tag to the <head> element:

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

Bernard (2019) mentions that we should include the link tag to refer to the apple touch icon image even though iOS devices will automatically find it, because other OS’s use the apple touch icon (including Windows 8+—more on this in Section 6 below).

3.3 Creating an Apple touch icon

Now the issue is a resolution of the image. RealFaviconGenerator (n.d.) argues that we should go with 180x180, to be compatible with iOS8+.

Sitnik (2020) recommends adding a 20px padding around the original favicon with some background color, to make the Apple touch icon look good.

RealFaviconGenerator makes it very easy to convert the original SVG favicon into an apple touch icon. It allows you to upload an SVG favicon file, graphically adjust the original image to fit into an iOS icon on the home screen, and download the 180x180 PNG file.

4. Web App Manifest

For the home screen icon on Android devices, we need a web manifest, which is originally meant for progressive web apps (see LePage, Beaufort, and Steiner 2018).

4.1 HTML code and JSON file

Add the following <link> tag to the <head> element:

<link rel="manifest" href="/site.webmanifest" />

with the text content of /site.webmanifest (a JSON file) being something like this:

{
"name": "Triangulum Color Picker",
"short_name": "Triangulum",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#4a4a4a",
"background_color": "#4a4a4a",
"display": "standalone"
}

4.2 Creating PNG icons

The PNG image needs to be 192x192 and 512x512 if we follow what LePage, Beaufort, and Steiner (2018) suggest. Boulanger (2020) suggests we only need 512x512, though.

4.3 “Maskable” versions of the icon

Reamsnyder (2021) reports that, to pass the Lighthouse audit, these PNG images need to be “maskable” so that different Android devices can crop the icon to make it a circle, a squircle, etc. (Oakes and Steiner 2019). RealFaviconGenerator does not take care of this. Maskable.app can help you make your icon “maskable”.

Then, add the reference to maskable PNG images with "property": "maskable" in the site.manifest as follows:

{

"icons": [

{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},

],

}

See Oakes and Steiner (2019) for more detail.

This is an extra work to do, and the gain is having an icon like these:

Image source: Oakes and Steiner (2019)

instead of

Image source: Oakes and Steiner (2019)

If the use as a Progressive Web App on Android devices is a critical feature of your website, it is worth doing this extra image editing. Otherwise, I would say, skip it.

Now we are moving on to optional requirements for favicons. You can ignore them all.

5. MacOS Safari pinned tabs (optional)

Safari on MacOS allows the user to pin a webpage. This creates a tab with a favicon icon.

Until version 12 was released in September 2018 (according to Sitnik (2020)), Safari didn’t use the standard favicon but a single-colored SVG image for this pinned-tab functionality.

If you want to support those legacy versions of Safari on Mac OS (which accounts for 0.38% of global page views in June 2021, according to Can I Use (2021b)), add an additional <link> tag as follows:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4a4a4a" />

where the color attribute value should be changed to the desired color code.

It is quite tricky to create this version of a favicon, because it has to be single-colored with the color indicated in the link tag (#4a4a4a in the above code snippet), not in the SVG file itself. See Apple (2016) for the exact design requirement.

6. Windows Metro tiles (optional)

Windows 8 or later allows the user to create a shortcut icon to a webpage in the Start Menu (known as Windows Metro tiles). By default, Windows will use the apple touch icon for this purpose (Boulanger 2020). So we don’t need to create yet another version of favicon.

If you still want to customize your favicon for Windows Metro tiles, see Bernard (2019).

And RealFaviconGenerator takes care of everything.

7. Chrome tab color on Android (optional)

This is not really a favicon. But you can specify the color of Chrome tab bar on Android with

<meta name="theme-color" content="#4a4a4a" />

where the content attribute value should be changed to the desired color code.

According to Valkhof (2020), this theme color is also used by Discord for the border of shared links to the site.

That’s all!

After writing up this article, my mind clears up about favicons.

Hope this article saves you from turning mad about favicon nightmare. 🙂

Any feedback will be welcome. ;-)

Changelog

Aug 11, 2023 (v4.0.0): Revise Section 2 with a breaking change: I no longer recommend adding sizes="any" for referring to the .icofavicon due to the specification change of Chromium browsers in December 2022. Revise the title, the feature image, TL;DR, and the introduction accordingly. Add the alt text for the image in Section 1.1. Acknowledge possible misunderstanding of mine in Section 1.2. Fix typos in the references.

Nov 8, 2021 (v3.0.0): Revise Section 2.3 with a breaking change: I no longer recommend the deliberate omission of reference to the .icofavicon file in the HTML code. Revise the TL;DR and Introduction sections accordingly.

Oct 27, 2021 (v2.1.1): Fix a few mistakes in Markdown markup. No change in contents.

Oct 22, 2021 (v2.1.0): Mention the research results by Adam, Nathan, Patrick (2021) as evidence for the extent to which major websites do not agree on how to handle favicons.

Jul 15, 2021 (v2.0.1): Correct a few typos and to improve exposition.

Jul 7, 2021 (v2.0.0): Revise the entire article with a breaking change: (1) The <link> tag for favicon.ico is now removed; (2) The dedicated favicon file for Safari pinned tabs is now mentioned as optional, rather than mandatory. Change the title of the article to “Definitive edition of “How to Favicon in 2021”.

Jan 27, 2021 (v1.0.0): Publish the first version entitled “Favicon nightmare: how to maintain sanity :-)” on Dev Community.

References

Adam, Nathan, and Patrick (2021) “We Analyzed 425,909 Favicons”, iconmap.io, Oct 20, 2021.

Anonymous (2020) “Issue 1162276: SVG favicon is not loading if atribute “sizes” is present, instead regular favicon loads”, Chromium Bug Reports, Dec 30, 2020.

Apple (2016) “Creating Pinned Tab Icons”, Safari Web Content Guide, Dec 12, 2016.

Armadillo (2020) “Chromium seems to display ico instead of svg favicon”, Stack Overflow, Aug 15, 2020.

Arseniy-Il (2018) “There are no big difference rather than naming…”, Stack OVerflow, Sep 3, 2018.

Bailey (2020) “SVG, Favicons, and All the Fun Things We Can Do With Them”, CSS-Tricks, Apr 24, 2020.

Bernerd, Philippe (2018) “The United SVG Favicon Myth”, Favicon’s Blog, Mar 13, 2018.

Bernard, Philippe (2019) “Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?”, CSS-Tricks, Jan 11, 2019.

Blazak, Ben (2021) “Really appreciate this as well! Possible correction: just did a brief test (macos 10.14: safari 14, chrome 94) and the favicon wouldn’t show up…”, Dev, Oct 6, 2021.

Boulanger, Antoine (2020) “Are you using SVG favicons yet? A guide for modern browsers”, Start It Up, Apr 20, 2020.

Bynens, Mathias (2010) “rel="shortcut icon" considered harmful", mathiasbynens.be, Apr 14, 2010.

Can I Use (2023a) “SVG favicons”, Can I Use?, accessed on Jul 2, 2023.

Can I Use (2023b) “Browser Usage Table”, Can I Use?, accessed on Jul 2, 2023.

Cardello, Jeff (2021) “Favicons: everything you need to know in 2021”, Webflow Blog, Sep 8, 2021.

Coyier, Chris (2021a) “How to Favicon in 2021”, CSS-Tricks, Feb 10, 2021.

Coyier, Chris (2021b) “Favicons: How to Make Sure Browsers Only Download the SVG Version”, CSS-Tricks, Nov 5, 2021.

Gant, Greg (2019) “The 2020 Guide to FavIcons for Nearly Everyone and Every Browser”, Emerge, Oct 28, 2019.

Google Developers (n.d.) “Define a favicon to show in search results”, Google Search Central, accessed on Jul 7, 2021.

Kravets, Una (2021) “The new responsive: Web design in a component-driven world”, web.dev, May 19, 2021.

Leach, Jamie (2019) “A new look for Google Search”, The Keyword, May 22, 2019.

LePage, Pete, François Beaufort, and Thomas Steiner (2018) “Add a web app manifest”, Nov 5, 2018.

MDN Contributors (2021a) “Link types”, MDN Web Docs, Jun 22, 2021 (last updated).

MDN Contributors (2021b) “<link>: The External Resource Link element”, MDN Web Docs, Oct 24, 2021 (last updated).

Noakes, Darryl (2023a) “Seems that as of Chrome 113 at the latest, sizes=”any” on the ICO isn’t working anymore…”, Dev Community, May 31, 2023.

Noakes, Darryl (2023b) “I tested this in Chrome with subzey’s test page and chrome-svg-favicon-bug.karlhorky.r..., and it appears to work fine!...”, Dev Community, Jun 20, 2023.

Oakes, Tiger, and Thomas Steiner (2019) “Adaptive icon support in PWAs with maskable icons”, web.dev. Dec 19, 2019.

RealFaviconGenerator (n.d.) “FAQ”, Real Favicon Generator, accessed on Jan 27, 2021.

RealFaviconGenerator (2020), “When it finds both SVG and ICO favicons…”, Twitter, Apr 11, 2020.

Reamsnyder, Lee (2021) “How to Favicon in 2021”, leereamsnyder.com, Apr 19, 2021.

Robinson, Mike (2022) “You’re getting mixed up between the type attribute in the HTML and the served mime-type…”, Dev Community, May 16, 2022.

Schwarz, Daniel (2020) “What Are Favicons: A Comprehensive Guide”, Sympli, Feb 5, 2020.

Sitnik, Andrey (2020) “How to Favicon in 2021: Six files that fit most needs”, Evil Martins, Dec 23, 2020.

Söderquist, Fredrik (2022) “Consider the “any” size keyword in the initial favicon scoring…)”, Google Git, Dec 15, 2022.

subzey (2021) “Google Chrome may ignore your fancy SVG favicon…”, Twitter, Jul 19, 2021.

Valkhof, Kilian (2020) “I noticed you don’t have a theme color defined…”, Twitter, Dec 29, 2020.

Vidas, Šime (2019) “Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac”, CSS-Tricks, May 31, 2019.

W3C (2021) Web Application Manifest. Jul 1, 2021.

Waldron, Doug (2023) “This is an amazing article and definitely the most thorough that I’ve found! I have some bad news though…”, Dev Community, Mar 27, 2023.

WHATWG (2021) HTML Living Standard, last updated on Jul 2, 2021.

xcuses (2023a) “Hi, this works for me: <link rel="icon" sizes="48x48" href="/favicon.ico">...”, Dev Community, May 1, 2023.

xcuses (2023b) “Yes there are reasons why I chose 48x48…”, Dev Community, Jun 23, 2023.

--

--

MasaKudamatsu
Web Dev Survey from Kyoto

Self-taught web developer (currently in search of a job) whose portfolio is available at masakudamatsu.dev