Favicons for HN

favicons-hn.user.js

// ==UserScript==
// @name        Favicons for HN
// @namespace   Violentmonkey Scripts
// @match https://*.ycombinator.com/*
// @grant       none
// @version     1.0
// @author      [email protected]
// @description 12/19/2022, 9:34:53 AM
// @inject-into content
// ==/UserScript==

var favicons = document.getElementsByClassName("favicon");
if (!(favicons.length > 0)) {
	const articleLinks = document.querySelectorAll(".titleline > a");
	for (let link of articleLinks) {
		const domain = new URL(link.href).hostname;
		const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`;
		const imgEl = document.createElement("img");
		imgEl.src = imageUrl;
		imgEl.className = "favicon";
		imgEl.width = 14;
		imgEl.height = 14;
		imgEl.style.paddingRight = "0.25em";
		imgEl.style.paddingLeft = "0.25em";
		link.style.alignItems = "center";
		link.style.display = "inline-flex";
		link.style.justifyContent = "center";
		link.prepend(imgEl);
	}
}

here's an alternative that uses the google API to fetch the favicons. Don't know why but on my devices, all the favicons coming from the duckduckgo API render out to a grey circled arrow.

Thank you for this cool user-script though !

// ==UserScript==
// @name        Favicons for HN
// @namespace   Violentmonkey Scripts
// @match https://*.ycombinator.com/*
// @grant       none
// @version     1.0
// @author      [email protected]
// @description 07/06/2023, 08:48:00 AM
// @inject-into content
// ==/UserScript==

var favicons = document.getElementsByClassName("favicon");
if (!(favicons.length > 0)) {
	const articleLinks = document.querySelectorAll(".titleline > a");
	for (let link of articleLinks) {
		const domain = new URL(link.href).hostname;
                const imageUrl = `https://s2.googleusercontent.com/s2/favicons?domain=${domain}&sz=32`;
		const imgEl = document.createElement("img");
		imgEl.src = imageUrl;
		imgEl.className = "favicon";
		imgEl.width = 14;
		imgEl.height = 14;
		imgEl.style.paddingRight = "0.25em";
		imgEl.style.paddingLeft = "0.25em";
		link.style.alignItems = "center";
		link.style.display = "inline-flex";
		link.style.justifyContent = "center";
		link.prepend(imgEl);
	}
}

Alternative - https://hackernews.betacat.io/

with:

• favicon
• summary
• illustration