How to download the favicon on any website

Here's a technical breakdown of how to trigger favicon downloads through browser console commands, with explanations of key implementation details:

Core Implementation

// Retrieve favicon URL from document metadata
const faviconLink = document.querySelector("link[rel*='icon']")?.href || "/favicon.ico";

// Create temporary anchor element
const link = document.createElement('a');
link.href = faviconLink;

// Configure download behavior
link.download = 'favicon.ico';  // Forces file download instead of navigation

// DOM manipulation required for Firefox compatibility
document.body.appendChild(link); 

// Simulate user click interaction
link.click();

// Cleanup DOM changes
document.body.removeChild(link);

Key Components Explained

1. Favicon Location Resolution

• Searches <link> elements for rel="icon" attributes
• Falls back to default /favicon.ico path
• Uses optional chaining (?.) for null safety

2. Anchor Element Configuration

• download attribute triggers file save dialog
• Filename explicitly set to favicon.ico
• Temporary element avoids visual pollution

3. Browser-Specific Handling

• Firefox requires DOM attachment for download initiation
• Element removal prevents memory leaks

4. Security Considerations

• Same-origin policy restrictions apply
• HTTPS sites block HTTP favicon downloads
• CORS headers may prevent cross-domain downloads

Full Implementation with Error Handling

function downloadFavicon(filename = 'favicon.ico') {
  try {
    const favicon = document.querySelector("link[rel*='icon']")?.href 
      || `${window.location.origin}/favicon.ico`;
    
    const link = document.createElement('a');
    link.href = favicon;
    link.download = filename;
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    return true;
  } catch (error) {
    console.error('Favicon download failed:', error);
    return false;
  }
}

// Usage example
downloadFavicon('website-favicon.ico');

Browser Compatibility Table

Common Use Cases

1. Browser extension development
2. Website asset backup tools
3. Favicon-based web scrapers
4. Progressive Web App (PWA) generators

Note: Modern browsers may block downloads without user interaction in some security contexts. This technique works best when executed through explicit user actions like button clicks.