Set a favicon in Blogger

The short answer

Blogger includes a Favicon setting in the Layout section of the dashboard. You open the Favicon gadget, upload a small square image made from your logo, and save. That replaces the default Blogger icon in browser tabs, bookmarks and history lists. Blogger hosts and serves the file for you, so no theme code is required.

The upload accepts a raster image, which is a fixed grid of pixels. Your vector logo is the source you design and export from, not the file Blogger displays. This matters for dark mode: one raster favicon cannot change color when a browser switches to a dark theme, so the mark has to read well on light and dark tab backgrounds.

Steps to add the favicon in Blogger

• 1. Sign in to Blogger and select the blog you want to change.
• 2. Open Layout from the left-hand menu.
• 3. Find the Favicon gadget, usually near the top of the layout view, and choose Edit.
• 4. Select your prepared square image file and upload it.
• 5. Save the gadget, then view the blog in a new browser tab.

Browsers cache favicons heavily. If the old icon still appears, try a private window, another browser, or clearing the cached site data before you assume the upload failed. Menu labels and placement can vary between Blogger themes and interface updates. If the gadget is not where described, look for Favicon in the Layout page itself rather than under Settings.

Preparing the image from a vector logo

Keep a vector master file for the logo, such as an SVG, AI, EPS or PDF. Export the favicon from that file instead of shrinking a large raster logo. Exporting from vector paths gives clean edges at the target size, while downscaling a raster image tends to blur fine detail.

Check that the master really contains vector paths. A file with a vector extension can still hold an embedded raster image, such as a pasted photo or screenshot of the logo. Open the file in a vector editor and use outline or wireframe view. Editable artwork shows as paths and shapes, while an embedded image shows as a single rectangle. If the logo turns out to be raster-only, redraw it before you build favicon variants.

• Use a square canvas. Blogger and browsers display favicons as squares, so place wide logos on a square background.
• Simplify for small sizes. A full wordmark is rarely readable in a browser tab. A single letter, monogram or symbol from the logo usually works better.
• Remove fine strokes, small text and subtle gradients that disappear at tab size.
• Preview the export at actual size, not zoomed in, before uploading.

Dark mode: what Blogger's upload can and cannot do

Many browsers draw tabs on a dark background when the operating system or browser uses a dark theme. A favicon that looks fine on a light tab can disappear on a dark one. This happens most with dark logos on transparent backgrounds. The reverse problem affects white or very light marks on light tabs.

An uploaded raster favicon looks the same in every mode. The practical goal is a single version that holds up on both backgrounds. Common ways to do that:

• Place the mark on a solid filled shape, such as a rounded square or circle in a brand color, so the shape carries its own contrast.
• Add a thin contrasting outline or keyline around a dark or light mark so its edge stays visible on either background.
• Choose a mid-tone brand color with adequate contrast against both near-white and near-black tabs.
• Test the exported file on a light tab and a dark tab before uploading.

True dark-mode variants need an SVG favicon

A favicon that actually switches colors needs an SVG favicon with an embedded style rule that responds to the prefers-color-scheme media feature. Browsers that support SVG favicons and this rule will recolor the icon when the user's color scheme changes. Support differs between browsers, so keep a raster fallback in place.

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #f5f5f5; }
  }
</style>

This fragment goes inside the SVG file. Shapes use the dark fill by default and switch to the light fill when the user prefers a dark scheme. The color values are placeholders, so replace them with your brand colors.

Using this in Blogger is a separate, more advanced route than the Favicon gadget. It means editing the theme HTML to add a reference to the SVG file, which must be hosted at a stable public location. The supplied information does not confirm whether Blogger's Favicon gadget accepts SVG files. It also does not confirm a supported way to host a standalone SVG within Blogger. Verify both before choosing this route. Back up the theme before editing its HTML, and keep the gadget's raster favicon as the fallback for browsers that ignore SVG icons.

Using a logo you did not create

Permission to download a logo is not permission to alter it or to use it as your site's icon. Simplifying, recoloring or making a dark variant all modify the artwork. Doing that with another organization's logo can conflict with its trademark rights or brand guidelines, and the fonts in a wordmark may carry their own license terms. For your own brand, or for a client who owns the mark and has approved the changes, this is not an issue. In other cases, confirm the permissions first.

Gaps in the available information

No confirmed specifications were supplied for this topic. That includes Blogger's accepted file formats, maximum file size, recommended pixel dimensions, and current browser support for color-adaptive SVG favicons. Check the file requirements shown in Blogger's upload dialog, and test the result in the browsers your readers use, rather than relying on figures quoted elsewhere.