App Icon Generator — TypeScript source
Turn one image into the full web app icon set — favicon, apple-touch-icon and manifest sizes as crisp PNGs. Letterboxed contain-fit, optional white background — runs entirely in your browser.
This is the TypeScript implementation — the same logic the interactive tool runs, in a shareable, citable form.
// App icon generator — display snippet. The live tool renders this pipeline
// in the browser (see the tool page); a full Go twin does not apply because
// the logic is canvas-bound.
export async function generateIconSet(file: File, sizes = [16, 32, 180, 192, 512]): Promise<Blob[]> {
const bitmap = await createImageBitmap(file);
return Promise.all(
sizes.map(
(px) =>
new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement('canvas');
canvas.width = px;
canvas.height = px;
const ctx = canvas.getContext('2d')!;
// Contain-fit, centered — letterbox on transparency.
const scale = Math.min(px / bitmap.width, px / bitmap.height);
const w = Math.max(1, Math.round(bitmap.width * scale));
const h = Math.max(1, Math.round(bitmap.height * scale));
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(bitmap, Math.round((px - w) / 2), Math.round((px - h) / 2), w, h);
canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('encode failed'))), 'image/png');
}),
),
);
}
Also available in 8 other languages
Every CosmoDev tool ships its pure logic in TypeScript (web) and Go (CLI), with authored implementations in a dozen-plus languages — the same contract, ported. Compare all languages side by side →