diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index 4f2d829..cb098c5 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -2,7 +2,7 @@ import Phaser from 'phaser';
 import topHudSrc from './assets/controller/top-hud.js';
 import leftStatusSrc from './assets/controller/left-status.js';
 import rightControlsSrc from './assets/controller/right-controls.js';
-import cannonRoundelSrc from './assets/controller/cannon-roundel.js';
+import cannonRoundelBase64 from './assets/controller/cannon-roundel.js';
 import helmSpriteSheetSrc from './assets/controller/helm-action.js';
 
 const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
@@ -392,6 +392,9 @@ if (!isDesktopPointer.matches) {
     hud.id = 'controller-hud';
     root.prepend(hud);
 
+    const cannonBytes = Uint8Array.from(atob(cannonRoundelBase64), (char) => char.charCodeAt(0));
+    const cannonRoundelSrc = URL.createObjectURL(new Blob([cannonBytes], { type: 'image/jpeg' }));
+
     const addPiece = (className, src, inner = '') => {
       const piece = document.createElement('div');
       piece.className = `steam-piece ${className}`;