Favicons
Articles about favicons.
290 posts
Add or change a favicon in Ruby on Rails
How Rails 8 handles favicons, which files to replace, how to prepare a clean SVG icon with PNG fallbacks, and why an old icon can persist in the browser.
What is a favicon?
A favicon is the small icon that identifies a website in browser tabs, bookmarks and similar spots. Learn what it means for vector logo artwork and SVG files.
How to Add a Favicon to Your Website's HTML
Where to put the favicon link in HTML, which file formats to use, how to prepare a vector logo as an SVG favicon with a fallback, and how to check that it works.
How to Add an SVG Favicon to HTML and Plan for Browser Support
Add an SVG favicon with one link element, keep raster fallbacks for browsers like Safari, and prepare the logo artwork so it stays legible at tab size.
Favicon Size for Websites: Dimensions, Safe Areas and Padding
Which favicon sizes a website needs, how safe areas and padding differ between tab icons and home-screen icons, and how to prepare them from vector logo artwork.
Pixel Grid for Favicon Design: What It Is and Why It Matters
What a pixel grid is in favicon design, how it differs from a vector logo's freeform geometry, and how to align artwork so small icons render sharply.
How to Crop an Image for a Favicon
Crop a logo for a favicon: isolate the mark, square the artboard, add padding, plan dark mode variants, export the files and test them at real sizes.
Reduce favicon size
How to shrink a favicon in pixel dimensions and file weight: which sizes to export, how to simplify vector logo artwork for small display, and how SVG, PNG and ICO files differ.
How to Make a Transparent Favicon
Make a transparent favicon from vector logo artwork: pick a format that keeps an alpha channel, clean up the paths, export cleanly, build the ICO, and test on light and dark tabs.
Space Logo Design for Favicons: Choosing a Symbol That Survives at Tiny Sizes
How to pick and prepare a space-themed symbol for a favicon: which cosmic motifs hold up at small sizes, why vector source artwork matters, and what to check before using it.
Favicon vs Submark: Key Differences and How to Choose
A submark is a compact version of a logo; a favicon is the small icon a website shows in browser tabs. Learn how they differ, how they relate and how to pick a favicon symbol.
How to Add a Favicon to an HTML Website
Add a favicon to your HTML site with the right link tags, prepare logo artwork with proper safe areas and padding, and confirm the tab icon displays correctly.