jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

SEO Tools

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.

Quick answer

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.

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.

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%.

Related tools

More seo tools

Also try

Also try