low-code-react-app-b/docs/guides/FAVICON_DESIGNER_ACCESS.md

How to Access the Favicon Designer

Three Ways to Access

1. Via Global Search (Recommended)

1. Press Ctrl+K (or Cmd+K on Mac)
2. Type "favicon"
3. Click on "Favicon Designer" in the search results
4. You'll be taken directly to the Favicon Designer page

2. Via Navigation Menu

1. Click the hamburger menu icon (☰) in the top-left corner of the app
2. Look for the "Design & Styling" section
3. Click on "Favicon Designer"
4. The menu will close and you'll be on the Favicon Designer page

3. Via Direct URL

You can also access it by adding ?shortcut=favicon to your URL

Troubleshooting a Blank Page

If you navigate to the Favicon Designer and see a blank page, try these solutions:

Check if the Feature is Enabled

1. Click the hamburger menu (☰) in the top-left
2. Scroll to "Tools & Configuration" section
3. Click on "Features"
4. Find "Favicon Designer" in the list
5. Make sure the toggle is ON (blue/enabled)
6. Navigate back to the Favicon Designer

Clear Your Browser Cache

Sometimes stale data can cause rendering issues:

1. Press Ctrl+Shift+Delete (Windows/Linux) or Cmd+Shift+Delete (Mac)
2. Clear cached images and files
3. Refresh the page

Check Browser Console

1. Press F12 to open developer tools
2. Click the Console tab
3. Look for any red error messages
4. If you see errors, they might indicate what's wrong

What You Should See

When the Favicon Designer loads correctly, you should see:

• Left Panel: A large preview canvas showing your favicon design
• Right Panel: Design controls including:
  • Design name input
  • Canvas size selector (16px to 512px)
  • Background color picker
  • Add Elements buttons (Circle, Square, Triangle, Star, Heart, Polygon, Text, Emoji)
  • Element list showing current elements
  • Element editor when an element is selected
• Export Buttons: At the bottom of the preview area for exporting PNG, SVG, or all sizes

Default Design

The Favicon Designer should load with a default design showing:

• Purple background (#7c3aed)
• White "CF" text in the center
• 128x128px canvas size

Still Having Issues?

If none of the above solutions work:

1. Try refreshing the page (Ctrl+R or Cmd+R)
2. Try opening the app in an incognito/private browser window
3. Check if other features/tabs are working properly
4. The issue might be with browser compatibility or a temporary glitch

Feature Capabilities

Once you're in the Favicon Designer, you can:

• Create multiple favicon designs
• Add shapes, text, and emojis
• Adjust colors, positions, rotations, and sizes
• Export in multiple formats (PNG, SVG, ICO)
• Export all common sizes at once (16, 32, 48, 64, 128, 256, 512)
• Duplicate and manage multiple designs