电商与网站建设

How do you set the small icon shown for a webpage?

Set the small browser icon with a favicon

The small icon shown in a browser tab, bookmark, or favorite list is usually a favicon. Add an icon file to the site and reference it with rel="icon". MDN documents the rel attribute, and the HTML Standard icon link type defines how icon links are selected.

Common favicon links

<link rel="icon"
      href="/favicon.ico">
<link rel="icon" type="image/png"
      href="/icons/favicon-32.png"
      sizes="32x32">
<link rel="icon" type="image/svg+xml"
      href="/icons/favicon.svg"
      sizes="any">

Use sizes="32x32" for a 32 by 32 PNG. Do not write sizes="any" for a normal .ico or PNG just because the browser can display it at several sizes; any is appropriate for scalable formats such as SVG, or omit sizes when you do not need to specify it.

If the old icon still appears

  • Open the icon URL directly, for example https://example.com/favicon.ico, and make sure it returns the image instead of a 404 page.
  • Check the path in the HTML. /favicon.ico means the site root; favicon.ico means the current page folder.
  • For cache busting, change the URL, such as /icons/favicon-32.png?v=2, or deploy a new filename and update the link.
  • Reload the page and test in a second browser profile. Private windows may avoid some normal browsing data, but they do not guarantee that every favicon cache is refreshed.

Keep the file small and square, and use a simple shape that remains readable at 16px or 32px.

Back to all posts