logoredraws.com

Adding a PNG Favicon: Code, Sizes and Pixel-Grid Preparation

Yes, a favicon can be a PNG. Learn the HTML code to add one, which sizes to export, and how to refine a vector logo on the pixel grid so it stays sharp.

Published

Contents
  1. The short answer: yes, a favicon can be a PNG
  2. What a PNG favicon is, and what it is not
  3. The code to add a PNG favicon
  4. Which sizes to export
  5. Refining the logo on the pixel grid
  6. What a complete favicon delivery includes

The short answer: yes, a favicon can be a PNG

Modern desktop and mobile browsers accept PNG files as favicons when you declare them with a link element in the page head. Current browsers no longer require the ICO format. ICO still helps with legacy compatibility, and some browsers and tools request it automatically from the site root when a page declares no icon. This article covers what a PNG favicon is, the code that adds it, and how to prepare it from a vector logo so it stays legible at very small sizes.

What a PNG favicon is, and what it is not

PNG is a raster format: a fixed grid of pixels with optional transparency. A PNG favicon is an export of your logo, not the logo artwork itself. It contains no editable paths, and enlarging it later will blur or pixelate it. The vector master, usually an SVG, AI, EPS or PDF file with live paths, stays the source you edit. The PNG is a delivery file generated from that master.

A file extension alone does not prove what a file contains. An SVG or PDF can simply wrap an embedded raster image. Before you rely on a file for clean small-size exports, confirm that it contains real vector paths.

Format | Type | Sizes per file | Typical role
PNG | Raster | One | Standard icon for modern browsers; touch and app icons
ICO | Raster container | Several | Legacy fallback; default file at the site root
SVG | Vector | Scales to any size | Supported by many modern browsers, but not all

The code to add a PNG favicon

Put link elements inside the head of each page. The rel value marks the file as an icon. The type value declares it as PNG. The sizes value states the pixel dimensions, which lets the browser pick the best match.

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Replace the file names with the paths where your icons actually live. The apple-touch-icon line is optional. It supplies the image iOS uses when someone saves the site to a home screen, and the convention is a 180 by 180 pixel PNG. Use an opaque background for it, because iOS may not display transparent areas the way you intend.

To cover older browsers, or tools that request a default icon from the site root without reading your markup, also place a favicon.ico file there. It does not conflict with the PNG declarations.

Which sizes to export

  • 16 x 16: browser tabs on standard-density screens
  • 32 x 32: tabs on high-density screens, plus some bookmark and taskbar contexts
  • 48 x 48: used by some desktop and platform contexts
  • 180 x 180: the Apple touch icon
  • 192 x 192 and 512 x 512: listed in a web app manifest for Android home screens and installable web apps

Browsers and platforms change their requirements over time. No platform-specific documentation was supplied for this article, so check current guidance for the browsers and platforms you target before you finalize the set.

Refining the logo on the pixel grid

A detailed vector logo exported straight to 16 pixels usually comes out soft and muddy. Curves and thin strokes fall between pixels, and anti-aliasing turns them into grey smudges. Choosing PNG will not fix this. You have to prepare the artwork for the target size.

  • Start from a simplified mark. A monogram, symbol or single letterform usually reads better than a full logo with a wordmark or tagline.
  • Build each small size on its own artboard at exact pixel dimensions, such as 16 by 16 and 32 by 32. Do not just scale down one large file.
  • Snap straight edges and stroke widths to whole pixels. Horizontal and vertical lines then render crisp instead of straddling two pixel rows.
  • Thicken thin strokes and widen narrow gaps. Details smaller than one pixel will blur or disappear.
  • Check contrast against both light and dark browser themes, because the tab background differs between them. A subtle outline or a solid backing shape can keep the mark visible on both.
  • Preview at actual size, 100 percent, not zoomed in. If an export still looks soft, adjust individual pixels in a raster editor.

Keep these size-specific artboards in the vector source file so that future exports stay consistent. The small versions are deliberate adaptations of the logo, so treat them as part of the logo's file set rather than as throwaway exports.

What a complete favicon delivery includes

  • The vector master with live paths, including the size-specific favicon artboards
  • PNG exports at each required size, named clearly by dimension
  • An opaque PNG for the Apple touch icon
  • Optionally, a multi-size ICO file for legacy fallback
  • The link element snippet, so the developer can add the files without guessing at sizes or types