Favicons
Articles about favicons.
290 posts
Favicon Dark and Light Mode: How to Make One Icon Work on Both Themes
How favicons adapt to dark and light themes: SVG with prefers-color-scheme, separate files, fallbacks, symbol choices, and what to check in your vector logo artwork.
Adjusting an SVG Favicon Gradient with Stop Offset
How the stop offset attribute controls where colors fall in an SVG favicon gradient, how values are interpreted, and what to check before shipping the icon.
WordPress Favicon Size: Preparing the Site Icon Canvas
What size WordPress expects for a Site Icon, why the canvas should be square, and how to prepare vector logo artwork with safe padding before exporting it.
How to Change the WordPress Admin Favicon
Change the favicon shown in the WordPress dashboard and login screen, either through the Site Icon setting or with a separate admin-only icon, and prepare logo artwork that stays legible at tab size.
Installing and Replacing a Favicon in WordPress
How to add or change a favicon in WordPress through the Site Icon setting, prepare a vector logo for tiny pixel sizes, and fix themes or caches that keep showing the old icon.
Diamond Favicon Design: Refining a Gem Icon on the Pixel Grid
How to design a diamond favicon that stays crisp at small sizes: simplify the facets, align edges to the pixel grid, and keep the vector master separate from raster exports.
Crown Favicon: Designing a Crown Icon That Holds Up in Light and Dark Mode
How to design a crown favicon that stays legible at tiny sizes, how to build light and dark variants, and what to check about vector files and licensing.
Butterfly Favicon: Designing a Clear Mark with Light and Dark Mode Variants
How to design a butterfly favicon that stays legible at tiny sizes and in dark browser themes, plus which vector and raster files to prepare and how to check them.
Website Favicon Sizes in Pixels
The favicon sizes websites commonly provide, from 16×16 browser-tab icons to 512×512 app icons, and how a vector logo becomes a set of legible favicons.
How to Optimize a Favicon File
A step-by-step guide to favicon optimization: simplify the logo mark, clean the SVG paths and code, prepare raster fallbacks, reference the files correctly and verify the result.
How to Add a Favicon in Blogger, Starting From Vector Logo Artwork
Step-by-step guide to setting a favicon in Blogger, preparing it from a vector logo, and checking that the new icon appears.
Configure a favicon in Next.js
How to set up a favicon in Next.js 13 and 14 with the App Router, prepare vector logo artwork for small sizes, and add dark mode variants that stay visible.