Favicon Guides
24 practical, up-to-date guides covering favicons end to end — what they are, the sizes and formats you need, the correct HTML, and step-by-step setup for WordPress, Shopify, React, Webflow and more. Every guide reflects the current 2026 favicon spec.
Make an emoji or single-letter favicon in one line: an inline SVG that draws the character as text, referenced as a data-URI in a single link tag.
Published June 9, 2026 Read guide →Add a favicon in Framer by uploading a square image (512×512 ideal) in Site Settings → General, then publish your site to make it live.
Published June 9, 2026 Read guide →In Ghost, set your favicon via the Publication icon in Settings → General. Upload a square image (512×512 ideal) and Ghost serves a resized favicon.
Published June 9, 2026 Read guide →Add a favicon in Webflow under Project Settings → General → Favicon & Webclip: upload a square Favicon and a 256×256 Webclip, then republish.
Published June 9, 2026 Read guide →The best free favicon generator outputs the full modern set — multi-size ICO, SVG, opaque Apple touch, and PWA/maskable icons — with clean copy-paste HTML.
Published December 10, 2025 Read guide →Favicon not showing? The usual cause is aggressive browser or CDN caching. Hard-refresh, add a cache-busting query string, then check the path, tags, and MIME type.
Published December 9, 2025 Read guide →Turn a logo into a favicon: start from a square 512×512 source, simplify it for tiny sizes, export the full ICO + SVG + Apple + PWA set, paste the HTML.
Published December 8, 2025 Read guide →The cleanest dark-mode favicon is a single SVG with a prefers-color-scheme media query inside it that recolours the artwork. One file, no JavaScript.
Published December 7, 2025 Read guide →A good favicon is a simplified version of your brand mark — one bold shape, high contrast, few colours — built to read at 16px, not a shrunk-down logo.
Published December 6, 2025 Read guide →The complete modern favicon <head> is four lines. Full reference of every favicon link tag, attribute, and manifest entry — plus what to delete.
Published December 5, 2025 Read guide →Add a favicon in React, Next.js, Vue, Nuxt, or Angular. The files go in public/ (or app/) and the same four link tags end up in the head — only the wiring differs.
Published December 4, 2025 Read guide →Add a favicon in Shopify, Squarespace, Wix, or Webflow by uploading one square image (512×512 ideal) in your theme or brand settings, then publish.
Published December 3, 2025 Read guide →Set a WordPress favicon with the built-in Site Icon: upload a square 512×512 image under Appearance → Customize or the Site Editor, crop, publish.
Published December 2, 2025 Read guide →A favicon is not a Google ranking factor — but it shows next to your mobile listing and in AI answers, so it affects clicks. Plus full browser support.
Published December 1, 2025 Read guide →The favicon sizes that actually matter in 2026: 32×32 in an ICO, a scalable SVG, 180×180 Apple touch, and 192/512 PWA icons. Full chart and clean HTML.
Published November 30, 2025 Read guide →Both have a built-in favicon setting: Blogger uses Settings → Favicon, new Google Sites uses the Settings gear → Brand images. Upload one square image.
Published November 29, 2025 Read guide →Upload your favicon files into your web root (public_html or httpdocs) so they load at /favicon.ico, then add four link tags. cPanel, Plesk & FTP steps.
Published November 28, 2025 Read guide →Paste four <link> tags into your <head>, drop the files in your site root, and your favicon works. The clean 2026 HTML snippet, explained line by line.
Published November 27, 2025 Read guide →Yes, you still want a favicon.ico in 2026 — as a fallback, not your main icon. Here's why, and how to generate a proper multi-size ICO.
Published November 26, 2025 Read guide →Convert a PNG into a multi-size favicon.ico the clean way: feed a square 512×512 PNG into a generator, get 16/32/48 in one file, drop it in your site root.
Published November 25, 2025 Read guide →A PWA needs three manifest icons: 192×192 any, 512×512 any, and a separate 512×512 maskable. Here's the exact site.webmanifest and how to link it.
Published November 24, 2025 Read guide →Use an SVG favicon as your primary icon — one scalable file, sharp at every size, dark-mode-ready — with a favicon.ico fallback for Safari and older clients.
Published November 23, 2025 Read guide →Your PNG and ICO favicons should be transparent so they sit on any browser chrome — but the Apple touch icon must stay opaque. Here's how to do both.
Published November 22, 2025 Read guide →A favicon is the small icon in a browser tab. Learn what it is, where it appears, how favicon.ico differs from PNG and SVG icons, and which formats you need.
Published November 21, 2025 Read guide →Turn one logo into the complete modern set — ICO, SVG, Apple touch and PWA icons — plus copy-paste HTML. Free, no sign-up, and your image never leaves your browser.
Open the favicon generator