What is an Icon?

Icons range from basic geometric shapes to detailed symbolic designs, and some are animated to make their purpose clearer. They're most familiar in graphical user interfaces (GUIs), the visual type of user interface found on computers and mobile devices, but they also appear in the physical world on street signs and road markings.

The trash can, for example, is widely recognized as a symbol for deleting an item. On websites, the most common icon is the favicon, the small image that identifies a site in browser tabs and bookmarks.

Icon vs. logo vs. favicon

The three terms overlap, but each does a different job:

• Icon: a small image that stands for a function, object, or action inside an interface, like a gear that opens settings.
• Logo: the unique mark that identifies a brand, used everywhere the brand appears.
• Favicon: the small icon a browser shows in tabs, bookmarks, and history, usually a simplified version of the logo.

A quick test: if the image says who you are, it's a logo. If it shows what something does, it's an icon.

Web icon file formats

Use SVG for interface icons unless you have a specific reason not to. MDN's image file format guide calls SVG ideal for icons and interface elements that must be drawn accurately at different sizes. Here's the full choice set:

• SVG: a vector file written as XML text, so it renders sharply at any size without losing quality.
• PNG: a raster format built from a fixed grid of pixels; use it when the artwork can't be drawn as vectors. Browsers can scale a PNG, but for crisp results export it at each size you display it.
• ICO: the format behind the classic favicon.ico file. Browsers still support it, but MDN lists it among formats to avoid, and WordPress's documentation recommends a square PNG of at least 512 × 512 pixels for your site icon instead.
• Icon fonts: sets like Font Awesome and Google's Material Symbols deliver icons as characters in a font file. They're easy to drop in, but the full font ships glyphs you never use: Google's own docs put the complete Material Symbols font at 295 KB, versus 1.7 KB subset to 3 icons. SVG also gives finer styling control, down to coloring the individual parts of a symbol.

With WordPress's built-in Site Icon feature, you don't need to prepare a favicon.ico file yourself. Our guide to creating a custom favicon in WordPress walks through the steps.

When icons fail

Most icons fail the same way: people can't tell what they mean. Nielsen Norman Group's icon-usability research (July 27, 2014) found that icons with nearly universal recognition are rare. Home, print, and the search magnifying glass make the short list. The heart and star are frequently misunderstood because sites use them for different things (favorites, bookmarks, featured items, ratings), and while most interfaces use the 3-line hamburger icon for the main navigation menu, some use the same icon for a plain list.

So pair every icon with a visible text label unless it's one of those few universal symbols. Unlabeled, ambiguous icons slow people down and hurt the user experience (UX), and an icon-only button with no accessible name tells a screen reader user nothing.

Go icon-only where space is tight, like a toolbar or mobile navigation, and only when the symbol is genuinely standard. Even familiar symbols can be read differently across cultures and contexts, so keep the visible label unless research or testing with your intended audience shows the icon is understood on its own. Also remember that the visible symbol and the clickable area are separate things: WCAG 2.2 sets a minimum pointer-target size of 24 by 24 CSS pixels for most controls, so put a small icon inside a larger tappable area. When in doubt, keep the label.