Javascript code to extract favicon URL

What is favicon?

A favicon (short for "favorite icon") is a small icon associated with a particular website or webpage. It is typically displayed in a browser's tab, bookmark list, or address bar, next to the page title, making it easy to visually identify a website. Favicons are usually square and can have various formats, such as .ico, .png, .gif, or .svg.

Key Features of a Favicon:

1. Size: Common sizes for favicons are 16x16, 32x32, or 48x48 pixels. However, modern websites often include multiple sizes to support high-resolution displays.
2. File Types: Favicons are commonly provided in .ico format (specially designed for icons), but many websites now use .png or .svg due to better scalability and quality.
3. Location: Favicons are typically linked in the HTML <head> section using a <link> tag.

Example in HTML:

<head>
  <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
</head>

To extract the favicon URL from an HTML string using JavaScript, you can parse the HTML and look for the <link> tags that specify the favicon, usually with the rel attribute set to "icon", "shortcut icon", or similar. Here's how you can achieve that:

Code to extract the favicon URL:

function getFaviconUrlFromHtml(html) {
  // Create a DOM parser to parse the HTML string
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  
  // Look for a link tag with rel="icon" or rel="shortcut icon"
  const faviconLink = doc.querySelector('link[rel="icon"], link[rel="shortcut icon"]');
  
  // Return the href attribute value if the link tag is found
  return faviconLink ? faviconLink.href : null;
}

// Example HTML input (replace with your HTML content)
const htmlText = `
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">
  <title>Example Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
`;

// Extract the favicon URL
const faviconUrl = getFaviconUrlFromHtml(htmlText);
console.log(faviconUrl); // Outputs: https://example.com/favicon.ico

Explanation:

1. DOMParser: Converts the HTML string into a DOM object.
2. querySelector: Searches for <link> tags where the rel attribute is either "icon" or "shortcut icon".
3. href attribute: Returns the URL of the favicon from the href attribute if found.

This method assumes the HTML contains a valid <link> element for the favicon. If no favicon link is found, it will return null.