Cloudflare Favicon Optimization Guide

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  
  // Intercept favicon requests
  if (url.pathname === '/favicon.ico') {
    // Check cache first
    const cache = caches.default
    let response = await cache.match(request)
    
    if (!response) {
      // Fetch from origin if not cached
      response = await fetch(request)
      
      // Clone and cache for 1 year
      const cacheResponse = response.clone()
      const headers = new Headers(cacheResponse.headers)
      headers.set('Cache-Control', 'public, max-age=31536000')
      
      const cachedResponse = new Response(cacheResponse.body, {
        status: cacheResponse.status,
        statusText: cacheResponse.statusText,
        headers: headers
      })
      
      event.waitUntil(cache.put(request, cachedResponse))
    }
    
    return response
  }
  
  // Pass through other requests
  return fetch(request)
}