App Icons · Nuxt SEO Utils · Nuxt SEO [NuxtSEO](https://nuxtseo.com/ "Home") - [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Tools](https://nuxtseo.com/tools) - [Pro](https://nuxtseo.com/pro) - [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases) [1.4K](https://github.com/harlan-zw/nuxt-seo) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) [User Guides](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) [API](https://nuxtseo.com/docs/seo-utils/api/breadcrumbs) [Releases](https://nuxtseo.com/docs/seo-utils/releases/v8) SEO Utils - [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction) - [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction) - [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction) - [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction) - [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction) - [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) - [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction) Search…```k`` /` v8.1.7 - Playgrounds - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Getting Started - [Introduction](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Installation](https://nuxtseo.com/docs/seo-utils/getting-started/installation) - [Troubleshooting](https://nuxtseo.com/docs/seo-utils/getting-started/troubleshooting) ### Core Concepts - [Canonical URL](https://nuxtseo.com/docs/seo-utils/guides/canonical-url) - [App Icons](https://nuxtseo.com/docs/seo-utils/guides/app-icons) - [Open Graph Images](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images) - [Best Practice Default Meta](https://nuxtseo.com/docs/seo-utils/guides/default-meta) - [Enhanced Titles](https://nuxtseo.com/docs/seo-utils/guides/fallback-title) - [SEO Route Rules](https://nuxtseo.com/docs/seo-utils/guides/route-rules) - [I18n & Localization](https://nuxtseo.com/docs/seo-utils/guides/i18n) - [Nuxt Config SEO Meta](https://nuxtseo.com/docs/seo-utils/guides/nuxt-config-seo-meta) - [CLI](https://nuxtseo.com/docs/seo-utils/guides/cli) - [Inline Minification](https://nuxtseo.com/docs/seo-utils/guides/minification) Core Concepts # App Icons [Copy for LLMs](https://nuxtseo.com/docs/seo-utils/guides/app-icons.md) ## [Overview](#overview) Nuxt SEO Utils automatically detects icon files in your project and generates the appropriate `link` tags in your HTML head. You **do not need to manually include these icons** - they are auto-generated based on files you place in your project. This is based on [Next.js Metadata File](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) with an almost identical API, however runtime images are not supported. ## [Setup](#setup) Simply place your icon files in either: - The root of your `public/` directory (applies to all pages) - Alongside your `pages/` directory (for route-specific icons) The module will automatically detect these files and generate the appropriate HTML tags. No configuration required. ## [Generating Icons with the CLI](#generating-icons-with-the-cli) If you have a logo or source image, you can generate all required icon variants automatically: ``` npx nuxt-seo-utils icons --source logo.svg ``` This creates `favicon.ico`, `apple-touch-icon.png`, and multiple `icon-*.png` sizes. See the [CLI guide](https://nuxtseo.com/docs/seo-utils/guides/cli) for details. ## [Naming Convention](#naming-convention) ### [`favicon`](#favicon) - Name: `favicon.ico` Using an `ico` file for your favicon is a good practice as all browsers support it, you can pack multiple icon sizes into it without having to define a number of extra icon links. The `favicon.ico` file should be placed in the `public` directory. It is supported by most browsers and displayed in the browser tab. By default, it won't output any HTML as browsers know where to look for it. If you're using a `baseURL` then it will output the correct path. **Example:** Place `favicon.ico` in `public/favicon.ico` and the module automatically generates: head output ``` ``` ### [`icon`](#icon) - Name: `*icon.{ico,jpg,jpeg,png,svg}`, `*icon-*.{ico,jpg,jpeg,png,svg}` Icons give you greater control over the displayed icon. You can provide multiple icons and the browser will automatically select the best icon based on the device's pixel density and uses it to display the app icon. If you have multiple icons and need to sort them, it's recommended you prefix them with their order. For example: `1.icon.png`, `2.icon.png`, `3.icon.png`. **Example:** Place icon files in `public/` and the module automatically generates: head output ``` ``` #### [Dark / Light Mode](#dark-light-mode) You can also provide dark and light mode icons by appending `-dark`,`-light`, `.dark` or `.light` to the icon name. **Example:** Place `icon-dark.png` and `icon-light.png` in `public/` and the module automatically generates: head output ``` ``` ### [`apple-touch-icon`](#apple-touch-icon) - Name: `*apple-icon*.{png,jpg,jpeg}`, `*apple-touch-icon*.{png,jpg,jpeg}`, `apple-touch.{png,jpg,jpeg}` Apple touch icons are used by iOS devices to display a website's icon on the home screen and in the browser tab. You can again provide multiple icons. **Example:** Place `apple-icon.png` in `public/` and the module automatically generates: head output ``` ``` ## [Pages Directory](#pages-directory) You can also place logos in your `pages` directory. This is useful if you want to have different logos for different pages. The naming convention is the same as the `public` directory. ``` pages/ ├── index.vue ├── admin/ │ ├── index.vue │ └── icon.png ``` This will overwrite any logos in the `public` directory for all `admin` pages. You can optionally also place your files within the `_dir` directory, which will work the same way. ``` pages/ ├── index.vue ├── admin/ │ ├── _dir/ │ │ └── icon.png # Does the same thing! │ └── index.vue ``` [Edit this page](https://github.com/harlan-zw/nuxt-seo-utils/edit/main/docs/content/2.guides/1.app-icons.md) [Markdown For LLMs](https://nuxtseo.com/docs/seo-utils/guides/app-icons.md) Did this page help you? [Canonical URL Ensure a canonical URL is set to avoid duplicate content issues.](https://nuxtseo.com/docs/seo-utils/guides/canonical-url) [Open Graph Images Automatically set meta tags for Open Graph images.](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images) On this page - [Overview](#overview) - [Setup](#setup) - [Generating Icons with the CLI](#generating-icons-with-the-cli) - [Naming Convention](#naming-convention) - [Pages Directory](#pages-directory) [GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP) ### [NuxtSEO](https://nuxtseo.com/ "Home") - [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp) Modules - [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction) - [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction) - [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction) - [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction) - [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction) - [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) - [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction) ### [NuxtSEO Pro](https://nuxtseo.com/pro "Home") - [Getting Started](https://nuxtseo.com/pro) - [Dashboard](https://nuxtseo.com/pro/dashboard) - [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation) ### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO") Nuxt - [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta) - [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers) - [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen) - [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering) - [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security) Vue - [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue) - [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta) - [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers) - [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa) - [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks) - [SEO Checklist](https://nuxtseo.com/learn-seo/checklist) - [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) - [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks) ### [Tools](https://nuxtseo.com/tools "SEO Tools") - [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger) - [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator) - [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker) - [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown) - [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator) - [Schema.org Validator](https://nuxtseo.com/tools/schema-validator) - [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator) - [Keyword Research](https://nuxtseo.com/tools/keyword-research) - [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer) - [Domain Rankings](https://nuxtseo.com/tools/domain-rankings) Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)