jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

SEO Tools

Free Viewport Meta Tag Generator

Build the standard viewport meta tag, theme-color meta tag, and Apple touch icon link tags from simple input fields. Covers the mobile-first essentials that every HTML page should include.

Loading tool...

What is Viewport Meta Tag Generator?

The viewport meta tag controls how a page scales on mobile browsers, making it one of the most important tags for responsive design. The theme-color meta tag sets the browser chrome color in mobile browsers and desktop browsers that support it. Apple touch icon link tags define the icon shown when a visitor saves the page to their iOS home screen. Together these tags form the basic mobile-presentation layer that every modern HTML page should include, but each has a specific syntax that is easy to get wrong.

quickAnswer

Use the viewport meta tag to control how your page scales on mobile devices. The standard value width=device-width with initial-scale=1 works for nearly every responsive site and ensures readable text without requiring zoom gestures.

Last updated: 2026-06-11

limitations

  • theme-color only affects the browser chrome on supported mobile browsers. Desktop browsers and some browser configurations ignore it entirely.
  • Apple touch icon tags require an actual PNG image file at the specified path. A missing or incorrect path produces a broken icon silently on iOS.
  • The viewport tag controls initial scale but does not make a non-responsive layout usable on mobile. It must be paired with a responsive design using CSS media queries.

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

How to use this tool

  1. Set the viewport width and initial scale. The standard values are width=device-width and initial-scale=1.
  2. Enter a theme color as a hex value, such as #ffffff for white or a color that matches your site header.
  3. Enter the path to your Apple touch icon file. A 180 by 180 pixel PNG is the standard size.
  4. Copy all generated tags and paste them into the head section of your HTML page.

What you can use it for

  • Set up the mobile viewport tag for a new static HTML page before deployment.
  • Add PWA-ready meta tags including theme-color and Apple touch icons for a home-screen installed experience.
  • Standardize mobile meta tags across a multi-page site template so every page uses the same viewport configuration.

Use cases

Practical examples

example

Standard responsive page setup

A new landing page needs width=device-width, initial-scale=1, a white theme color, and a standard Apple touch icon. The generator produces all three tags from the input fields.

example

PWA-ready configuration

A web app uses a brand blue theme color and a custom Apple touch icon with transparent background. The generator creates the tags with the exact hex color and icon path.

Common mistakes

  • Setting user-scalable=no which blocks pinch-to-zoom and creates an accessibility barrier for low-vision users.
  • Using an incorrect or missing Apple touch icon path that results in a broken icon when saved to the home screen.
  • Forgetting to include viewport-fit=cover for pages that extend into the full display area on notched phones.

verification

  1. Open the published page on an actual mobile device and confirm the content fits the screen width without horizontal scrolling.
  2. Inspect the generated tags in the HTML head using browser DevTools to verify the viewport, theme-color, and Apple touch icon paths are correct.

FAQ

Questions about Viewport Meta Tag Generator

What should the viewport width be?

Use width=device-width for nearly all responsive pages. This tells the browser to match the device width instead of assuming a desktop-sized viewport.

Do I need Apple touch icons for a website that is not a PWA?

Apple touch icons are still useful for regular websites because iOS users can save any page to their home screen. Without the icon, iOS uses a screenshot of the page as the icon.

Should I disable user-scalable?

No. Setting user-scalable=no blocks pinch-to-zoom and creates an accessibility barrier for low-vision users. WCAG requires that users can zoom pages to at least 200%.

What happens if I omit the viewport meta tag entirely?

Mobile browsers assume the page was designed for desktop and render it at a default width of about 980px, then scale it down to fit the screen. Text becomes tiny and requires zooming to read. The page may also trigger Google Search Console mobile usability errors. Every responsive page should include a viewport meta tag in the head.

Related tools

More seo tools

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool