Does the note cost points?

The score stays the same. The note is listed in the audit file under the observations, because switching saves requests and makes the icons sharper.

And icon fonts such as Font Awesome?

An icon font loads all its icons as a font file, even if the page shows only a few of them. For a few icons, SVG is smaller. The check reports many font files separately.

Does the favicon count?

The rule applies to the page’s img elements. The favicon is included via a link element in the head of the page and is therefore outside the rule.

Do icons from the CSS count?

The rule applies to img elements. Icons as a CSS background or from a sprite file count in the page weight and the image share.

This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

CO₂ & EmpCo

Why should small symbols come as SVG instead of PNG?

Small icons such as a phone handset, an envelope or a magnifying glass appear on almost every page. If they come as raster images, each is usually a separate file, and on high-resolution screens they often look soft. The check reports images displayed at most 48 pixels wide that come as PNG, JPEG, GIF or BMP as a note. The score stays the same.

What counts as an icon

The image table assigns a role to every img element. An icon is an image displayed at most 48 pixels wide. Images up to 16 pixels in natural width, images with at most 2 pixels of display width and files with names such as spacer or 1x1 are listed in the table as placeholders. The rule applies to icons in PNG, JPEG, GIF and BMP; WebP and AVIF count as modern formats.

Why SVG

An icon as SVG is a handful of lines of text, often under one kilobyte, and stays sharp at any size and pixel density. If it sits directly in the document, it arrives with the page; several icons in a shared file share one request. Colour and size can be changed via CSS, for example for focus or dark mode.

A name for screen readers

An icon that forms a link or button on its own needs a name for screen readers, such as aria-label on the link. An icon next to visible text gets aria-hidden="true"; the screen reader then reads the text once.

Examples

Phone link

Not met

<a href="tel:+43123456789"><img src="/icons/telefon.png" width="24" height="24"></a>

Passes

<a href="tel:+43123456789" aria-label="Anrufen: +43 1 234 567 89">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
    <use href="/symbole.svg#telefon"/>
  </svg>
</a>

Read the example address and the format in the note.
Replace the icons with SVG, from a free icon set or from your site’s designer.
Combine several icons in one SVG file and include them with use.
Give icons that form a link or button on their own an accessible name.

Deutsche Fassung dieser Seite