How to Add Website Thumbnails to a Blogger Blogroll in India

Short answer: In Blogger, open Layout → Add a Gadget and add Blog List if it appears in your gadget picker. Blogger’s documented visual option is an optional favicon—a small site icon—not a guaranteed large thumbnail or logo card. If you want larger images beside each link, create a custom image-and-link list with images you host yourself. The same general Blogger workflow applies to blogs run in India; check the current gadget picker and your theme because availability and display can vary.

What Blogger means by a blogroll thumbnail

Blogger’s official Blog List announcement describes a blogroll gadget with an optional favicon. It also describes feed-based details such as a linked site’s latest update time, post title, and snippet. Those are documented capabilities from the feature announcement; check your current editor for the controls available to your account and theme. Do not assume the built-in gadget will show a larger preview image for every site. Blogger’s Blog List announcement

A favicon is the small icon associated with a website or browser tab. Blogger’s separate favicon setting lets you upload an icon for your own blog; it does not make Blog List display thumbnail images for the other websites in your list. Blogger’s settings help

Option 1: Add Blogger’s Blog List gadget

1. Sign in to Blogger and choose the blog you want to edit.
2. Open Layout.
3. In the sidebar or other layout area where the blogroll should appear, select Add a Gadget.
4. Look for Blog List. If it is available, add it and configure the links and display settings shown in the editor.
5. Save the gadget, then save the layout arrangement.
6. Open the published blog and inspect it in your theme, including a narrow mobile viewport. Confirm whether the favicon and any feed details appear as you expect.

Blogger Help documents the Layout and Add a Gadget workflow. The Blog List announcement describes sorting by name or update time and hiding some entries behind a “show all” link; treat these as controls to look for in your current editor, not promises that every historic option is present.

What this option is good for

• Quickly maintaining a curated list of blogs, pages, or feeds without hand-writing each link.
• Showing a favicon when Blogger can display one for the linked site.
• Showing feed-related details for sites with RSS or Atom feeds, where the current gadget supports them.

When it does not meet the thumbnail requirement

If you need a larger, consistent image for each entry, or a site’s favicon is missing, use a custom list. Blog List and a custom list are different approaches: the first is easier to maintain, while the second gives you control over the image and layout.

Option 2: Build a custom image-based blogroll

This method uses image files you already have permission to use and stable image URLs that load publicly. Upload the images to a location you control or use Blogger’s image upload workflow, then copy each image’s public URL. Add an HTML/JavaScript gadget from Layout and paste the snippet, replacing the example values. The code below is escaped so it displays as code in this article; in Blogger, paste ordinary HTML tags without the escape characters.

<ul class="visual-blogroll">
  <li>
    <a href="https://example.com/">
      <img src="https://your-public-image-host.example/site-one.webp"
           alt="Site One" width="96" height="64" loading="lazy">
      <span>Site One</span>
    </a>
  </li>
  <li>
    <a href="https://example.org/">
      <img src="https://your-public-image-host.example/site-two.webp"
           alt="Site Two" width="96" height="64" loading="lazy">
      <span>Site Two</span>
    </a>
  </li>
</ul>

