logoredraws.com

Configure website icons for mobile devices

How to turn a vector logo into the favicon, Apple touch icon and web app manifest icons that phones, tablets and home screens actually use.

Published

Contents
  1. The short answer
  2. Which icon each mobile surface uses
  3. Vector artwork, embedded rasters and previews
  4. How to produce the mobile icon set
  5. Starting materials
  6. Ordered steps
  7. Head and manifest entries
  8. Final inspection
  9. Permission to use the artwork
  10. Evidence gaps

The short answer

Mobile devices do not rely on a single favicon file. Different surfaces look for different icons:
• A mobile browser tab can use an SVG favicon or a small ICO or PNG fallback.
• An iPhone or iPad home-screen shortcut looks for an Apple touch icon, which is a square PNG declared with a link element whose rel value is apple-touch-icon.
• Android home screens and installable web apps read their icons from the web app manifest. The commonly documented sizes are 192×192 and 512×512 PNGs, and an icon can be marked as maskable so the system can crop it into its own shape.
Configuring icons for mobile means producing each of these files from one master vector logo and declaring each one in the page head or the manifest.

The vector logo is the source artwork, not the finished deliverable. The SVG favicon is the only place where vector artwork is delivered directly to the browser. Every other mobile icon is a raster export of that artwork, made at a fixed pixel size. A clean master file matters because it lets you export sharp PNGs at every size without redrawing.

Which icon each mobile surface uses

Surface | Icon it looks for | Format | Notes
Browser tab or address bar | Favicon | SVG, with ICO or PNG as fallback | SVG scales cleanly and can carry a dark-mode variant; support differs between browsers
iOS and iPadOS home screen | Apple touch icon | Square PNG, commonly 180×180 | The system rounds the corners; use an opaque background
Android home screen and installed web app | Manifest icons | PNG at 192×192 and 512×512 | Declared in the manifest's icons list
Android adaptive shapes | Maskable manifest icon | PNG with purpose set to maskable | Keep the mark inside the central safe zone, because the edges may be cropped
Browser UI color on mobile | Theme color | Meta tag or manifest value | A color value, not an image, but it frames how the icon appears

Platforms change how they handle these icons. The sizes and behaviors above are widely documented conventions, not results tested for this article. Check current browser and operating-system documentation before you finalize a delivery.

Vector artwork, embedded rasters and previews

A file ending in .svg is not proof that it contains editable vector paths. An SVG can simply wrap an embedded bitmap. In that case it will blur when scaled, just like a PNG. Likewise, a PNG or JPG preview of a logo is raster artwork, not vector, however large it is.
Before you build icons, open the source in a vector editor. Switch to outline or wireframe view and confirm that the mark is made of paths and shapes rather than a placed image. If it is raster only, you need a properly redrawn vector version for a dependable SVG favicon. Upscaling a bitmap does not solve the problem.

How to produce the mobile icon set

Starting materials

  • A master logo file with confirmed vector paths, such as an AI, EPS, PDF or SVG file that has been checked in outline view
  • A simplified icon version of the mark, such as a symbol, monogram or single letter, because a full wordmark is unreadable at favicon sizes
  • The brand's approved colors, including a background color for icons that must be opaque
  • A vector editor and an export method that can produce SVG and PNG at exact pixel dimensions

Ordered steps

  • 1. Make a square artboard and center the simplified mark on it. Remove fine details, thin strokes and small text that will not survive at small sizes.
  • 2. Convert any live text in the mark to outlines. This keeps the letterforms intact on devices that do not have the font installed.
  • 3. Clean the geometry. Merge overlapping shapes where possible, remove hidden or stray points, and delete unused layers. This keeps the SVG small and predictable.
  • 4. Export the SVG favicon. Optimize it to remove editor metadata, and confirm that it contains no embedded image elements. If you want a dark-mode variant, put a prefers-color-scheme media query inside the SVG's style rules.
  • 5. Export the Apple touch icon as a square PNG on a solid background. Transparent areas may not display as intended on iOS, and the system applies its own corner rounding, so do not round the corners yourself.
  • 6. Export the standard manifest icons as PNGs at 192×192 and 512×512.
  • 7. Export a maskable version at 512×512 with a full-bleed background. Keep the mark inside the central safe zone, which the manifest specification defines as a circle whose radius is 40 percent of the icon's width.
  • 8. Export a small ICO or PNG fallback for browsers that do not use the SVG favicon.
  • 9. Declare each file in the page head and in the web app manifest.

Head and manifest entries

<!-- Page head: replace bracketed values with your own file paths and color -->
<link rel="icon" href="[ICO fallback]" sizes="32x32">
<link rel="icon" href="[SVG favicon]" type="image/svg+xml">
<link rel="apple-touch-icon" href="[180x180 PNG]">
<link rel="manifest" href="[manifest file]">
<meta name="theme-color" content="[brand color]">

// Web app manifest: icons list
"icons": [
  { "src": "[192 PNG]", "sizes": "192x192", "type": "image/png" },
  { "src": "[512 PNG]", "sizes": "512x512", "type": "image/png" },
  { "src": "[512 maskable PNG]", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

The bracketed values are placeholders. Replace them with the actual paths and brand color for your site. Keep the maskable icon as a separate entry rather than marking one file as both standard and maskable. A design padded for cropping usually looks undersized when it is shown uncropped.

Final inspection

  • Open the SVG favicon in a text editor and confirm that it contains paths and shapes, not an embedded image.
  • View each PNG at actual size and confirm that the mark is still legible at the smallest size.
  • Preview the maskable icon with a circular crop and confirm that nothing important is cut off.
  • Check that the Apple touch icon has no unintended transparency.
  • Use your browser's developer tools or a manifest validator to confirm that every declared file loads and that its declared size matches its real pixel dimensions.
  • If you can, add the site to the home screen on an iOS device and an Android device to see the result. Cached icons may need clearing before changes appear.

Permission to use the artwork

Being able to download a logo file does not grant permission to change it or use it as a site icon. Simplifying a mark, recoloring it or cropping it for a maskable icon all modify trademarked artwork. That should be approved by the brand owner or covered by their usage guidelines.
Fonts are a separate issue. Converting text to outlines avoids installation problems, but whether that use is allowed still depends on the font's license. For a client project, confirm both the artwork rights and the font terms before you deliver.

Evidence gaps

No source-specific evidence was supplied for this topic. That means no tested results, platform version numbers or measured comparisons. The sizes, safe-zone guidance and file roles described here are general, publicly documented conventions. Browser support for SVG favicons and the details of home-screen rendering change over time, so confirm current behavior for the devices your audience uses.