jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

Image & Asset Tools

Free Favicon HTML Tag Generator

Create a practical favicon block for browsers, Apple touch icons, manifest files, and theme colors.

Loading tool...

What is Favicon HTML Tag Generator?

Favicon markup tells browsers and devices which icons to use for tabs, bookmarks, home screen shortcuts, and web app installs. A small static site can still need several icon formats because desktop browsers, mobile browsers, and saved web apps use different files.

quickAnswer

Generate favicon HTML tags, Apple touch icon references, and web app manifest entries for static websites. Include both SVG and fallback icon paths for broad browser support.

Last updated: 2026-06-11

limitations

  • Icon files must exist at the specified paths in the published output. The generated tags are only references; you must create or place the actual icon files at those paths.
  • The Apple touch icon has specific size expectations. Apple devices expect a 180 by 180 pixel PNG for best results when users save the page to their home screen.
  • The web manifest snippet requires valid JSON. A single syntax error in the manifest file can prevent browsers from reading the app metadata entirely.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Enter the base path where your icon files will be published.
  2. Add the app or site name plus theme and background colors.
  3. Copy the generated link and meta tags into your HTML head.
  4. Copy the manifest JSON snippet into your site.webmanifest file if you use one.

What you can use it for

  • Add favicon markup to a plain HTML website.
  • Prepare icon paths for GitHub Pages.
  • Create a small web manifest JSON snippet.

Use cases

Practical examples

example

Static site icon setup

A GitHub Pages site stores icons in /icons. The generator creates the favicon, SVG icon, Apple touch icon, manifest link, and theme color tags.

example

Home screen save support

A mobile visitor saves the site to their phone home screen. The Apple touch icon and manifest entries help the saved shortcut look intentional.

Common mistakes

  • Using icon paths that break after deployment under a subfolder.
  • Forgetting an Apple touch icon for mobile home screen saves.
  • Using a theme color that does not match the actual site header.

verification

  1. Open the published page and check the browser tab for the favicon. If the icon does not appear, verify the image path matches the actual file location.
  2. On an iOS device or simulator, use Share > Add to Home Screen and confirm the saved shortcut uses the Apple touch icon image.

FAQ

Questions about Favicon HTML Tag Generator

Do I still need favicon.ico?

It is still useful as a broad fallback. Many modern setups also include SVG and PNG icons.

Where should icon files live?

Use a stable public folder such as /icons or /assets/icons, and make sure the same path exists in the built output.

Is a web manifest required?

No. It is optional for a normal website, but useful if you want better saved-app behavior on mobile and desktop.

Related tools

More image & asset tools

Also try

Also try

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool