Add PNG favicons/og-image, fix social meta tags for PNG support

claude · claude · commit ab89c7299f2b · 2026-03-31T09:28:08.000+02:00
Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/claude-3d.html b/claude-3d.html
@@ -16,7 +16,7 @@
   <meta property="og:url" content="https://sceneview.github.io/claude-3d.html">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:alt" content="AI + 3D — Claude generating SceneView 3D content">
@@ -25,25 +25,26 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="AI-Powered 3D — Claude + SceneView">
   <meta name="twitter:description" content="See how Claude Desktop generates interactive 3D content with SceneView MCP.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
   <link rel="preload" href="styles.css" as="style">
   <link rel="preload" href="js/filament/filament.js" as="script">
-  <link rel="preload" href="js/sceneview.js?v=3.5.2" as="script">
+  <link rel="preload" href="js/sceneview.js?v=3.6.0" as="script">
 
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
 
   <!-- Filament.js v1.70.1 WASM engine (required by SceneView Web) -->
   <script src="js/filament/filament.js"></script>
   <!-- SceneView Web library -->
-  <script src="js/sceneview.js?v=3.5.2"></script>
+  <script src="js/sceneview.js?v=3.6.0"></script>
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
 
   <style>
diff --git a/docs.html b/docs.html
@@ -11,13 +11,13 @@
   <meta property="og:description" content="Quick start guides, API reference, tutorials for building 3D and AR apps with SceneView.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://sceneview.github.io/docs.html">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Documentation — SceneView">
   <meta name="twitter:description" content="Quick start guides, API reference, tutorials for building 3D and AR apps with SceneView.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
   <meta name="theme-color" content="#005bc1">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
@@ -27,7 +27,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
   <style>
     /* ===== DOCS PAGE ===== */
diff --git a/favicon-192.png b/favicon-192.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/geometry-demo.html b/geometry-demo.html
@@ -911,7 +911,7 @@
     "Use Scene { } composable with CubeNode, SphereNode, CylinderNode to build a miniature city " +
     "with buildings of different heights, a park with trees (cylinder trunks + sphere canopies), " +
     "and a reflective water feature. Apply PBR materials with varying metallic and roughness values. " +
-    "Include the dependency: io.github.sceneview:sceneview:3.5.2"
+    "Include the dependency: io.github.sceneview:sceneview:3.6.0"
   );
   window.open('https://claude.ai/new?q=' + prompt, '_blank');
 }
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
   <meta property="og:url" content="https://sceneview.github.io/">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:alt" content="SceneView — 3D and AR SDK for every platform">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
@@ -30,7 +30,7 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="SceneView — 3D & AR SDK for every platform">
   <meta name="twitter:description" content="Open-source, AI-first SDK for 3D and AR on Android, iOS, Web, Desktop, TV, Flutter, and React Native. Declarative API with Jetpack Compose and SwiftUI.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
   <meta name="twitter:image:alt" content="SceneView — 3D and AR SDK for every platform">
 
   <!-- Preconnect hints -->
@@ -52,7 +52,8 @@
   <script src="js/sceneview.js?v=3.6.0"></script>
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
 
   <!-- Structured Data -->
diff --git a/og-image.png b/og-image.png
diff --git a/platforms-showcase.html b/platforms-showcase.html
@@ -11,19 +11,19 @@
     <meta property="og:description" content="Native 3D rendering on Android, iOS, macOS, visionOS, Web, TV, Flutter, React Native.">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://sceneview.github.io/platforms-showcase.html">
-    <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+    <meta property="og:image" content="https://sceneview.github.io/og-image.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
     <meta property="og:image:alt" content="SceneView — one SDK, every screen">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="SceneView — One SDK, Every Screen">
     <meta name="twitter:description" content="Native 3D rendering on Android, iOS, macOS, visionOS, Web, TV, Flutter, React Native.">
