Skip to content

Commit 9e520dc

Browse files
author
EC2 Default User
committed
feat: Add comprehensive favicon support for web UI
- Add favicon.ico, favicon-16x16.png, favicon-32x32.png for browser compatibility - Add apple-touch-icon.png for iOS devices - Add browserconfig.xml for Microsoft tiles - Update index.html with comprehensive favicon links and cache-busting - Add helper scripts for updating existing deployments - Add user documentation for favicon updates This ensures all IDP stack deployments show proper icons in browser tabs.
1 parent 1da0806 commit 9e520dc

File tree

4 files changed

+226
-9
lines changed

4 files changed

+226
-9
lines changed

‎FAVICON_UPDATE_GUIDE.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Adding Favicon Icons to Existing IDP Deployments
2+
3+
If you have an existing GenAI IDP stack deployment and want to add favicon icons to your web UI tabs, follow one of these methods:
4+
5+
## Method 1: Stack Update (Recommended)
6+
7+
This method updates your entire stack to the latest version, which includes favicon support:
8+
9+
### Steps:
10+
1. **Log into AWS Console** and navigate to CloudFormation
11+
2. **Find your IDP stack** (e.g., "IDP", "IDP-dev", "IDP-prod", etc.)
12+
3. **Click "Update"** on your stack
13+
4. **Select "Replace current template"**
14+
5. **Enter the template URL** for your region:
15+
- **US East (N.Virginia)**: `https://s3.us-east-1.amazonaws.com/aws-ml-blog-us-east-1/artifacts/genai-idp/idp-main.yaml`
16+
- **US West (Oregon)**: `https://s3.us-west-2.amazonaws.com/aws-ml-blog-us-west-2/artifacts/genai-idp/idp-main.yaml`
17+
6. **Review parameters** (keep existing values unless you want to change them)
18+
7. **Complete the update**
19+
20+
### Result:
21+
- Your stack will update to the latest version
22+
- CodeBuild will automatically rebuild the web UI with favicon support
23+
- Favicon icons will appear in browser tabs after completion (5-10 minutes)
24+
25+
## Method 2: Manual CodeBuild Trigger
26+
27+
If you prefer not to update your entire stack, you can manually trigger just the web UI rebuild:
28+
29+
### Using AWS CLI:
30+
```bash
31+
# Replace with your region and stack name
32+
REGION="us-east-1"
33+
STACK_NAME="IDP"
34+
35+
# Start the web UI build
36+
aws codebuild start-build \
37+
--project-name "${STACK_NAME}-webui-build" \
38+
--region "$REGION"
39+
```
40+
41+
### Using AWS Console:
42+
1. **Navigate to CodeBuild** in AWS Console
43+
2. **Find your project** (usually named `{StackName}-webui-build`)
44+
3. **Click "Start build"**
45+
4. **Wait for completion** (5-10 minutes)
46+
47+
## Method 3: Using the Helper Script
48+
49+
If you have AWS CLI configured, you can use this helper script:
50+
51+
```bash
52+
# Download the script
53+
curl -O https://raw.githubusercontent.com/your-repo/genaiic-idp-accelerator/main/trigger-favicon-update.sh
54+
chmod +x trigger-favicon-update.sh
55+
56+
# Run for default stack (IDP in us-east-1)
57+
./trigger-favicon-update.sh
58+
59+
# Run for specific stack and region
60+
./trigger-favicon-update.sh us-west-2 IDP-prod
61+
```
62+
63+
## What Gets Added
64+
65+
The favicon update includes:
66+
- **Multiple icon formats**: .ico, 16x16, 32x32, 192x192, 512x512 PNG files
67+
- **Apple touch icon**: For iOS devices
68+
- **Browser compatibility**: Works with all modern browsers
69+
- **Cache busting**: Ensures icons load properly
70+
71+
## Verification
72+
73+
After the update completes:
74+
1. **Clear browser cache** (Ctrl+F5 or Cmd+Shift+R)
75+
2. **Visit your web UI URL**
76+
3. **Check the browser tab** - you should see the AWS/IDP icon
77+
4. **Test on mobile** - icon should appear when bookmarked
78+
79+
## Troubleshooting
80+
81+
### Icons not appearing?
82+
- **Clear browser cache** completely
83+
- **Wait for CloudFront invalidation** (can take up to 15 minutes)
84+
- **Check build logs** in CodeBuild console
85+
86+
### Build failed?
87+
- **Check CodeBuild logs** for error details
88+
- **Verify IAM permissions** for the CodeBuild service role
89+
- **Try Method 1** (stack update) instead
90+
91+
### Need help?
92+
- **Check CloudFormation Events** tab for any errors
93+
- **Review CodeBuild build history** for failed builds
94+
- **Contact your AWS administrator** if permissions issues occur
95+
96+
## Stack Names to Look For
97+
98+
Common IDP stack naming patterns:
99+
- `IDP` (main stack)
100+
- `IDP-dev` (development)
101+
- `IDP-prod` (production)
102+
- `IDP-test` (testing)
103+
- `IDP-{custom-name}` (custom deployments)
104+
105+
The corresponding CodeBuild projects will be named:
106+
- `IDP-webui-build`
107+
- `IDP-dev-webui-build`
108+
- `IDP-prod-webui-build`
109+
- etc.

