DevToolBox無料
ブログ

SVG Favicon Preview:

D
D
D 
<!-- Favicon Configuration - Best Practices 2026 -->

<!-- Standard favicon (32x32 ICO for legacy support) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- SVG favicon (scalable, supports dark mode) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon (180x180 PNG) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest (for PWA and Android) -->
<link rel="manifest" href="/manifest.webmanifest">

<!-- Theme color for browser chrome -->
<meta name="theme-color" content="#4F46E5">
<meta name="theme-color" content="#4F46E5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
{
  "name": "My Website",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#4F46E5",
  "background_color": "#ffffff",
  "display": "standalone"
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#4F46E5"/>
  <text x="16" y="22" text-anchor="middle" font-size="18" font-family="system-ui" font-weight="bold" fill="white">
    D
  </text>
</svg>
𝕏 Twitterin LinkedIn

💬 User Feedback

Have suggestions or found a bug? Leave a message and we'll get back to you.
0/2000

このツールを評価

4.8 / 5 · 187 件の評価

その他のツール

🏷️Metaタグ生成👁️OG画像プレビュー🤖Robots.txt生成📐Schema Markup生成

Recommended

VercelDeploy your frontend instantlyDigitalOceanCloud hosting from $4/mo

最新情報を受け取る

毎週の開発ヒントと新ツール情報。

スパムなし。いつでも解除可能。

Enjoy these free tools?

☕Buy Me a Coffee

使い方

  1. Enter your website URL to check existing favicons
  2. Or upload your icon image to generate all required favicon sizes
  3. Review the generated HTML tags for head section
  4. Copy the HTML code and favicon files to your project

ユースケース

  • Checking if your website has all required favicon formats configured
  • Generating complete favicon HTML markup for new web projects
  • Ensuring Apple Touch Icon and Android manifest icons are set up
  • Auditing favicon configuration during SEO reviews

よくある質問

What favicon formats do I need in 2026?
The modern favicon setup needs: (1) favicon.ico for legacy browsers, (2) favicon.svg for modern browsers with dark mode support, (3) apple-touch-icon.png 180x180 for iOS, (4) web-app-manifest with 192x192 and 512x512 PNG icons.
Should I use ICO or SVG for favicons?
Use both! SVG favicons support dark mode and scale perfectly but aren't supported everywhere. ICO provides universal fallback. Use <link rel="icon" type="image/svg+xml" href="/favicon.svg"> with ICO fallback.
What size should a favicon be?
For favicon.ico use 32x32, for Apple Touch Icon use 180x180, and for PWA manifest icons use 192x192 and 512x512. SVG favicons scale to any size automatically.