Add PNG favicon fallbacks (16/32/48/192/512) alongside the SVG icon

Some browsers and embed/preview contexts don't use SVG favicons. Render the
tile icon to PNG at the standard sizes and reference 16/32 as fallbacks after
the SVG in index.html, play.html, and the generated pages (shell.mjs). Small
sizes use the clean favicon.svg (no glow/joint dots so it stays crisp); 192
and 512 use the richer posecode-icon.svg for PWA/Android and general use.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B7RkyiTt9soiYdw5vt6BEP

Author: claude

playground/index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Posecode: Describe Human Movement as Text, Animated in 3D</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta
       name="description"

playground/play.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Posecode Playground: Write and Preview 3D Human Movement as Text</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta
       name="description"

playground/public/favicon-16.png

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>How to Teach an LLM to Write Posecode: The Authoring Guide</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="description" content="The system prompt that teaches ChatGPT, Claude, or Gemini to author valid .posecode documents: syntax, joints, phases, and worked examples." />
     <link rel="canonical" href="https://posecode.org/llm-guide.html" />

playground/public/favicon-192.png

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Arm circles: How to Do It (Animated 3D Guide) | Posecode</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="description" content="How to do the arm circles (warm-up): 3 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs." />
     <link rel="canonical" href="https://posecode.org/moves/arm-circles.html" />

playground/public/favicon-32.png

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bent-over row: How to Do It (Animated 3D Guide) | Posecode</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="description" content="How to do the bent-over row (fitness): 4 phases targeting the lats, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs." />
     <link rel="canonical" href="https://posecode.org/moves/bent-over-row.html" />