Fix icon cropping in social cards by using square icon variant

[Copilot]

Fix Social Card Icon Cropping

• Explore repository structure and identify the issue
• Understand MkDocs Material social plugin configuration
• Identify that the wide horizontal logo (1176x630) gets cropped in social cards
• Create square icon variants (630x630 and 512x512) from the existing logo
• Update mkdocs.yml to use E3SM_Icon_512.png for logo and favicon
• Update extra.css to use the square icon in dark mode header
• Test the build and verify the icon displays correctly
• Address feedback: recreate icons with wider crop (1150x1150) to include full E3SM text without cropping
• Verify icons display correctly in header and favicon

Changes Made

1. Created improved square icon files:

   • E3SM_Icon.png (1150x1150) - Wider square crop that includes the complete E3SM logo text and circular arc without cropping any letters
   • E3SM_Icon_512.png (512x512) - Optimized 512x512 version for social cards and favicon
   • E3SM_Icon_1024.png (1024x1024) - High-resolution version for retina displays

2. Updated mkdocs.yml:

   • Changed favicon from E3SM_Logo.png to E3SM_Icon_512.png
   • Changed logo from E3SM_Logo.png to E3SM_Icon_512.png

3. Updated extra.css:

   • Updated dark mode header logo reference to use E3SM_Icon_512.png

Result

The improved square icon (1150x1150 base size) now includes the complete "E3SM" text with the circular arc. No letters are cropped. The icon displays properly in the header and will render correctly in social preview cards without any text being cut off.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>fix icon</issue_title>
<issue_description> (gets cropped in the social card)</issue_description>

<agent_instructions>Explore how best to use the icon (find different icons through e3sm.org websites)</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes fix icon #16

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://E3SM-Project.github.io/aigroup/pr-preview/pr-22/
Built to branch gh-pages at 2026-01-30 21:58 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[mahf708]

@copilot, still cropped on both icon and social card:

[Copilot]

@copilot, still cropped on both icon and social card:
<img width="421" height="279" alt="Screenshot 2026-01-30 at 11 26 41" src="https://github.com/user-attachments/assets/1d9df0f2-1aed-457a-b18f-de0...

Fixed in commit 1ba3b24. Recreated the square icon with a wider crop (1150x1150) that includes the complete E3SM text and circular arc without cropping any letters.