Azure Deployment Options

Blob Storage
Static hosting

Static Web Apps
Modern framework

App Service
Full web hosting

Azure CDN
Global delivery

Azure Blob Storage Static Website

Method 1: Blob Storage Hosting

Step 1: Create Storage Account

Open Azure Portal: portal.azure.com
Create resource ? Storage account
Resource group: Create new or use existing
Storage account name: yourwebsitestorage
Region: Choose closest to users
Performance: Standard (cheaper)
Redundancy: LRS (locally redundant) for cost savings
Review + create ? Create

Step 2: Enable Static Website

Go to your storage account
Data management ? Static website
Enable: Enabled
Index document name: index.html
Error document path: 404.html
Save
Note primary endpoint: https://yourwebsite.z13.web.core.windows.net/

Step 3: Upload Favicon Files

Via Azure Portal:

Storage browser ? Blob containers ? $web
Upload ? Select favicon files
Upload

Via Azure CLI:

# Upload single file
az storage blob upload \
  --account-name yourwebsitestorage \
  --container-name '$web' \
  --name favicon.ico \
  --file favicon.ico \
  --content-type "image/x-icon"

# Upload multiple files
az storage blob upload-batch \
  --account-name yourwebsitestorage \
  --destination '$web' \
  --source ./favicons \
  --pattern "favicon*"

# Set cache control
az storage blob update \
  --account-name yourwebsitestorage \
  --container-name '$web' \
  --name favicon.ico \
  --content-cache-control "public, max-age=31536000"

Step 4: Configure CORS (if needed)

az storage cors add \
  --account-name yourwebsitestorage \
  --services b \
  --methods GET HEAD \
  --origins '*' \
  --allowed-headers '*' \
  --exposed-headers '*' \
  --max-age 3600

Test: Access https://yourwebsite.z13.web.core.windows.net/favicon.ico

Azure CDN Configuration

Add CDN for Global Distribution

Create CDN Profile

Azure Portal ? Create resource ? CDN
Resource group: Same as storage account
Name: yourwebsite-cdn
Pricing tier: Standard Microsoft (good balance)
Create new CDN endpoint:
- Endpoint name: yourwebsite
- Origin type: Storage static website
- Origin hostname: Select your storage account
Create

CDN Endpoint URL

Your site will be available at:
https://yourwebsite.azureedge.net/

Configure Caching Rules

Go to CDN endpoint ? Caching rules:

Global caching rule:

Query string caching behavior: Ignore query strings
Caching behavior: Override
Cache expiration duration: 1 year

Custom caching rule:

Name: Favicon Long Cache
Match condition: Path ? Contains ? favicon
Caching behavior: Override
Cache expiration duration: 1 year

Custom Domain & HTTPS

CDN endpoint ? Custom domains ? Add custom domain
Custom hostname: www.yourdomain.com
Add CNAME record in DNS:
- Name: www
- Type: CNAME
- Value: yourwebsite.azureedge.net
Back in Azure ? Validate and add
Enable HTTPS:
- Custom domain HTTPS: On
- Certificate management: CDN managed (free)
- Wait 6-8 hours for certificate provisioning

Free SSL: Azure CDN provides free SSL certificates for custom domains via DigiCert.

Azure Static Web Apps

Method 2: Modern Framework Hosting

Create Static Web App

Azure Portal ? Create resource ? Static Web App
Resource group: Create or select existing
Name: yourwebsite
Plan type: Free (100 GB bandwidth/month)
Deployment source: GitHub
Sign in to GitHub and select repository
Build presets: Select framework (React, Vue, Angular, etc.)
App location: / or your app folder
Output location: build, dist, or framework default
Review + create ? Create

Favicon Configuration

Place favicons in your output folder (usually public or static):

your-app/
  public/            # or static/
    favicon.ico
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-512x512.png
    apple-touch-icon.png
    site.webmanifest

Custom Headers (staticwebapp.config.json)

{
  "routes": [
    {
      "route": "/favicon*",
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable"
      }
    },
    {
      "route": "/*.ico",
      "headers": {
        "Cache-Control": "public, max-age=31536000"
      }
    }
  ],
  "globalHeaders": {
    "content-security-policy": "default-src 'self'"
  },
  "mimeTypes": {
    ".ico": "image/x-icon",
    ".webmanifest": "application/manifest+json"
  }
}

Benefit: Static Web Apps automatically include global CDN, free SSL, and CI/CD from GitHub.

Azure App Service

Method 3: Full Web Application Hosting

ASP.NET Core / Blazor Setup

Place favicons in wwwroot folder:

YourBlazorApp/
  wwwroot/
    favicon.ico
    favicon-16x16.png
    favicon-32x32.png
    apple-touch-icon.png

web.config for IIS on App Service

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".ico" />
      <mimeMap fileExtension=".ico" mimeType="image/x-icon" />
      <remove fileExtension=".webmanifest" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
      
      <!-- Cache for 1 year -->
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
    </staticContent>
    
    <rewrite>
      <outboundRules>
        <rule name="Add Cache Header for Favicons">
          <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
          <conditions>
            <add input="{REQUEST_URI}" pattern="favicon" />
          </conditions>
          <action type="Rewrite" value="public, max-age=31536000" />
        </rule>
      </outboundRules>
    </rewrite>
  </system.webServer>
</configuration>

Deploy via Visual Studio

Right-click project ? Publish
Target: Azure ? Azure App Service (Windows)
Select or create App Service
Publish
Favicons automatically deployed to wwwroot

Note: App Service includes automatic HTTPS, but CDN requires separate configuration.

Cache Purging

Update Cached Favicons

Azure CDN Purge