Merge pull request #513 from MilesCranmer/add-favicon-to-docs

docs: generate favicon from logo

Author: MilesCranmer

.github/workflows/Documentation.yml

@@ -48,6 +48,8 @@ jobs:
         run: julia --project=docs/ -e 'using Pkg; Pkg.develop(PackageSpec(path=pwd())); Pkg.instantiate()'
       - name: "Install Node.js dependencies"
         run: cd docs && npm install
+      - name: "Install ImageMagick"
+        run: sudo apt-get update && sudo apt-get install -y imagemagick
       - name: "Build and deploy"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docs/make.jl

@@ -210,9 +210,43 @@ function fix_vitepress_base_path()
     end
 end
 
+# Generate favicon files from logo.png
+function generate_favicons()
+    logo_path = joinpath(@__DIR__, "src", "assets", "logo.png")
+    public_dir = joinpath(@__DIR__, "src", "public")
+
+    if !isfile(logo_path)
+        @warn "Logo file not found at: $logo_path - skipping favicon generation"
+        return false
+    end
+
+    mkpath(public_dir)
+
+    @info "Generating favicon files from logo.png..."
+
+    # Generate different sizes
+    favicon_configs = [
+        ("favicon.ico", "32x32"),
+        ("favicon-16x16.png", "16x16"),
+        ("favicon-32x32.png", "32x32"),
+        ("apple-touch-icon.png", "180x180"),
+    ]
+
+    for (filename, size) in favicon_configs
+        output_path = joinpath(public_dir, filename)
+        run(`magick $(logo_path) -resize $(size) -background none -gravity center -extent $(size) $(output_path)`)
+        @info "Generated: $filename"
+    end
+
+    return true
+end
+
 # Run preprocessing on source files before makedocs()
 preprocess_source_index()
 
+# Generate favicons before building docs
+generate_favicons()
+
 # Fix VitePress base path BEFORE makedocs() - this is crucial for timing!
 fix_vitepress_base_path()
 

docs/src/.vitepress/config.mts

@@ -40,7 +40,10 @@ export default defineConfig({
   cleanUrls: true,
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [
-    ['link', { rel: 'icon', href: `${baseTemp.base}favicon.ico` }],
+    ['link', { rel: 'icon', type: 'image/x-icon', href: `${baseTemp.base}favicon.ico` }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: `${baseTemp.base}favicon-16x16.png` }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: `${baseTemp.base}favicon-32x32.png` }],
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: `${baseTemp.base}apple-touch-icon.png` }],
     ['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
     // ['script', {src: '/versions.js'], for custom domains, I guess if deploy_url is available.
     ['script', {src: `${baseTemp.base}siteinfo.js`}]