The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Make a favicon extractor

Written by

Bernardo Palos

in

Here’s a simple Favicon Extractor built using HTML, JavaScript, and a bit of CSS. It takes a URL and tries to extract the site’s favicon.

Features:

  • Input a domain (e.g., https://example.com)

  • Automatically generates and displays the favicon using conventional favicon paths

  • Option to download the favicon

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Favicon Extractor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
    }
    input[type="url"] {
      padding: 10px;
      font-size: 16px;
      width: 300px;
      margin-right: 10px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    #faviconResult {
      margin-top: 30px;
      text-align: center;
    }
    #faviconResult img {
      width: 64px;
      height: 64px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    a.download-link {
      display: block;
      margin-top: 10px;
      text-decoration: none;
      color: #0066cc;
    }
  </style>
</head>
<body>

  <h1>Favicon Extractor</h1>

  <div>
    <input type="url" id="websiteUrl" placeholder="Enter website URL (e.g., https://example.com)" />
    <button onclick="getFavicon()">Extract</button>
  </div>

  <div id="faviconResult"></div>

  <script>
    function getFavicon() {
      const urlInput = document.getElementById('websiteUrl').value;
      const resultDiv = document.getElementById('faviconResult');
      resultDiv.innerHTML = '';

      try {
        const url = new URL(urlInput);
        const faviconURL = `${url.origin}/favicon.ico`;

        const img = document.createElement('img');
        img.src = faviconURL;
        img.alt = "Favicon";
        img.onerror = () => {
          resultDiv.innerHTML = "Favicon not found or site is inaccessible.";
        };

        const link = document.createElement('a');
        link.href = faviconURL;
        link.className = "download-link";
        link.innerText = "Download Favicon";
        link.setAttribute("download", "favicon.ico");

        resultDiv.appendChild(img);
        resultDiv.appendChild(link);
      } catch (e) {
        resultDiv.innerHTML = "Invalid URL format.";
      }
    }
  </script>

</body>
</html>

Usage:

  1. Copy the above code into an .html file.

  2. Open it in any web browser.

  3. Enter a full website URL like https://github.com.

  4. Click Extract, and it will fetch and show the favicon with a download link.

Let me know if you want it to support alternate favicon formats like apple-touch-icon, or parse from <link rel="icon"> dynamically.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About