How to Add a Favicon to HTML
Adding a favicon to a plain HTML page is a one-line change — but the modern, complete setup is six lines and covers iOS, Android, dark mode, and PWA install.
The single tag every browser respects is <link rel="icon" href="/favicon.ico">. Drop favicon.ico at your site root and you're 80% done.
The remaining 20% — apple-touch-icon, PNG variants, SVG with dark-mode support, and a webmanifest — is what separates a default icon from a polished brand experience.
วิธีการทำงาน
- 1
Generate your favicon package
Use the FetchFavicon package generator — produces every file you need plus paste-ready markup.
- 2
Drop files at the site root
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Paste the snippet into <head>
Six <link> tags + one <meta name="theme-color">.
ลองเลย
Get the HTML snippet
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
Where do the <link> tags go?+
Inside <head>, anywhere — order does not matter as long as they come before </head>.
Do I need both .ico and PNG?+
Yes. .ico is the universal fallback; PNG renders sharpest on high-DPI screens.
What about dark mode?+
Ship an SVG variant that embeds a prefers-color-scheme media query inside its <style> block.