Favicon HTML Generator
Generate the exact favicon link and meta tags to paste into your page head, based on the icon assets you have available.
Where your favicon files live, e.g. /favicon
HTML to Paste in <head>
How to Use the Favicon HTML Generator
Enter the base path where your favicon files are hosted (defaults to /favicon), then check off which icon assets you actually have — favicon.ico, 16×16 and 32×32 PNGs, an Apple touch icon, Android Chrome icons, a web manifest, and an optional theme-color meta tag. The tool builds the exact <link> and <meta> tags for the assets you selected, ready to copy directly into your page's <head>.
Example
With base path /favicon and only the 32×32 PNG and Apple touch icon checked, the tool outputs:<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="/favicon-apple-touch-icon.png">
Common Use Cases
- Generating the correct favicon tags after creating a new set of icon assets.
- Making sure a site supports Apple touch icons and Android home-screen icons correctly.
- Quickly producing a theme-color meta tag to match a mobile browser's UI to your brand.
FAQs
- Do I need every icon size? No — modern browsers only need a handful (favicon.ico plus a couple of PNG sizes) to work well everywhere, but including Apple touch and Android icons improves how your site looks when added to a phone's home screen.
- What is the theme-color meta tag for? It tells supporting mobile browsers (mainly Android Chrome) what color to use for UI elements like the browser toolbar when a user visits your site.
- Do I still need to create the actual image files? Yes — this tool only generates the HTML tags that reference your files; you still need to create the actual .ico and .png files at the sizes and paths referenced (a tool like the Apple Touch Icon Generator can help produce one of them).