Add icon fallback

web/app/components/favicon.hbs

@@ -1,6 +1,17 @@
-<img
-  data-test-favicon
-  src="https://www.google.com/s2/favicons?domain={{@url}}&sz=32"
-  height="16"
-  width="16"
-/>
+{{#if this.fallbackIconIsShown}}
+  <FlightIcon
+    ...attributes
+    data-test-fallback-favicon
+    @name="globe"
+    class="opacity-60"
+  />
+{{else}}
+  <img
+    ...attributes
+    data-test-favicon
+    {{on "error" this.showFallbackIcon}}
+    src={{this.faviconURL}}
+    height="16"
+    width="16"
+  />
+{{/if}}

web/app/components/favicon.ts

@@ -1,13 +1,23 @@
+import { action } from "@ember/object";
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 
 interface FaviconComponentSignature {
-  Element: HTMLImageElement;
+  Element: SVGElement | HTMLImageElement;
   Args: {
     url: string;
   };
 }
 
-export default class FaviconComponent extends Component<FaviconComponentSignature> {}
+export default class FaviconComponent extends Component<FaviconComponentSignature> {
+  @tracked protected fallbackIconIsShown = false;
+
+  protected readonly faviconURL = `https://www.google.com/s2/favicons?sz=64&domain=${this.args.url}`;
+
+  @action protected showFallbackIcon() {
+    this.fallbackIconIsShown = true;
+  }
+}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

web/tests/integration/components/favicon-test.ts

@@ -1,8 +1,11 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { render } from "@ember/test-helpers";
+import { find, render, waitFor } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 
+const FALLBACK_ICON_SELECTOR = "[data-test-fallback-favicon]";
+const FAVICON_SELECTOR = "[data-test-favicon]";
+
 module("Integration | Component | favicon", function (hooks) {
   setupRenderingTest(hooks);
 
@@ -12,10 +15,25 @@ module("Integration | Component | favicon", function (hooks) {
     `);
 
     assert
-      .dom("[data-test-favicon]")
+      .dom(FAVICON_SELECTOR)
       .hasAttribute(
         "src",
-        "https://www.google.com/s2/favicons?domain=https://hashicorp.com&sz=32"
+        "https://www.google.com/s2/favicons?sz=64&domain=https://hashicorp.com"
       );
   });
+
+  test("it shows a fallback icon when the favicon URL is invalid", async function (assert) {
+    await render(hbs`
+      <Favicon @url="-"/>
+    `);
+
+    assert.dom(FALLBACK_ICON_SELECTOR).doesNotExist();
+
+    find(FAVICON_SELECTOR)?.dispatchEvent(new Event("error"));
+
+    await waitFor(FALLBACK_ICON_SELECTOR);
+
+    assert.dom(FALLBACK_ICON_SELECTOR).exists();
+    assert.dom(FAVICON_SELECTOR).doesNotExist();
+  });
 });