TODO: set HTML favicon to the icon in Conf

js/gl.js

@@ -1458,6 +1458,48 @@ var importObject = {
             }
             animation_frame_timeout = window.requestAnimationFrame(animation);
         },
+        set_favicon: function (small, medium, big) {
+            function make_and_add_favicon(ptr, size) {
+                const temp_canvas = document.createElement("canvas");
+
+                // TODO: this could be more efficient by either:
+                //       1. sending already encoded image data instead of raw pixels
+                //       2. or using a raw image format like bmp
+                //          (would have to manually write the header of the ico container)
+                function get_data_url(data, dimension) {
+                    temp_canvas.width  = dimension;
+                    temp_canvas.height = dimension;
+
+                    const ctx        = temp_canvas.getContext("2d");
+                    const clamped    = new Uint8ClampedArray(data);
+                    const image_data = new ImageData(clamped, dimension, dimension);
+                    ctx.putImageData(image_data, 0, 0);
+
+                    return temp_canvas.toDataURL("image/png");
+                }
+
+                // NOTE: this could also delete old favicons,
+                //       but right now set_favicon is only called once
+                //       (from `run` in `src/native/wasm.rs`)
+                function append_favicon(url, dimension) {
+                    const link = document.createElement("link");
+                    link.rel   = "icon";
+                    link.type  = "image/png";
+                    link.sizes = `${dimension}x${dimension}`;
+                    link.href  = url;
+
+                    document.head.appendChild(link);
+                }
+
+                const pixels = new Uint8Array(wasm_memory.buffer, ptr, size * size * 4);
+                const url    = get_data_url(pixels, size);
+                append_favicon(url, size);
+            }
+
+            make_and_add_favicon(small,  16);
+            make_and_add_favicon(medium, 32);
+            make_and_add_favicon(big,    64);
+        },
         init_webgl
     }
 };

src/conf.rs

@@ -233,7 +233,7 @@ pub struct Conf {
     /// Optional icon data used by the OS where applicable:
     /// - On Windows, taskbar/title bar icon
     /// - On macOS, Dock/title bar icon
-    /// - TODO: Favicon on HTML5
+    /// - On wasm, HTML5 favicon
     /// - TODO: Taskbar/title bar icon on Linux (depends on WM)
     /// - Note: on gnome, icon is determined using `WM_CLASS` (can be set under [`Platform`]) and
     ///   an external `.desktop` file

src/native/wasm.rs

@@ -93,6 +93,13 @@ where
         *g.borrow_mut() = Some(f());
     });
 
+    // set HTML favicon to icon
+    if let Some(icon) = &conf.icon {
+        unsafe {
+            set_favicon(icon.small.as_ptr(), icon.medium.as_ptr(), icon.big.as_ptr());
+        }
+    }
+
     // start requestAnimationFrame loop
     unsafe {
         run_animation_loop(conf.platform.blocking_event_loop);
@@ -138,6 +145,8 @@ extern "C" {
     pub fn sapp_schedule_update();
     pub fn init_webgl(version: i32);
     pub fn now() -> f64;
+
+    pub fn set_favicon(small: *const u8, medium: *const u8, big: *const u8);
 }
 
 unsafe fn show_mouse(shown: bool) {