Loading…
Loading…
Create favicons from text, emoji or image — all sizes
<!-- 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">
Run your projects on Claude Code?
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 — $29Favicons 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
About the Favicon Generator
The generator creates 16x16, 32x32, 48x48, 96x96, 180x180 (Apple Touch), and 512x512 PNG favicons, plus the HTML link tags needed to include them.
Yes. Upload any PNG, JPG, or SVG image and the tool will resize and optimize it for all favicon sizes automatically.
Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons referenced with <link rel="icon" type="image/png">. ICO files are only strictly necessary for Internet Explorer 11 and older. The generator produces PNGs with the correct link tags for all modern browsers.
The 180x180 Apple Touch Icon is displayed when a user adds your site to their iPhone or iPad home screen. Without it, iOS uses a screenshot of the page instead. Reference it with <link rel="apple-touch-icon" href="/apple-touch-icon.png"> in your HTML head.
The text mode uses system fonts loaded via the browser Canvas API. You can customize the font family (serif, sans-serif, or monospace), size, and weight. Emoji characters render using the operating system emoji font, so the appearance may vary slightly between macOS, Windows, and Android.
Place the files in your /public directory. Reference them in app/layout.tsx via the Next.js Metadata icons object or with explicit <link> tags in a custom <head>. The generated HTML link tags are formatted to paste directly into a Next.js metadata object or a standard HTML file.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →