Favicons
Articles about favicons.
290 posts
How to Change the Favicon in Squarespace
Replace your Squarespace favicon with a clean, square icon built from your vector logo. Covers symbol selection, artwork preparation, export, upload and verification.
SVG Favicon Sizing: width, viewBox and the Viewport
How width, height, viewBox and the viewport work together in an SVG favicon, why viewBox matters most, and what to check before shipping the file.
Convert SVG to a Transparent ICO Favicon
How to turn an SVG logo into a transparent multi-size ICO favicon: preparing the vector file, choosing sizes, converting with transparency intact and checking the result.
How to Prepare a 64×64 Favicon from a PNG
Turn a PNG logo into a crisp 64×64 favicon: start from the cleanest source, simplify the mark, align it to the pixel grid, export, and check the result.
Does a Pixel-Art Favicon Need Anti-Aliasing?
Pixel-art favicons usually look best without automatic anti-aliasing. Learn when smoothing helps, when it blurs, and how to export crisp icon sizes.
Favicon Light and Dark Mode: How to Make Your Icon Adapt to Either Theme
How to make a favicon switch between light and dark mode with an SVG favicon and a prefers-color-scheme media query, plus how to prepare the logo artwork, add fallbacks and test the result.
How to Use SVG for a Favicon
How to use an SVG file as a favicon: preparing logo artwork for tiny sizes, refining shapes against the pixel grid, adding the HTML link tag, keeping raster fallbacks and verifying the result.
How to Add a Favicon in HTML
Add a favicon in HTML with the link element and rel="icon", prepare vector logo artwork for small sizes, add a dark mode variant, and check that it works.
Dark Mode Favicon: How to Adapt a Vector Logo Icon for Dark Browser Themes
How a dark mode favicon works, why an SVG favicon with a color-scheme media query is the usual approach, and how to refine small logo artwork so it stays legible on dark tabs.
Favicon Remove White Background: How to Get a Clean, Transparent Browser Icon
How to remove a white background from a favicon: check whether your logo is vector or raster, delete or knock out the white, export with transparency, and test on light and dark tabs.
Anti-Aliasing Favicon Edges in Affinity Photo
How anti-aliasing affects favicon edges in Affinity Photo, where to control it, and how to keep a vector logo crisp at very small pixel sizes.
Favicon Supported Formats: Which File Types Work and When to Use Each
A practical guide to favicon formats: ICO, PNG, SVG and others, how they differ, and how to prepare favicon files from a vector logo.