-    <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+    <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
     <meta name="theme-color" content="#005bc1">
     <meta property="og:site_name" content="SceneView">
     <meta property="og:locale" content="en_US">
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
diff --git a/playground.html b/playground.html
@@ -20,15 +20,15 @@
   <meta property="og:url" content="https://sceneview.github.io/playground.html">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
 
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Playground — SceneView">
   <meta name="twitter:description" content="Interactive code playground for SceneView — 3D & AR SDK for every platform.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
 
   <!-- Structured Data -->
   <script type="application/ld+json">
@@ -59,7 +59,8 @@
   <script src="js/sceneview.js?v=3.6.0"></script>
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
 
   <style>
diff --git a/privacy.html b/privacy.html
@@ -11,13 +11,13 @@
   <meta property="og:description" content="SceneView Demo does not collect, store, or transmit any personal data.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://sceneview.github.io/privacy.html">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content="Privacy Policy — SceneView">
   <meta name="twitter:description" content="SceneView Demo privacy policy. No personal data collected.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
   <meta name="theme-color" content="#005bc1">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
@@ -27,7 +27,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
   <style>
     /* ===== PRIVACY PAGE ===== */
diff --git a/sceneview-3d-chart.html b/sceneview-3d-chart.html
@@ -175,7 +175,7 @@ <h1 id="title">Q1 2026 Revenue by Region</h1>
   <span class="rendered">Rendered by</span>
   <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7v10l10 5 10-5V7L12 2z" stroke="#60a5fa" stroke-width="1.6" fill="rgba(96,165,250,0.1)"/><path d="M12 22V12M2 7l10 5 10-5" stroke="#60a5fa" stroke-width="1.6"/></svg>
   <span class="sv-name">SceneView</span>
-  <span class="sv-version">v3.5.2</span>
+  <span class="sv-version">v3.6.0</span>
 </div>
 
 <div id="scene-nav"></div>
@@ -184,10 +184,10 @@ <h1 id="title">Q1 2026 Revenue by Region</h1>
 <canvas id="viewer"></canvas>
 
 <script src="js/filament/filament.js"></script>
-<script src="js/sceneview.js?v=3.5.2"></script>
+<script src="js/sceneview.js?v=3.6.0"></script>
 <script>
 // ================================================================
-// SceneView 3D Business Charts v2 — Full v3.5.2 Feature Showcase
+// SceneView 3D Business Charts v2 — Full v3.6.0 Feature Showcase
 // Bloom, Vignette, animateCamera, Point Lights, Orbit Controls
 // ================================================================
 
@@ -505,7 +505,7 @@ <h1 id="title">Q1 2026 Revenue by Region</h1>
   skybox: false,
 }).then(function(instance) {
   svInstance = instance;
-  console.log("SceneView 3D Charts v2 — v3.5.2 Feature Showcase");
+  console.log("SceneView 3D Charts v2 — v3.6.0 Feature Showcase");
 
   // === Camera setup ===
 
diff --git a/showcase.html b/showcase.html
@@ -11,14 +11,14 @@
   <meta property="og:description" content="Interactive showcase: e-commerce, AR furniture, automotive configurators, medical visualization, multi-platform 3D.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://sceneview.github.io/showcase.html">
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:alt" content="SceneView 3D &amp; AR SDK showcase">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Showcase — SceneView 3D &amp; AR SDK">
   <meta name="twitter:description" content="Interactive showcase: e-commerce, AR furniture, automotive configurators, medical visualization, multi-platform 3D.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
   <meta name="theme-color" content="#005bc1">
   <meta property="og:site_name" content="SceneView">
   <meta property="og:locale" content="en_US">
@@ -58,7 +58,8 @@
   <script src="js/sceneview.js?v=3.6.0"></script>
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
 
   <style>
diff --git a/web.html b/web.html
@@ -22,9 +22,9 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="SceneView Web — One Line 3D for the Web">
   <meta name="twitter:description" content="The lightest way to add 3D to any website. One script tag, one function call. 25KB library powered by Filament.js WASM.">
-  <meta name="twitter:image" content="https://sceneview.github.io/og-image.svg">
+  <meta name="twitter:image" content="https://sceneview.github.io/og-image.png">
 
-  <meta property="og:image" content="https://sceneview.github.io/og-image.svg">
+  <meta property="og:image" content="https://sceneview.github.io/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:alt" content="SceneView Web — 3D for the Web">
@@ -34,18 +34,19 @@
 
   <link rel="preload" href="styles.css" as="style">
   <link rel="preload" href="js/filament/filament.js" as="script">
-  <link rel="preload" href="js/sceneview.js?v=3.5.2" as="script">
+  <link rel="preload" href="js/sceneview.js?v=3.6.0" as="script">
 
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
 
   <!-- Filament.js v1.70.1 WASM engine (required by SceneView Web) -->
   <script src="js/filament/filament.js"></script>
   <!-- SceneView Web library -->
-  <script src="js/sceneview.js?v=3.5.2"></script>
+  <script src="js/sceneview.js?v=3.6.0"></script>
 
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="styles.css">
 
   <style>
@@ -757,7 +758,7 @@
     "url": "https://sceneview.github.io/web.html",
     "applicationCategory": "DeveloperApplication",
     "operatingSystem": "Web",
-    "softwareVersion": "3.5.2",
+    "softwareVersion": "3.6.0",
     "license": "https://github.com/sceneview/sceneview/blob/main/LICENSE",
     "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
     "author": {
@@ -836,7 +837,7 @@ <h1 class="web-hero__title">One Line 3D for the Web</h1>
 
       <div class="web-hero__code">
 <span class="syn-comment">&lt;!-- That's it. Two lines. --&gt;</span>
-<span class="syn-tag">&lt;script</span> src="<span class="syn-string">https://cdn.jsdelivr.net/npm/sceneview-web@3.5.2/sceneview.js</span>"<span class="syn-tag">&gt;&lt;/script&gt;</span>
+<span class="syn-tag">&lt;script</span> src="<span class="syn-string">https://cdn.jsdelivr.net/npm/sceneview-web@3.6.0/sceneview.js</span>"<span class="syn-tag">&gt;&lt;/script&gt;</span>
 <span class="syn-tag">&lt;script&gt;</span> <span class="syn-fn">SceneView.modelViewer</span>(<span class="syn-string">"canvas"</span>, <span class="syn-string">"model.glb"</span>) <span class="syn-tag">&lt;/script&gt;</span>
       </div>
     </div>
@@ -1029,7 +1030,7 @@ <h2 class="web-install__title">Install</h2>
       <div class="web-install__grid">
         <div class="web-install-card reveal">
           <div class="web-install-card__label">CDN (fastest)</div>
-          <div class="web-install-card__code">&lt;script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.5.2/sceneview.js"&gt;&lt;/script&gt;</div>
+          <div class="web-install-card__code">&lt;script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.6.0/sceneview.js"&gt;&lt;/script&gt;</div>
         </div>
 
         <div class="web-install-card reveal">
@@ -1045,7 +1046,7 @@ <h2 class="web-install__title">Install</h2>
         <div class="web-install-card reveal">
           <div class="web-install-card__label">Script tag + init</div>
           <div class="web-install-card__code">&lt;canvas id="viewer"&gt;&lt;/canvas&gt;
-&lt;script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.5.2/sceneview.js"&gt;&lt;/script&gt;
+&lt;script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.6.0/sceneview.js"&gt;&lt;/script&gt;
 &lt;script&gt;
   SceneView.modelViewer("viewer", "model.glb", {
     autoRotate: true

Original file line number	Diff line number	Diff line change
`@@ -911,7 +911,7 @@`
`911`	`911`	`"Use Scene { } composable with CubeNode, SphereNode, CylinderNode to build a miniature city " +`
`912`	`912`	`"with buildings of different heights, a park with trees (cylinder trunks + sphere canopies), " +`
`913`	`913`	`"and a reflective water feature. Apply PBR materials with varying metallic and roughness values. " +`
`914`		`- "Include the dependency: io.github.sceneview:sceneview:3.5.2"`
	`914`	`+ "Include the dependency: io.github.sceneview:sceneview:3.6.0"`
`915`	`915`	`);`
`916`	`916`	`window.open('https://claude.ai/new?q=' + prompt, '_blank');`
`917`	`917`	`}`