How to make a favicon from text or an emoji
A favicon is the small icon shown in browser tabs, bookmarks and some search results. This generator draws one from a letter, a short word or an emoji and gives you the files and the HTML to install it.
- Type one to three characters in Letter, text or emoji. One letter or one emoji stays readable at 16 pixels.
- Click a color preset, or set Background color and Text color yourself. Emoji keep their own colors.
- Choose a Shape, a Font, Bold and Text size.
- Check the four previews and the light and dark tab mockups. The contrast line under the controls warns you when the colors are too close.
- Press Download favicon package (ZIP), or Download favicon.ico alone, or use Download PNG under any preview.
- Upload the files to your site root and paste the HTML from the last box into the head of each page.
What is in the download
Every size is drawn separately on a canvas rather than shrunk from one big image, so the 16 pixel icon has crisp edges. The ZIP holds favicon.ico (16, 32 and 48 pixel images in one file), PNGs at 16, 32, 48, 180 (apple-touch-icon.png), 192 and 512 pixels, a starter site.webmanifest and a favicon-snippet.html with the link tags. Google says a favicon must be square and at least 8 by 8 pixels, and recommends one larger than 48 by 48; ICO and PNG are both accepted, and the link tag goes on your home page (Google Search Central).
Worked example
With the starting settings (the letter C, Blue preset #2563eb background, #ffffff text, Square, bold, 80% size) the tool shows a white C on a blue square at every size and prints "Contrast 5.2:1, easy to read at 16 pixels." That ratio comes from the WCAG contrast formula, where 4.5 to 1 is the usual target for text. The ZIP then contains nine files: favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest and favicon-snippet.html.
Limits and edge cases
- Text is drawn with fonts installed on your device, so the same settings can look slightly different on another computer. The downloaded files are fixed pixels and will not change.
- The 180 pixel iPhone icon is always a full square, because iOS rounds the corners itself and fills transparent areas with black.
- Emoji artwork comes from your system's emoji font, whose license may limit commercial branding. For a business mark, a letter is the safer choice.
- This tool makes icons from text only. To turn an existing logo into the right sizes, use the image resizer or the image format converter. For a sharing card, see the Open Graph preview.
- It does not create an SVG favicon. Longer text is cut to three characters.
Frequently asked questions
How do I make a favicon.ico file?
Design the icon above and press Download favicon.ico. The file packs 16, 32 and 48 pixel PNG images, which every current browser reads. Upload it to your site root and add the link tags shown.
What size should a favicon be?
Use 48 pixels or larger for Google results, 32 and 16 pixels for browser tabs, 180 pixels for iPhone home screens, and 192 and 512 pixels for Android through the web manifest. The ZIP includes all of them.
Can I use an emoji as a favicon?
Yes. Paste one emoji into the text box and pick the Transparent shape or a plain background. The picture is taken from your system's emoji font, so check its license before using it as a brand mark.
Why does my old favicon still show after I upload a new one?
Browsers cache favicons aggressively, so hard refresh the page, or add a version such as /favicon.ico?v=2 while you test. Google asks for a stable favicon URL and says recrawling can take several days to several weeks.
Sources: Google Search Central, Define a favicon; W3C WCAG 2.1.