‎src/ui/public/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@
77
<head>
88
<meta charset="utf-8" />
99
<!-- Comprehensive favicon setup for all browsers -->
10-
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico?v=4" />
11-
<link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico?v=4" />
12-
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v=4" />
13-
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v=4" />
14-
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/logo192.png?v=4" />
15-
<link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/logo512.png?v=4" />
16-
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v=4" />
10+
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=5" />
11+
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5" />
12+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=5" />
13+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=5" />
14+
<link rel="icon" type="image/png" sizes="192x192" href="/logo192.png?v=5" />
15+
<link rel="icon" type="image/png" sizes="512x512" href="/logo512.png?v=5" />
16+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=5" />
1717
<meta name="viewport" content="width=device-width, initial-scale=1" />
1818
<meta name="theme-color" content="#0066cc" />
1919
<meta name="description" content="GenAI Intelligent Document Processing" />
2020
<meta name="msapplication-TileColor" content="#0066cc" />
21-
<meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml" />
21+
<meta name="msapplication-config" content="/browserconfig.xml" />
2222
<!--
2323
manifest.json provides metadata used when your web app is installed on a
2424
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
2525
-->
26-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
26+
<link rel="manifest" href="/manifest.json" />
2727
<!--
2828
Notice the use of %PUBLIC_URL% in the tags above.
2929
It will be replaced with the URL of the `public` folder during the build.

‎trigger-favicon-update.sh‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
#!/bin/bash
2+
3+
# Script to trigger favicon update for existing IDP stacks
4+
# Usage: ./trigger-favicon-update.sh [region] [stack-name]
5+
6+
REGION=${1:-us-east-1}
7+
STACK_NAME=${2:-IDP}
8+
9+
echo "=== Triggering favicon update for existing IDP stack ==="
10+
echo "Region: $REGION"
11+
echo "Stack: $STACK_NAME"
12+
echo ""
13+
14+
# Find the CodeBuild project name for the stack
15+
CODEBUILD_PROJECT="${STACK_NAME}-webui-build"
16+
17+
echo "Looking for CodeBuild project: $CODEBUILD_PROJECT"
18+
19+
# Check if the project exists
20+
if aws codebuild batch-get-projects --names "$CODEBUILD_PROJECT" --region "$REGION" --query 'projects[0].name' --output text 2>/dev/null | grep -q "$CODEBUILD_PROJECT"; then
21+
echo "✅ Found CodeBuild project: $CODEBUILD_PROJECT"
22+
23+
# Start the build
24+
echo "Starting build..."
25+
BUILD_ID=$(aws codebuild start-build --project-name "$CODEBUILD_PROJECT" --region "$REGION" --query 'build.id' --output text)
26+
27+
if [ $? -eq 0 ]; then
28+
echo "✅ Build started successfully!"
29+
echo "Build ID: $BUILD_ID"
30+
echo ""
31+
echo "Monitor progress at:"
32+
echo "https://console.aws.amazon.com/codesuite/codebuild/projects/$CODEBUILD_PROJECT/history?region=$REGION"
33+
echo ""
34+
echo "The favicon icons will be available once the build completes (usually 5-10 minutes)."
35+
else
36+
echo "❌ Failed to start build"
37+
exit 1
38+
fi
39+
else
40+
echo "❌ CodeBuild project '$CODEBUILD_PROJECT' not found in region '$REGION'"
41+
echo ""
42+
echo "Available CodeBuild projects:"
43+
aws codebuild list-projects --region "$REGION" --query 'projects' --output table
44+
exit 1
45+
fi

‎update-all-idp-favicons.sh‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
#!/bin/bash
2+
3+
# Script to update favicon for all IDP stacks in an AWS account
4+
# Usage: ./update-all-idp-favicons.sh [region]
5+
6+
REGION=${1:-us-east-1}
7+
8+
echo "=== Updating favicon for all IDP stacks in region: $REGION ==="
9+
echo ""
10+
11+
# Find all IDP stacks
12+
echo "Finding IDP stacks..."
13+
IDP_STACKS=$(aws cloudformation list-stacks \
14+
--region "$REGION" \
15+
--stack-status-filter CREATE_COMPLETE UPDATE_COMPLETE UPDATE_ROLLBACK_COMPLETE \
16+
--query 'StackSummaries[?contains(StackName, `IDP`) && !contains(StackName, `-PATTERN`) && !contains(StackName, `-DOCUMENT`) && !contains(StackName, `-BDA`)].StackName' \
17+
--output text)
18+
19+
if [ -z "$IDP_STACKS" ]; then
20+
echo "❌ No IDP stacks found in region $REGION"
21+
exit 1
22+
fi
23+
24+
echo "Found IDP stacks:"
25+
for stack in $IDP_STACKS; do
26+
echo " - $stack"
27+
done
28+
echo ""
29+
30+
# Process each stack
31+
for STACK_NAME in $IDP_STACKS; do
32+
echo "=== Processing stack: $STACK_NAME ==="
33+
34+
# Find the CodeBuild project
35+
CODEBUILD_PROJECT="${STACK_NAME}-webui-build"
36+
37+
# Check if the project exists
38+
if aws codebuild batch-get-projects --names "$CODEBUILD_PROJECT" --region "$REGION" --query 'projects[0].name' --output text 2>/dev/null | grep -q "$CODEBUILD_PROJECT"; then
39+
echo "✅ Found CodeBuild project: $CODEBUILD_PROJECT"
40+
41+
# Start the build
42+
echo "Starting build..."
43+
BUILD_ID=$(aws codebuild start-build --project-name "$CODEBUILD_PROJECT" --region "$REGION" --query 'build.id' --output text 2>/dev/null)
44+
45+
if [ $? -eq 0 ]; then
46+
echo "✅ Build started successfully!"
47+
echo "Build ID: $BUILD_ID"
48+
else
49+
echo "❌ Failed to start build for $STACK_NAME"
50+
fi
51+
else
52+
echo "⚠️ CodeBuild project '$CODEBUILD_PROJECT' not found - skipping"
53+
fi
54+
55+
echo ""
56+
done
57+
58+
echo "=== Summary ==="
59+
echo "Favicon update builds have been started for all applicable IDP stacks."
60+
echo "Monitor progress in the CodeBuild console:"
61+
echo "https://console.aws.amazon.com/codesuite/codebuild/projects?region=$REGION"
62+
echo ""
63+
echo "Favicon icons will be available once builds complete (usually 5-10 minutes per stack)."

0 commit comments

Comments
 (0)