<
zhead
>

Early Access

Meta Tags

msapplication-TileImage

Learn how to use the msapplication-TileImage meta tag to improve your site.

Specifies the image to be used when the website is pinned to the Windows Start menu as a Live Tile. This tag is part of Microsoft's compatibility meta tags for enhancing user experience on Windows devices.

Code Examples

<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png" />
An example path to a square PNG image of the recommended size, ensuring good display on the Windows Start menu.
<meta name="msapplication-TileImage" content="/path/to/square-logo-310x310.png" />
A path to a larger square PNG logo, which is ideal for high-resolution displays. Ensures the Live Tile looks sharp and engaging.
<meta name="msapplication-TileImage" content="/path/to/rectangle-image-300x150.png" />
Using a rectangular image can result in improper scaling or cropping, potentially ruining the visual layout on the tile.
<meta name="msapplication-TileImage" content="" />
Leaving the "msapplication-TileImage" meta tag empty or not defining it results in a missed opportunity to brand your site effectively on Windows platforms.

Recommendations

  • Use Square Images
    Ensure the image provided is square. Microsoft recommends a minimum size of 144×144 pixels for optimal display on different devices.
  • Consider Transparent Background
    Images with transparent backgrounds are more versatile, allowing the Windows Start menu's color scheme to show through, creating a more integrated appearance.
  • File Format Matters
    Although PNG is recommended for its support for transparency, JPEG can also be used, especially for more complex images where file size may be a concern.
  • High Resolution for Better Display
    For a crisper and clearer display on high-resolution devices, consider using images larger than the minimum recommendation, scaling up to 310×310 pixels.

Related Documentation

Related Meta Tags

apple-itunes-app

name

Promotes an iOS app on Apple’s App Store directly within the Safari browser. When added to a web page, it triggers a banner suggesting users to install the app.

<meta name="apple-itunes-app" content="app-id=123456789">
Correctly specifies the App Store ID for the app, directing users to the exact app in the store.

apple-mobile-web-app-capable

name

Specifies whether a web application runs in full-screen mode when added to the homescreen of an Apple device.

<meta name="apple-mobile-web-app-capable" content="yes">
Enables full-screen mode when the web app is added to the homescreen, providing a more app-like experience.

apple-mobile-web-app-status-bar-style

name

Specifies the style of the status bar for a web application when added to the homescreen of an iOS device. This meta tag influences the appearance of the status bar to either match the web app design or maintain the default iOS style.

<meta name="apple-mobile-web-app-status-bar-style" content="default">
Sets the status bar to the default iOS style, providing a consistent look with other applications on the device.

apple-mobile-web-app-title

name

Provides a custom title for a web application when added to the home screen on Apple iOS devices. This title appears below the app icon, offering more control over branding and user interface.

<meta name="apple-mobile-web-app-title" content="MyApp">
Specifying a concise and descriptive name such as "MyApp" ensures the title is readable at a glance and is easily recognizable by users.

mobile-web-app-capable

name

Indicates to mobile browsers that the website can be run as a standalone application when added to the user’s home screen, offering a more app-like user experience.

<meta name="mobile-web-app-capable" content="yes">
Tells the mobile browser to make the website available in a standalone mode.