Favicons
Articles about favicons.
290 posts
Favicon Canvas Size and Safe Areas: Choosing Dimensions Without Losing Detail
What size an SVG favicon should be, how viewBox and safe areas work, and how to keep a vector logo legible at tiny tab sizes, with the gaps you still need to verify.
Adding a PNG Favicon: Code, Sizes and Pixel-Grid Preparation
Yes, a favicon can be a PNG. Learn the HTML code to add one, which sizes to export, and how to refine a vector logo on the pixel grid so it stays sharp.
How to Create an SVG File for a Favicon
A practical guide to drawing a favicon as an SVG: simplifying logo artwork, building clean vector paths, exporting a lean file, adding it to a site and checking the result.
Transparent Grid PNGs for Refining Favicon Artwork
What a transparent grid PNG is, how it differs from a vector grid or a checkerboard image, and how a pixel grid helps you refine favicon artwork at small sizes.
Favicon Size: Resolution, Aspect Ratio and Multiple Icon Versions
What size a favicon should be: why it's square, which pixel sizes common platforms use, how SVG fits in, and how to declare multiple favicon sizes in HTML.
Removing the White Background from an SVG Favicon
How to make an SVG favicon transparent: find what is actually producing the white, remove or cut it out correctly, and check the result against light and dark browser tabs.
How to Add a Favicon with html-webpack-plugin
Add a favicon with html-webpack-plugin's favicon option, prepare SVG logo artwork for small sizes, add a fallback icon, and confirm the tag and file in your build.
How to Set Up a Favicon in Payload CMS
Set a custom favicon for the Payload CMS admin panel and your Next.js frontend, prepare SVG and PNG icon artwork, and verify the result step by step.
How to Add a Favicon in Jekyll
Add a favicon to a Jekyll site: prepare SVG and fallback icon files from your logo, place them in the site source, link them in the head and verify the result.
Generate a Favicon from a Logo
How to turn a vector logo into a sharp favicon: what generators do, why small sizes need pixel-grid refinement, which files to export, and what to check first.
Anti-Aliasing for Favicons: How Smoothing Works on a Pixel Grid
What anti-aliasing is, the main algorithms behind smooth edges, and how to refine vector logo artwork so a favicon stays crisp at small pixel sizes.
How to Add a Favicon to an MVC Application
Add a favicon to an ASP.NET MVC app: prepare SVG and ICO artwork from your logo, place the files, reference them in the layout, and verify the result.