Even if your website isn’t a traditional mobile app, you can still let visitors save your site to their home screen as an app icon.

After they bookmark your site to their home screen, they can click the icon and open up your site full screen, just like a normal app.

This is done with meta tags, which we add to the <head> section of our WordPress site.

Meta Viewport

The first, and most important, is the meta viewport tag.

Most responsive themes already have this, so you may not need to add it. View the source of one of your site pages to see if it’s already included, it looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

If you already have it, skip to the next step.

The viewport meta tag below can be used if you want to disable zooming, which is great for 100% mobile app sites. (You wouldn’t want to disable zooming on a desktop site though)

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

iOS Specific Meta Tags

These can be used if you want to target iOS devices:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

The first tag tells iOS that you want this site to open full screen (like an app) after it’s bookmarked to the users device. There will be no browser chrome, like the address bar etc.

The second tag lets you control the small horizontal black bar at the top of the screen, which displays time, battery life, etc. You can change the color, or remove it completely.

Touch Icons

To customize the way your touch icon looks, you need to add some meta tags for your custom images. Unfortunately this is very verbose, since Apple does not give us a way to use a single image for all different sizes.

There are 4 meta tags you need to include to cover the old iPhones, retina, and iPhone 5. You can use 2 images (one retina that scales down 144px by 144px, and a non-retina 114px by 114px), but you must include all 4 meta tags. In WordPress, it would look like this:

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_stylesheet_directory_uri() . '/images/touch-icon-144.png'; ?>" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo get_stylesheet_directory_uri() . '/images/touch-icon-144.png'; ?>" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="<?php echo get_stylesheet_directory_uri() . '/images/touch-icon-114.png'; ?>" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_stylesheet_directory_uri() . '/images/touch-icon-114.png'; ?>" />

These are referencing your theme images folder, so you can put your touch icons there. Make sure they are the correct size, and .png format.

If you don’t need Android support for some strange reason, you can drop the “-precomposed” and just use “rel=”apple-touch-icon”.

Splash Screen Startup Images

When you first open your web app after bookmarking it to your home screen, it will show a splash screen. The default is to show a screenshot of the site, but if you want to customize that, you can use these meta tags.

This is fairly verbose because we have to target each orientation and resolution with a different image. You can see the image sizes in the html comments below.

<!-- Startup splash screen images -->
<!-- iPhone 320x460 -->
<link href="<?php echo get_stylesheet_directory_uri() . '/images/startup-iphone.png'; ?>" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone Retina 640x920 -->
<link rel="apple-touch-startup-image" href="<?php echo get_stylesheet_directory_uri() . '/images/startup-iphone-retina.png'; ?>" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- iPhone 5 640x1096 -->
<link rel="apple-touch-startup-image" href="<?php echo get_stylesheet_directory_uri() . '/images/startup-iphone5.png'; ?>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- iPad Portrait 768x1004 -->
<link href="<?php echo get_stylesheet_directory_uri() . '/images/startup-ipad-portrait.png'; ?>" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Landscape 748x1024 -->
<link href="<?php echo get_stylesheet_directory_uri() . '/images/startup-ipad-landscape.png'; ?>" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Retina Portrait 1536x2008 -->
<link rel="apple-touch-startup-image" href="<?php echo get_stylesheet_directory_uri() . '/images/startup-ipad-retina-portrait.png'; ?>" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iPad Retina Landscape 1496x2048 -->
<link rel="apple-touch-startup-image" href="<?php echo get_stylesheet_directory_uri() . '/images/startup-ipad-retina-landscape.png'; ?>" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">

Again these images go in your child theme images folder. The sizes above are width x height, you may notice that the iPad landscape images are actually saved in portrait. That is not a mistake (by me at least, possibly a mistake by Apple).

Unfortunately you have to include all of the tags and images above, you can’t reuse a single image for multiple devices (I tried).

Adding the meta tags to your header

To get this all working, we have to create and upload our images, and add the meta tags to wp_head.

Add the following code to your child theme’s functions.php file, and edit as necessary:


/**
* Add our web app meta tags.
*/
function sb_meta_tags() { ?>




” media=”(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>
” media=”(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>
Apple developer meta tag reference

  • Gist with all meta tags
  • 2 thoughts on “Make your WP site a mobile web app with meta tags

    1. Hi Scott,

      Thnx for the tutorial. I have a problem with my M1 themed website when i’m opening it as a fullscreen webapp in iOS7 on a iPhone5 (haven’t tested it on other phones yet).
      This only happens when I set it to fullscreen. It doesn’t happen within normal safari mode (with browsing buttons).

      As soon as I push the Menu-button on my website (with the three horizontal stripes), it shifts open from the left but automatically refreshes the screen back to my homepage. So I can’t browse my website in full screen.
      Do you know about this problem and what to do about it?

    Leave a Reply

    Your email address will not be published. Required fields are marked *