<!-- Standard Favicons --> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <!-- Apple Touch Icon --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Android / PWA --> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Favicons are the small icons displayed in browser tabs, bookmarks, history, and on mobile home screens. The modern favicon setup requires multiple sizes: 16x16 and 32x32 for browser tabs, 180x180 for Apple Touch (iOS home screen), and 512x512 for Progressive Web App manifests. The W3C HTML Living Standard and Apple Human Interface Guidelines each specify different formats and link element types. Generating all sizes consistently from a single source — text, emoji, or image — ensures a polished cross-platform appearance.
The generator uses the browser's HTML Canvas API to render the favicon source at each target size. For text-based favicons, the specified character or string is drawn centered on the canvas at a font size proportional to the canvas dimensions, using the selected font family and background color. The canvas is then exported as a PNG data URL using canvas.toDataURL("image/png").
For image uploads, the source image is drawn onto each target canvas using drawImage() with the canvas dimensions as the destination rectangle. This resamples the image to each size using the browser's built-in interpolation.
All generated PNG data URLs are packaged for download as individual files. The HTML link tag block is generated following the W3C specification for icon elements, including the type="image/png" MIME type, sizes attribute, and rel="apple-touch-icon" for the 180x180 file.
A developer launching a new SaaS product generates a favicon from their product emoji in 30 seconds instead of opening a design tool.
A developer building a Next.js app generates all favicon sizes from an uploaded SVG logo and copies the link tags into the app layout.
A developer creating multiple internal tools uses different text characters (1, 2, 3) with distinct background colors to distinguish tabs quickly.
A freelancer updates a client site's favicon from a 16x16 pixel icon to a full modern set including Apple Touch and PWA manifest icons.
Choose text, emoji, or image as your favicon source
Customize background color, font, and size
Preview all favicon sizes instantly
Download the favicon files and copy the HTML link tags
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29