Favicons
Articles about favicons.
290 posts
How to Embed a Favicon in HTML with a Data URI
Embed an inline SVG favicon in HTML with a data URI: correct link markup, encoding rules, fallbacks, CSP checks, and how to confirm the SVG is truly vector.
Favicon Size for Google Search: What Google Asks For
What favicon size Google expects for search results, why square proportions matter, and how SVG and raster favicon files fit Google's requirements.
Create a new favicon
How to create a new favicon from a vector logo, including dark mode variants, clean SVG paths, raster fallbacks and a final check before launch.
Creating and Adding an SVG Favicon
How an SVG favicon works, how to prepare vector logo artwork for tiny sizes, how to add it to a page with fallbacks, and which details to verify.
Can You Set a Favicon with CSS?
CSS cannot set a favicon. Learn how favicons are declared in HTML, where CSS works inside an SVG favicon, and how ICO and SVG files differ for logo artwork.
Set a favicon in Django
How to add a favicon to a Django project with static files and a template link tag, and how to prepare vector logo artwork so the icon stays legible at small pixel sizes.
How to Set Up a Favicon in Next.js
How to change a favicon in Next.js with the App Router or Pages Router, which icon files and sizes to provide, how the metadata API handles icons, and why an old icon keeps showing.
Design a Mushroom Favicon That Works in Light and Dark Mode
How to design a mushroom favicon: simplify the silhouette, build clean vector paths, add a dark mode variant inside the SVG and ship raster fallbacks.
Add a favicon in Webflow
How to add a favicon in Webflow, which file to upload, how SVG logo files fit in, and how to prepare vector logo artwork so it stays legible at tab size.
The Correct MIME Type for a Favicon
Which MIME type a favicon should use for ICO, PNG and SVG files, why the server header matters more than the HTML hint, and how this relates to vector logo artwork.
How to Create a Favicon for Your Website, Including Dark Mode Variants
Turn a vector logo into a favicon that works in light and dark browser themes: simplify the mark, prepare clean paths, export SVG, PNG and ICO files, add the HTML and verify the result.
How to Set a WordPress Favicon Programmatically
Set a WordPress favicon in code from a child theme, replace or filter the core Site Icon output, add dark mode variants, and prepare logo artwork that stays legible at tab size.