2020年网站需创建哪些图标？多端图标选型及SEO影响咨询

Hey there! I totally get sticking with the good old favicon.ico for years—why fix what's not broken, right? But those multi-platform icons aren't just fluff; they make your site feel native and polished across every device your users are on. Let's break down exactly what you need to know:

Let's go through each ecosystem, with clear specs for size, format, naming, and placement:

Core Fallback: favicon.ico #

Don't ditch this one—it's still the reliable fallback for older browsers (looking at you, IE) and desktop environments.

• Sizes: Include at least 16x16, 32x32, and 48x48 pixels (ICO files can hold multiple sizes in one file)
• Format: ICO
• Naming: favicon.ico
• Placement: Root directory (browsers will auto-detect it without extra HTML tags)

Apple Ecosystem (iPhone, iPad, Mac) #

Apple has specific standards for home screen and pinned tab icons:

• iOS Home Screen Touch Icons:
  • Sizes: 180x180px (covers most Retina iPhones/iPads); add 270x270px if you want to support iPad Pro
  • Format: PNG (use a transparent background—iOS will add rounded corners automatically)
  • Naming: apple-touch-icon.png (or suffix with size like apple-touch-icon-180x180.png for clarity)
  • Placement: Root directory, or link explicitly in your HTML:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
    

• Safari Pinned Tab Icon:
  • Sizes: 16x16px (stick to a single-color design—Safari will adapt it to match the user's system theme)
  • Format: SVG (preferred for scalability) or PNG
  • Naming: safari-pinned-tab.svg
  • Placement: Root directory, link with a color for the theme:

    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#your-brand-hex-color">
    

Windows (Start Menu Tiles, Taskbar) #

Windows uses a config file to manage tile icons:

• Tile Icons:
  • Sizes: 70x70px, 150x150px, 310x310px, and 310x150px (for wide tiles)
  • Format: PNG
  • Naming: mstile-[size].png (e.g., mstile-150x150.png)
  • Placement: Root directory, plus a browserconfig.xml file in the root to map them:

    <?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
        <tile>
          <square70x70logo src="/mstile-70x70.png"/>
          <square150x150logo src="/mstile-150x150.png"/>
          <wide310x150logo src="/mstile-310x150.png"/>
          <square310x310logo src="/mstile-310x310.png"/>
          <TileColor>#your-brand-hex-color</TileColor>
        </tile>
      </msapplication>
    </browserconfig>
    

Android & Chrome #

Chrome uses a manifest file to manage home screen icons:

• Chrome Home Screen Icons:
  • Sizes: 192x192px (base) and 512x512px (high-resolution)
  • Format: PNG (transparent background)
  • Naming: android-chrome-[size].png (e.g., android-chrome-192x192.png)
  • Placement: Root directory, plus a manifest.json file in the root to define them:

    {
      "name": "Your Full Site Name",
      "short_name": "Short Site Name",
      "icons": [
        {
          "src": "/android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "theme_color": "#your-brand-hex-color",
      "background_color": "#your-background-hex-color",
      "display": "standalone"
    }
    

  • Don't forget to link the manifest in your HTML:

    <link rel="manifest" href="/manifest.json">
    

Modern Universal Icon: SVG Favicon #

For modern browsers, SVG favicons are a game-changer:

• Sizes: Vector-based, so no fixed pixel size—adapts perfectly to any resolution
• Format: SVG (supports simple animations if you want a little flair)
• Naming: favicon.svg
• Placement: Root directory, link in your HTML:

  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  

Great news—adding these icons does not hurt your SEO at all. In fact, it can indirectly boost your performance:

• Better user experience: Users are more likely to bookmark, revisit, or share your site if it looks polished on their home screen/taskbar. Higher engagement metrics (time on site, return visits) signal to search engines that your site is valuable.
• Standout search results: Some search engines (like Google) may display your icons in search listings or featured snippets, increasing your click-through rate (CTR).
• Just make sure you don't block these icons in your robots.txt file—let search engines crawl them if they want.

• For simplicity, most icons can live in your root directory if you use standard names (like apple-touch-icon.png).
• If you prefer to organize them into a subfolder (e.g., /icons/), just update all your HTML links and config files to point to the correct paths.
• Always test on real devices/browsers to confirm everything loads correctly—even a quick check on your phone and laptop will catch most issues.

内容的提问来源于stack exchange，提问作者alebal