Favicons
Articles about favicons.
290 posts
Crop an Image for a Favicon: What a Cropper Does and When Vector Artwork Needs a Different Approach
How to crop an image for a favicon, what a favicon cropper produces, and why cropping an SVG logo means adjusting its viewBox rather than cutting pixels.
How to Choose a Favicon Design and Color for Your Brand
How to choose a favicon color that stays visible on light and dark browser tabs, simplify your logo into a small mark, and prepare vector artwork for delivery.
SC Logo Design for Favicons: Choosing and Preparing an SC Monogram Symbol
How to choose, build and deliver an SC monogram as a favicon: symbol choices, vector master files, small-size legibility, and font and trademark permissions.
OT Logo Design for Favicons: Choosing and Building an OT Monogram
How to design an OT monogram for a favicon: choosing the symbol, keeping it legible at tiny sizes, building clean vector artwork and choosing file formats.
Reduce Favicon Size: Smaller Files and Legible Icons from a Vector Logo
How to reduce favicon size: cut file weight in SVG, PNG and ICO exports, and simplify a vector logo so it stays legible at tiny dimensions.
How to Design and Implement Dark Mode Favicons
Build a favicon that stays legible in light and dark browser themes: prepare the vector mark, embed a color-scheme media query in an SVG, add raster fallbacks and verify the result.
How to Set a Favicon in Elementor
Set your WordPress favicon through Elementor's Site Settings, prepare square logo artwork that stays legible at tiny sizes, and handle light and dark browser themes.
How to Set and Change a Favicon with JavaScript
Set or swap a favicon with JavaScript by updating the link rel="icon" element. Covers SVG favicons, generated icons, caching, fallbacks, and preparing logo artwork for small sizes.
Converting an SVG Favicon to a Raster Image
How to turn an SVG favicon into PNG or ICO files: when you need raster versions, which sizes to export, how to keep small icons legible, and what to check before converting.
How to Resize a Favicon File
Resize a favicon the right way: export each pixel size from vector logo artwork, simplify details for small sizes, reduce file weight and check the result.
How to Add or Change a Favicon in Elementor
Set or replace your WordPress site favicon from Elementor's Site Settings, prepare a square icon from your vector logo, and fix a favicon that won't update.
How to Set a Favicon in Twenty Twenty-Three
Set a favicon (site icon) in the Twenty Twenty-Three WordPress theme, prepare square artwork from your vector logo, and check that the icon appears.