{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreihxf7oyoc5sa56gulipybaoix2n5qgntcfxjwciul3xy7aswt3q4m",
    "uri": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/app.bsky.feed.post/3mnlsxwglfe2l"
  },
  "canonicalUrl": "https://til.iainsimmons.com/posts/screenshot-dom-nodes-to-create-favicon-and-open-graph-images",
  "description": "today iain learned: How to screenshot HTML DOM nodes and their CSS styles in the browser to create favicon and Open Graph images",
  "path": "/posts/screenshot-dom-nodes-to-create-favicon-and-open-graph-images",
  "publishedAt": "2026-01-25T00:00:00.000Z",
  "site": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/site.standard.publication/3mnlsntqzp72a",
  "tags": [
    "CSS",
    "browser",
    "images",
    "webdev",
    "HTML"
  ],
  "textContent": "While building out this blog, I realised I hadn't thought much about branding beyond the name \"today iain learned\" (a personal spin on \"Today I Learned\" or TIL) and didn't have a favicon or other images for sharing on social media (not that I'm very active on any social networks at the moment).\n\nI had sort of settled on a (default) dark theme with black, dark grey and a deep royal purple accent colour (from the appropriately named \"Obsidian\" theme from Astro Modular) and a monospace font (the classic JetBrains Mono), but my graphic design skills are not the greatest.\n\nSo I fell back to something I _am_ familiar with, web development. I first thought I would just build it out on the page with what was already there and then take a screenshot, crop it, and do all that, but I remembered (I think from a Syntax.fm podcast episode) that it's possible to take a screenshot from a DOM node (at least in Chromium-based browsers, I'm not sure about others).\n\nI started with the site title you can see in the header on this site. Then I made it way bigger, removed a bunch of other content from the page, upped the font and used the hover/accent purple colour for my name, and threw in the cyan border colour that I had added to code blocks.\n\nThen I simply used the Capture node screenshot command in the Elements panel of Chromium DevTools (I'm using the Helium Browser on my Linux computer) and with a bit of trial and error, tweaking the margins/padding to get just the right size, I got the result I was looking for, the Open Graph image shown below:\n\n![[attachments/open-graph-image-for-today-iain-learned.png|Open Graph image for today iain learned]]\n\nThen a little more tweaking to keep just the initials and crop to a square, without a border and I had my favicon:\n\n![[attachments/favicon-til.png|favicon with initials TIL in lowercase]]\n\nFinally, I replaced the existing image files used on this blog, pushed the changes and cleared the Cloudflare cache, and pretty quickly they were up and running.\n\nYou could use this for any number of different cases where you need to quickly generate some graphics without having to use a dedicated tool.\n\nAlso see Chrome DevTools Tips - 4 ways to capture screenshots with DevTools if you prefer learning with video content.",
  "title": "Screenshot DOM nodes to create favicon and Open Graph images"
}