Favicon generator: every favicon file and the HTML to paste
Your logo looks great on your homepage but turns into a blurry blob in the browser tab. This prompt has your todo.is agent simplify your logo or initial into a tiny icon that still reads at 16 pixels, then build the full favicon set (ICO, PNG, Apple touch icon, manifest) and give you the exact lines to paste into your site's head.
The prompt
- Make a favicon set for [WEBSITE NAME] ([WEBSITE URL]). Start from [LOGO OR IDEA]. If the logo is too detailed, simplify it to one symbol or letter that reads at 16 x 16 px. Background: [BACKGROUND]. Make a 512 x 512 master, then use Pillow to create favicon.ico (16, 32 and 48 px inside), favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png (180 x 180, no transparency), android-chrome 192 and 512 px, and a site.webmanifest with the name and [THEME COLOUR]. If the logo is simple flat shapes, also make an SVG favicon. Show a preview in a light and dark browser tab, and give me the HTML link tags to paste in my head section, plus a ZIP.
What to change
- [WEBSITE NAME]: E.g. "Harbor Yoga".
- [WEBSITE URL]: E.g. "harboryoga.example". Used for the preview and manifest.
- [LOGO OR IDEA]: Attach your logo (PNG or SVG) and write "my attached logo", or describe it, e.g. "the letter H in a wave".
- [BACKGROUND]: "transparent", "solid navy circle", or "rounded square in my brand colour".
- [THEME COLOUR]: A hex code for the browser theme colour, e.g. "#0F4C5C".
Example result
- Favicon set for Harbor Yoga
- Source: harbor_yoga_logo.png (wave over the words "Harbor Yoga") · theme colour #0F4C5C
- What changed for the small size
- • The words were removed; at 16 px they become grey noise
- • Kept the wave and placed it in a solid teal rounded square so it stands out on light and dark tabs
- • Wave line thickened from 2 px to 3 px at 32 px size, so it doesn't vanish
- Files in the ZIP
- • favicon.ico: 16, 32 and 48 px in one file, for older browsers and Windows
- • favicon.svg: scalable, flat wave shape
- • favicon-32x32.png and favicon-16x16.png
- • apple-touch-icon.png: 180 x 180, solid background (iOS adds no transparency)
- • android-chrome-192x192.png and android-chrome-512x512.png
- • site.webmanifest: name, short name, icons and theme colour
- HTML to paste inside <head>
- • <link rel="icon" href="/favicon.ico" sizes="48x48">
- • <link rel="icon" href="/favicon.svg" type="image/svg+xml">
- • <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- • <link rel="manifest" href="/site.webmanifest">
- • <meta name="theme-color" content="#0F4C5C">
- How to install
- • Upload all files to the root folder of your website (the same place as your homepage file)
- • On WordPress, Shopify, Squarespace or Wix, use the site icon setting and upload the 512 px PNG instead; the platform makes the rest
- • Hard-refresh the browser or open a private window. Favicons are cached for a long time
- Preview
- favicon_preview.png shows the icon in a light tab, a dark tab, a bookmark bar and a phone home screen
How to do it with todo.is
- Copy the prompt and add your site name, URL, logo, background choice and theme colour.
- Paste it into todo.is with your logo attached, or send both to your agent.
- Check the tab preview, then download the ZIP with all files and the HTML tags.
- Upload the files to your site root (or the site icon setting in your website builder) and refresh with a private window.
Tips for a better result
- Design for 16 px first. One bold shape or letter beats a scaled-down logo with text.
- Give the icon a solid background shape if your logo is thin or dark; it will disappear on dark browser tabs otherwise.
- Keep the files in your site's root folder. Some browsers look for /favicon.ico there even without a link tag.
- Ask your agent to check your live site afterwards and confirm the favicon links load without errors.
favicon generator: FAQ
- What size should a favicon be? Browsers mainly use 16 x 16 and 32 x 32 px in tabs, with 48 px in the ICO file for Windows. Phones use a 180 px Apple touch icon and 192 or 512 px Android icons.
- Do I still need favicon.ico? It is still a good idea. An ICO with 16, 32 and 48 px sizes covers older browsers and tools, while PNG and SVG cover modern ones.
- Why does my old favicon still show? Browsers cache favicons heavily. Try a private window, clear the cache, or add a version to the file name, such as favicon.ico?v=2.
- Can I make a favicon from just a letter? Yes. Ask for your initial in your brand font and colour on a solid shape. Letter favicons are clear and easy to recognise.
JavaScript is required to use the todo.is app.