glpython's own logo: favicon, apple-touch-icon, the mark in the top bar

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>glpython</title>
     <script src="/coi-serviceworker.js"></script>

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
-import { BookOpen, CircleHelp, Download, Info, EllipsisVertical, SlidersHorizontal, FileCode2, FilePlus2, Folder, FolderOpen, History, Link2, Lock, Pencil, Plus, RotateCcw, Sparkles, Trash2, Upload, X } from 'lucide-react'
+import { BookOpen, CircleHelp, Download, Info, EllipsisVertical, SlidersHorizontal, FileCode2, FilePlus2, Folder, FolderOpen, History, Link2, Lock, Pencil, Plus, RotateCcw, Trash2, Upload, X } from 'lucide-react'
 import { GlPythonWorkspace, addProjectFile, deleteProjectFile, renameProjectFile, updateProjectFile } from 'glpython-editor'
 import type { Project, ProjectFileKind, WorkspaceCommand } from 'glpython-editor'
 import 'glpython-editor/style.css'
@@ -8,6 +8,7 @@ import { exportProjectZip, importProjectFolder, importProjectZip } from './proje
 import { buildShareUrl, readSharedLinkFromLocation } from './projectShare'
 import { fetchLibrary, libraryHost, type LibraryState } from './libraries'
 import { renderMarkdown } from './markdown'
+import { GlpythonMark } from './GlpythonMark'
 import { capabilitiesOf, DEFAULT_FEATURES, FEATURE_NAMES, readFeaturesParam, type Feature } from './features'
 import { answerTabQueries, claimTabId, isEmptyProject, newTabEntry, otherLiveTabIds, projectFingerprint, pruneEntries, recentlyClosed, removeEntry, saveEntry, startTab, type TabEntry } from './tabProjects'
 import { detectLocale, localeNames, saveLocale, translations, type Locale } from './i18n'
@@ -423,7 +424,7 @@ function App() {
   return (
     <div className="ide">
       <header className="ide-bar">
-        <div className="ide-brand"><span className="ide-brand-mark" aria-hidden="true"><Sparkles size={16} /></span><span>glpython</span></div>
+        <div className="ide-brand"><span className="ide-brand-mark" aria-hidden="true"><GlpythonMark size={22} /></span><span>glpython</span></div>
         <div className="ide-actions" ref={setActionsContainer} />
         <div className="ide-bar-end">
           {shareCopied && <span className="ide-share-status" role="status">{t.shareCopied}</span>}

src/GlpythonMark.tsx

@@ -0,0 +1,16 @@
+// glpython's mark (the logo without its square): a balance bike that is also
+// an expression tree - the saddle a node, the two lines to the wheels edges
+// to two leaves. In currentColor, for the top bar's ink square; the same
+// drawing as public/favicon.svg.
+export function GlpythonMark({ size = 16 }: { size?: number }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} aria-hidden="true" focusable="false">
+      <rect x="7.25" y="7.5" width="8.5" height="3.8" rx="1.6" fill="currentColor" />
+      <g fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M11.5 10.8 L8.5 21.5 M11.5 10.8 L23.5 21.5" />
+        <circle cx="8.5" cy="21.5" r="5" />
+        <circle cx="23.5" cy="21.5" r="5" />
+      </g>
+    </svg>
+  )
+}