What Is a Favicon in Blogger?

Definition

A favicon, short for "favorites icon," is the small square image that identifies a website in browser tabs, bookmark lists, browsing history and similar compact spaces. In Blogger, the favicon is the icon attached to your blog. You set it in the blog's Layout area, which has a Favicon element where you upload an image. If you don't set a custom favicon, a generic Blogger icon is typically shown instead.

Why the term matters in vector logo work

Logos are usually built as vector artwork. Vector artwork is made of paths, which are shapes defined by anchor points and curves, so it can be scaled to any size without losing sharpness. A favicon is displayed very small. At that size, fine lines, small counters (the enclosed spaces inside letters such as "o" or "e") and long wordmarks tend to blur together. For this reason a favicon is usually a simplified derivative of the logo, such as a monogram, symbol or single distinctive shape, rather than the full logo with its name.

Vector geometry, raster pixels and file containers

Favicon discussions often mix up three different things. Keeping them separate helps you know which file you are editing and which file you are uploading.

Concept | What it is | Typical formats | Relevance to a favicon

Vector geometry | Shapes stored as mathematical paths that scale without quality loss | SVG, AI, EPS, PDF | The master artwork where you design and simplify the icon

Raster content | A fixed grid of pixels; enlarging it causes blur or blockiness | PNG, GIF, JPG | The kind of image most commonly delivered as a favicon

File container | A file format that packages one or more images | ICO | Can hold several raster versions of the icon at different pixel sizes in one file

An SVG file is not automatically pure vector. It can embed a raster image, and in that case the embedded part still has a fixed resolution. Before you export from an SVG, check that the icon is actually built from paths.

Preparing logo artwork for a Blogger favicon

• Start from the master vector logo, not from a screenshot or a previously compressed image.
• Pick the simplest recognizable element of the logo, such as an initial, symbol or core shape.
• Place it on a square artboard, because favicons are displayed as squares.
• Remove or merge fine details, and thicken thin strokes so they stay visible at small sizes.
• Drop small text, or convert any remaining letterforms to outlines so the shapes don't depend on installed fonts.
• Preview the artwork at very small sizes and against light and dark backgrounds before you export.
• Export to an image type that the Blogger Favicon uploader currently accepts, then upload it through the Layout area.

Points the available information does not confirm

No confirmed evidence was supplied for Blogger's accepted favicon file types, its maximum upload size, its recommended pixel dimensions, or whether it accepts SVG uploads directly. Check these details in the current Blogger interface or help pages before you prepare final files. After you change a favicon, browsers may keep showing a cached older version for a while. Seeing the old icon right after an upload does not necessarily mean the upload failed.