2d:null 2e:["$","title",null,{"children":"Experimenting with icon resolution | Factorio Wire Icons Project | Observable"}] 33:T4ab,With a tiny `data-final-fixes.lua` script we can test this out! ```lua local function patch(name, icons, small_icons) local proto = data.raw["shortcut"][name] proto.icon = nil proto.icon_size = nil proto.icon_size = nil proto.small_icon_size = nil proto.icons = icons proto.small_icons = small_icons end local f24 = "__wire-ex__/24.png" local f48 = "__wire-ex__/48.png" local f96 = "__wire-ex__/96.png" local f56 = "__wire-ex__/56.png" local blank = "__wire-ex__/blank.png" -- scale api docs: Defaults to (expected_icon_size / 2) / icon_size. -- expected_icon_size = 32 for ShortcutPrototype::icons. -- If icon_size = 56, that works out to 16/56 ≈ 0.2857 local scale56 = 16/56 patch("copy", { { icon = f56, icon_size = 56 }, { icon = f48, icon_size = 48, scale = scale56 } }, { { icon = f48, icon_size = 48 } }) ``` And voila: ${await FileAttachment("image@4.png").image({style:"height:160px;image-rendering: pixelated;"})} ${await FileAttachment("image@3.png").image({style:"height:160px;object-fit: contain;image-rendering: pixelated;"})} Assuming we then use a blank png for the first layer, this should work! Let's render the G at 48x48 with mips down to 12x12: 34:T4d8,debug = async (dim, mip, c, c2) => { const extendedWidthForMips = dim * (2 - 1 / 2 ** mip) const canvas = htl.html`

`; const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.lineWidth = 1; // The margin seen in the default 56px toolbar icons, e.g. 8px let fit = 80; while (fit > dim) fit /= 2; let margin = (dim - fit) / 2; let x = 0; while(mip --> 0) { ctx.fillStyle = c ctx.fillRect(x, 0, dim, dim); if (c2) { ctx.strokeStyle = c2; ctx.stroke(new Path2D([ 'M', x+margin+0.5, 0, 'v', dim, 'M', x+dim-margin-0.5, 0, 'v', dim, 'M', x, margin+0.5, 'h', dim, 'M', x, dim-margin-0.5, 'h', dim, ].join(' '))) ctx.strokeStyle = "black"; } ctx.strokeRect(x+0.5, 0.5, dim-1, dim-1); ctx.font = `${dim*.7}px monospace`; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.textRendering = "geometricPrecision"; ctx.fillStyle = 'black' ctx.fillText(dim, x + dim/2, dim/2) x += dim; dim /= 2; margin /= 2; } return canvas }35:[{"id":"77b192ddf41001bbc9fcb1713c6fc776f0ca5c0ec5936c1c116e1b261eef5de86b797ff909510570c0e86a804492019cd34dd2628c6cb577a374620cde611ecb","href":"https://static.observableusercontent.com/files/77b192ddf41001bbc9fcb1713c6fc776f0ca5c0ec5936c1c116e1b261eef5de86b797ff909510570c0e86a804492019cd34dd2628c6cb577a374620cde611ecb","name":"image@1.png","type":"image/png","lastModified":1786287813607.691,"size":12369},{"id":"bed6d895b97c118aced0938e906e2dc2ef1c8f662287e0eac1154c2798ad682b94f4010a2e0989e4c9cd56396469c0423e90f47e73ce820b9b408e05719c709c","href":"https://static.observableusercontent.com/files/bed6d895b97c118aced0938e906e2dc2ef1c8f662287e0eac1154c2798ad682b94f4010a2e0989e4c9cd56396469c0423e90f47e73ce820b9b408e05719c709c","name":"image@2.png","type":"image/png","lastModified":1786642952088.429,"size":2295},{"id":"4d58c21acc167335cae52de620e8f6a5d1a643170f1abcb76cd47de51e0babcc474784beebf3725df1aa335e165b2874a1c2b8df8730cc0b99f8cc30f22dca63","href":"https://static.observableusercontent.com/files/4d58c21acc167335cae52de620e8f6a5d1a643170f1abcb76cd47de51e0babcc474784beebf3725df1aa335e165b2874a1c2b8df8730cc0b99f8cc30f22dca63","name":"image@3.png","type":"image/png","lastModified":1786643020101.548,"size":4561},{"id":"057241e5d42dc59cc0e6aa177f2f93a03ddf6ff34cf465de1fa3ba405bbc24ae8da1c2ffa98b2b4f232d5173a8422ea80b89e532add61b23416059079895a871","href":"https://static.observableusercontent.com/files/057241e5d42dc59cc0e6aa177f2f93a03ddf6ff34cf465de1fa3ba405bbc24ae8da1c2ffa98b2b4f232d5173a8422ea80b89e532add61b23416059079895a871","name":"image@4.png","type":"image/png","lastModified":1786643365433.5,"size":2285},{"id":"89693f37ab87d3aafcce72dfcb34d2d0fb8ef2c66a81867acccb9f616a66d290ecec3f6e23e4368a1a480d6c3eb423a6fe609fb1ca0db53b2c510eb8b6f36f3f","href":"https://static.observableusercontent.com/files/89693f37ab87d3aafcce72dfcb34d2d0fb8ef2c66a81867acccb9f616a66d290ecec3f6e23e4368a1a480d6c3eb423a6fe609fb1ca0db53b2c510eb8b6f36f3f","name":"image@5.png","type":"image/png","lastModified":1786644269521.501,"size":7673}] 31:{"id":"c88e63b9522e9733","slug":"experimenting-with-icon-resolution","title":"Experimenting with icon resolution","thumbnail":"db3fd567b1f39fc379ef8592b3fdbf6adbbf231249ad8bcc88b13c6d8a787a62","access_level":"public","create_time":"$D2026-08-09T13:43:28.913Z","update_time":"$D2026-08-13T18:56:06.926Z","view_time":null,"first_public_time":"$D2026-08-11T11:29:18.510Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"122e2157e0727cb3","login":"supermikal-factorio-wire-icons","name":"Factorio Wire Icons Project","avatar_url":"https://avatars-next.observableusercontent.com/8d1f1941c291d60cafeff6822b8b6021c3b10760823f1421ce84db138e94f128","tier":"starter_2024"},"version":532,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd5ad0253f4ceb03","login":"supermikal","name":"Mikal Hitsøy Henriksen","avatar_url":"https://avatars-next.observableusercontent.com/3494bf57b7ab1aa05cce1a2f4a53a5849448d33bb9fa90da0d1ea74a58548cdb","tier":null}],"members":[{"type":"individual","id":"dd5ad0253f4ceb03","login":"supermikal","name":"Mikal Hitsøy Henriksen","avatar_url":"https://avatars-next.observableusercontent.com/3494bf57b7ab1aa05cce1a2f4a53a5849448d33bb9fa90da0d1ea74a58548cdb","tier":null,"role":"editor"},{"type":"team","id":"122e2157e0727cb3","login":"supermikal-factorio-wire-icons","name":"Factorio Wire Icons Project","avatar_url":"https://avatars-next.observableusercontent.com/8d1f1941c291d60cafeff6822b8b6021c3b10760823f1421ce84db138e94f128","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Experimenting with icon resolution","cells":[{"id":0,"value":"# Experimenting with icon resolution\n\nThe toolbar shortcut icons are 56x56 px, while the mini icons in the shortcut selector menu are 24x24 px. The main icons are made with an 8 px margin, while the small icons are flush with the edges. This causes a design flaw where using the same svg to render both outputs makes it impossible to get crisp results because the path stroke thickness of 4 and integer coordinates used in the main icon looks blurred when the central 40x40 region is rendered in the 24x24 resolution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"beforeAfter({\n before: originals.green[24],\n after: await pixelPreview(template(G()), 24, 24, 1, \"#flush\"),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"But I came up with a nice hack: Render the small icons with a small margin too, by selecting a 48x48 viewbox!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"beforeAfter({\n before: originals.green[24],\n after: await pixelPreview(template(G()), 24, 24, 1, \"#xywh=4,4,48,48\"),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"My next question is, can I potentially now produce just one 48x48 px output with mips for 24x24 and 12x12, and use it in both places if I write the `icons` [IconData](https://lua-api.factorio.com/latest/types/IconData.html) properties correctly on the ShortcutPrototype?\n\nFirst we need some debug graphics:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"sideBySideFlex(\n await debug(56,1, \"#F00\"),\n await debug(24,1, \"#F00\")\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"htl.html`

\n ${await FileAttachment(\"image@1.png\").image()}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"That's at 100%, 150% and 200% UI scale respectively. So the 56 px resolution is only used at 200% scale. At that scale, the total margin of the button is 10 px on all sides.\n\nLet's add lines to show where the original 40x40 graphics would fit:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"sideBySideFlex(\n await debug(56,2, \"oklch(100% 50% 20deg)\", \"oklch(70% 30% 20deg)\"),\n await debug(48,3, \"oklch(100% 50% 250deg)\", \"oklch(70% 30% 250deg)\"),\n await debug(24,2, \"oklch(100% 30% 90deg)\", \"oklch(70% 30% 90deg)\"),\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":520,"value":"![Render G at 48x48](${await rasterizeSVG(template(G()), 48, 48, 2, \"#xywh=4,4,48,48\")})\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"And modify the Lua code:\n\n```lua\nlocal G = \"__wire-ex__/G.png\"\nlocal blank = \"__wire-ex__/blank.png\"\n-- Abuse the red wire for easy comparison\npatch(\"give-red-wire\", {\n { icon = blank, icon_size = 16 },\n { icon = G, icon_size = 48, scale = scale56 }\n}, {\n { icon = G, icon_size = 48, }\n})\n```\nAnd Bob's your uncle:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":515,"value":" beforeAfter({\n before:sprite[0], after: sprite[1],\n width: 76*4, aspectRatio:1\n })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"\n beforeAfter({\n before:sprite[2], after: sprite[3],\n width: 36*4, aspectRatio:1\n })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"sprite = [\n htl.html`

`,\n htl.html`

`\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"# Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Imports and stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"import { beforeAfter, sideBySideFlex, pixelPreview, rasterizeSVG, template, G, originals } from \"@supermikal-factorio-wire-icons/toolbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"