Apple Touch Icon Tag Generator: Build iOS Head Tags

What decides the icon when someone adds your site to an iPhone home screen? Safari reads special tags in your page head. The Apple Touch Icon Tag Generator writes those tags for you.

This tool suits web developers, site owners, and designers who maintain a simple website. You enter an app title, an icon filename, a status bar style, and a full-screen option. The output is six lines of HTML that you paste into your page head.

Table of Contents

• What the Tool Does
• How to Use It, Step by Step
• How the Tag Output Is Built
• Worked Example
• How to Read the Results
• Filename Rules and Common Mistakes
• Where the Tags Go and the Icon Files
• Limitations and Assumptions
• FAQs About the Apple Touch Icon Tag Generator

What the Tool Does

The tool builds HTML text only. It does not create, resize, upload, or package any image. Its output is tag text that you copy into your page.

Each change updates the output at once. A Copy iOS Tags button copies the full text. Three cards above the form show the icon sizes, the status bar style, and the full-screen launch setting.

How to Use It, Step by Step

Work through the form from top to bottom.

1. Type your app name in the iOS App Title field. It starts with My Web App. A blank field shows a message and leaves the output empty.
2. Enter a file name in the Icon Image Filename field, such as bakery-icon.png. A blank field also shows a message and leaves the output empty.
3. Pick a Status Bar Appearance: black-translucent (Overlay), default (White with Dark Text), or black (Solid Black).
4. Pick Standalone Web App Capable: Yes (Full-screen App Mode) or No (Standard Safari View).
5. Read any notice below the form, check the lines in the iOS HTML Head Tags box, press Copy iOS Tags, and paste the text into your page head.

How the Tag Output Is Built

The generator does not calculate anything. It joins six text lines with line breaks, and each line follows a fixed pattern.

The filename rules are simple text edits. The 152 and 120 lines insert a size suffix before the file extension.

• 180x180 line: uses your filename, with one slash in front when the name is relative.
• 152x152 line: adds -152x152 before the extension, such as icon-152x152.png.
• 120x120 line: adds -120x120 before the extension, such as icon-120x120.png.
• Web app capable meta: yes for Yes, and no for No.
• Status bar meta: the exact option value you selected.
• App title meta: your trimmed title, with quotes and angle brackets escaped.

Worked Example

Marco runs a small bakery website. He wants the name Bakery Orders and an icon file named bakery-icon.png. He also wants a solid black status bar and full-screen launch. He enters those values and copies this output.

The title has thirteen characters, which is longer than the twelve character guideline. The tool shows a notice, but it still writes the tags.

How to Read the Results

• Output box: the six tag lines. Paste all of them into the head section.
• Notice box: messages for errors and warnings. Errors leave the output empty until you fix them.
• Icon Sizes Emitted: 180, 152, 120 px when the output is filled. It shows N/A when the output is empty.
• Status Bar Style: the raw option value, such as black-translucent or default, not the label.
• Full-Screen Launch: Enabled when the web app flag is Yes, and Disabled when it is No.

A fixed note under the output box reminds you to create the 152 and 120 files. The Copy iOS Tags button shows Copied for two seconds when copying works. If the browser blocks copying, it shows Copy failed and a message.

Filename Rules and Common Mistakes

The tool edits filenames as plain text and checks nothing on your server.

The size suffix goes before the last extension, and the extension keeps its typed case. A file named icon.jpg produces icon-152x152.jpg and icon-120x120.jpg. A notice also says that Apple recommends PNG icons.

A full web address such as https://cdn.example.com/icon.png is used as given. For a file on your own site, enter a path from the site root, such as img/touch/icon.png. Relative names get one leading slash.

Only the last folder and file name receive the suffix. A path such as my.pngs/icon.png produces /my.pngs/icon-152x152.png, so folder names stay intact. Spaces become %20 in the link, and a notice says when that happens. The File Name Sanitizer can clean a name first.

Quotes in the title are escaped too. The title Tom "T" App becomes Tom "T" App inside the tag, so the attribute stays valid.

Where the Tags Go and the Icon Files

Paste the six lines inside the head element of each page. Place them on each page, or in a shared header template.

The tool never creates the image files. You need three PNG files at the paths the output names. The 180 file is the main icon. The 152 and 120 files are the other two. A missing file gives a broken link.

Keep the background solid. Transparent areas can appear black on an iPhone home screen, so fill the canvas first.

For favicon tags, see the Favicon HTML Generator. For Windows tile settings, see the Browserconfig.xml Generator.

Limitations and Assumptions

• The tool writes text only. It does not check that an image file exists or that its size is correct.
• It writes three sizes, 180x180, 152x152, and 120x120. It adds no other sizes, such as 76 or 57 pixels.
• The app title can hold up to 50 characters. Longer titles show an error and leave the output empty.
• Absolute web addresses are used as given, so the tool cannot confirm that a link works.

For related utilities, browse the Developer Tools hub.

FAQs About the Apple Touch Icon Generator

This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.