<style>
.visual-blogroll {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visual-blogroll li + li {
  margin-top: 12px;
}
.visual-blogroll a {
  align-items: center;
  display: flex;
  gap: 12px;
  text-decoration: none;
}
.visual-blogroll img {
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  object-fit: cover;
  width: 96px;
  height: 64px;
}
</style>

1. Prepare one image per link. Use a consistent crop and size; use an icon instead if you only need a favicon-sized mark.
2. Upload the images and copy their public URLs. Check that each URL opens without requiring you to sign in.
3. In Blogger, open Layout → Add a Gadget → HTML/JavaScript, if that gadget is available.
4. Paste the edited snippet, replacing every example destination and image URL with your own. Keep the image’s alt text meaningful; it should identify the linked site or image.
5. Save the gadget and layout. Preview the published page on desktop and mobile, and check every link and image.

Blogger documents editing HTML or CSS through Theme and notes that widget tags can be used for page elements such as pictures and a blogroll. A gadget is usually the more contained place to try a small custom list; theme-level changes require more care. Google cautions that authors add code or third-party widgets at their own risk. Blogger Help: design, HTML, and CSS · Blogger layout widget tags

Accessibility, privacy, and maintenance

• Use useful alt text. Do not leave meaningful images with empty alt text; identify the site or convey the image’s purpose.
• Keep links understandable without images. The visible site name makes the destination clear if an image fails to load.
• Use stable, public image URLs. Private, temporary, or access-controlled URLs will not work for readers.
• Prefer images you own or are allowed to use. Hotlinking another site’s logo or image can fail when that site changes its URL or blocks embedding.
• Keep files modest in size. Large thumbnails add page weight. Resize and compress images to the displayed dimensions, and use lazy loading for entries farther down the page.
• Review the theme after changes. Theme CSS may override gadget styles, and a sidebar that is too narrow can make the layout wrap or overflow.

Choosing between Blog List and a custom list

Need	Better starting point	Trade-off
Fast setup and a maintained list of blog links	Blog List, if present	Its documented image treatment is an optional favicon, not a guaranteed large thumbnail.
Consistent, larger images beside every link	Custom HTML and image URLs	You maintain the links, images, and any markup or styling.
Recent post details for feed-enabled sites	Blog List, if the current gadget offers the setting	Feed availability and current editor controls affect what appears.
A curated public list of sites	Either	Choose based on the display you need and the maintenance you can take on.

Or skip the browser setup

If you want to create preview images for a custom list without setting up a browser capture script, ScreenshotNeo is a website screenshot API and MCP server. It returns a screenshot or PDF from a URL; you can use a screenshot as an image asset after saving and hosting it at a public URL. It does not automatically populate Blogger’s Blog List gadget.

One-call example (replace the target URL as needed; see the ScreenshotNeo API documentation):

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Problem	Likely cause	What to do
Blog List is not in Add a Gadget	The gadget may not be available in the current picker or account.	Use the custom HTML/JavaScript list if available, or check Blogger Help and the current editor for supported gadgets. Do not assume the historical announcement means it appears for every account today.
No icon appears beside a Blog List entry	The linked site may not provide a discoverable favicon, or the theme/gadget may not show it.	Check the published view and current gadget settings. If you need a guaranteed visual, use a custom image URL for that entry.
The image is broken for visitors	The URL is private, temporary, misspelled, or blocks external embedding.	Open the image URL in a private browser window. Re-upload it to a public location you control and update the snippet.
The image looks stretched or crops badly	Source dimensions do not match the display box.	Use a consistent crop and dimensions; object-fit: cover fills the box by cropping excess.
The sidebar moves below the posts or content overflows	The gadget content may be wider than the theme column.	Reduce thumbnail width, shorten text, and inspect the theme on a narrow screen. Blogger’s help page also lists overly wide content as a cause of a sidebar shifting below the page content.
Saving the gadget or theme reports an error	Markup or CSS may be malformed, or theme edits may conflict with the template.	Check quotes and closing tags, remove the latest change, and save again. For theme edits, keep a backup and follow Blogger’s HTML/CSS editor workflow.
The page looks unchanged after saving	You may be viewing a cached page or the layout arrangement may not have been saved.	Save the gadget and layout, then reload the public blog and check in a private window.

Blogger’s troubleshooting guide covers gadget errors, blank pages, and sidebar width problems: Fix Blogger errors and other problems.

Common questions

Is there a separate process for Blogger users in India?

The official setup instructions describe the general Blogger Layout workflow and do not specify a different India-only process. Follow the same steps, then confirm that the gadget and display settings are available in your account.

Does changing my blog’s favicon add thumbnails to my blogroll?

No. That setting changes the icon for your own blog. It does not establish or control thumbnails for the other sites in Blog List.

Are Reading List and Followers the same as a public blogroll?

No. Blogger’s Reading List is for following blogs and reading their latest posts from your dashboard; the Followers gadget lets visitors follow your blog. A blogroll is a public list of sites you choose to link to. Manage blogs you follow