Design a Mountain Favicon

A mountain favicon works when the peak is reduced to one bold, filled silhouette that still reads at 16 pixels and stays visible on both light and dark browser tabs. In practice that means drawing a simple vector mark, deciding how it will behave in dark mode, and exporting a small set of files: an SVG for modern browsers, an ICO for older ones, and PNGs for home screens and installed web apps. This guide covers each of those steps. It does not refer to any specific brand's mountain logo, because no particular logo or asset was identified.

Simplify the mountain for a tiny canvas

Most mountain logos are designed for headers, signs or packaging. At favicon size, detail that works there becomes noise. Ridgelines, tree lines, sun discs, gradients, thin outlines and any lettering usually collapse into a blur. A recognisable favicon typically keeps only the parts that define the shape: one or two peaks, a firm base line, and possibly a snowcap made as negative space or a single contrasting fill.

• Use filled shapes rather than strokes, since thin strokes disappear or blur at small sizes.
• Limit the mark to one or two peaks; a third peak rarely survives at 16 pixels.
• Make the snowcap a simple notched shape rather than a detailed jagged edge.
• Avoid gradients and soft shadows, which turn muddy when scaled down.
• Drop any text, including initials, unless the letter is the main element of the mark.
• Check the silhouette at actual size, not only zoomed in.

If the full logo cannot be simplified without losing its character, a separate small-size version is a normal and legitimate choice. Many identity systems keep a detailed primary logo and a reduced icon version for favicons and app icons.

Build it as real vector artwork

Draw the favicon in a vector editor using closed, filled paths on a small square artboard. Align the main edges and points to the pixel grid where possible; diagonal slopes will always need some anti-aliasing, but horizontal base lines and peak points that land on whole pixels look noticeably crisper when the icon is exported to small PNG or ICO sizes.

Vector artwork, embedded raster images and raster previews are different things, and the difference matters for favicons. An SVG file can contain genuine paths, or it can simply wrap a pasted bitmap that will not scale cleanly or switch colours. Some downloaded logo packs also include a pixel preview inside a vector container. A file extension alone does not confirm editable paths, so open the file and check that the mountain is made of selectable shapes before treating it as a master.

Plan the dark mode variant

The main dark mode risk for a mountain icon is the classic dark silhouette disappearing against a dark tab bar, while a white or pale peak can vanish on a light one. There are three common ways to handle it.

• Contained tile: place the mountain on a coloured square or rounded square so the icon brings its own background. This is the most predictable option because it does not depend on browser support for colour-scheme switching.
• Theme-aware SVG: put a prefers-color-scheme media query inside the SVG so the peak and snowcap swap colours when the system or browser is in dark mode.
• Separate files: provide light and dark image files and select between them with a media attribute on the icon link tags. Support for this approach is less consistent, so test it before relying on it.

The theme-aware SVG approach looks like this. The colours are placeholders, and a standalone SVG file also needs the standard SVG namespace attribute on its root element, which is omitted here.

<svg viewBox="0 0 32 32">
  <style>
    .peak { fill: #1f2a37; }
    .snow { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .peak { fill: #e5ecf3; }
      .snow { fill: #1f2a37; }
    }
  </style>
  <path class="peak" d="M2 27 L12 9 L17 17 L21 12 L30 27 Z"/>
  <path class="snow" d="M12 9 L9.5 13.5 L11.5 12 L13 13.5 L14.5 13 Z"/>
</svg>

Two caveats apply. First, the media query responds to the colour scheme reported by the system or browser, which is not always the same as the actual colour of the tab strip, for example when a custom browser theme is in use. Second, support for SVG favicons and for colour-scheme switching inside them has differed between browsers and has changed over time. No current support data was supplied for this guide, so verify the behaviour in the browsers your audience uses, and keep raster fallbacks either way. A contained tile, or a mid-tone mountain with a light snowcap, is a sensible fallback design because it stays visible in both modes even where no switching happens.

Files to export

File | Purpose

favicon.ico | Legacy fallback, commonly containing 16 and 32 pixel versions

favicon.svg | Scalable icon for browsers that support SVG favicons; can carry the dark mode media query

apple-touch-icon.png (180 x 180) | Icon used when the site is saved to an Apple home screen; give it an opaque background

PNG icons at 192 x 192 and 512 x 512 | Referenced from the web app manifest for installed web apps and launchers

Editable master vector file | Source artwork with clean paths, kept for future edits and new sizes

Export the small PNG and ICO sizes from the simplified, grid-aligned artwork rather than scaling down a large export, and review each size individually. The head of the page then references the files, typically like this:

<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

If you are adapting an existing mountain logo

Being able to download a logo file is not the same as having permission to modify it or use it as your own favicon. Simplifying, recolouring or cropping someone else's artwork can conflict with its licence, and a mountain mark that is a registered or recognisable trademark may be restricted regardless of how the file was obtained. Fonts bundled into a logo carry their own licence terms as well. For your own brand, work from the official master artwork; for third-party or stock marks, check the licence terms for modification and logo use before building a favicon from them.

Pre-launch checklist

• The mountain reads clearly at 16 pixels in a real browser tab.
• The icon is visible with the system set to light mode and to dark mode.
• The SVG contains vector paths, not an embedded bitmap.
• ICO and PNG fallbacks are present for browsers that ignore the SVG or its media query.
• The home screen icon has an opaque background and enough padding.
• The editable master file is stored with the delivered assets.
• Rights to modify and use the artwork as a favicon are confirmed.

What this guide cannot settle: it has no details on your specific logo, brand colours or target browsers, and no tested browser support figures. Colour choices, the exact simplification and the dark mode method should be confirmed against your own artwork and audience.