logoredraws.com

Where to Find Favicon Settings

Where favicon settings live: in your site's HTML head or in your CMS or site builder's site identity settings. Learn what to check and how to prepare vector artwork for it.

Published

Contents
  1. What "favicon settings" actually controls
  2. Where the setting lives in code
  3. Where the setting lives in a CMS or site builder
  4. How vector logo artwork fits in
  5. Permissions before you modify a logo
  6. Gaps in the available evidence

Favicon settings are found in one of two places, depending on how a website is built. On a hand-coded or framework-based site, the favicon is defined in the HTML head of each page with link elements that point to icon files. On a site managed through a content management system or hosted site builder, the favicon is usually uploaded through a site identity, site icon or theme settings panel, and the platform then writes those link elements for you. Either way, the setting does not create the icon. It only tells browsers which image file to use, so the quality of the result depends on the artwork you supply.

What "favicon settings" actually controls

A favicon is the small icon browsers show in tabs, bookmarks, history lists and some search result displays. Related icons serve similar roles elsewhere, such as the icon used when a page is saved to a phone's home screen or installed as a web app. When people look for favicon settings, they are usually looking for the place where these icon files are assigned to a site.

  • The browser tab and bookmark icon, normally declared with a link element whose rel value is icon.
  • A legacy favicon.ico file placed at the root of the site, which many browsers request automatically if no icon is declared.
  • The Apple touch icon, a PNG used when a page is added to an iOS home screen.
  • Icons listed in a web app manifest file, used when a site is installed as a progressive web app.

Where the setting lives in code

If you or a developer control the site's templates, look for the shared head section: a layout file, base template or document component that every page inherits. A typical modern declaration pairs a scalable SVG icon with raster fallbacks. The file names below are placeholders; replace them with the paths your site actually serves.

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

Browsers cache favicons aggressively, so a change in these tags may not appear immediately. Testing in a private window or after clearing the cache is a common way to confirm the new icon is being picked up.

Where the setting lives in a CMS or site builder

Most platforms expose the favicon as an upload field rather than code. In WordPress it is called the Site Icon and has traditionally appeared in the Customizer under Site Identity; depending on the WordPress version and whether a block theme is active, it may also appear in other site-wide settings screens. Other hosted builders and e-commerce platforms generally place it under site settings, branding, or theme settings. Menu names and locations change between platform versions and themes, and no platform-specific documentation was supplied for this article, so check your platform's current help pages for the exact path.

Platforms that accept a single upload typically generate the required sizes from it. That makes the source file important: a large, square, clean image gives the platform more to work with than a small or cropped one. Some platforms accept only raster formats such as PNG, even if browsers themselves support SVG icons.

How vector logo artwork fits in

A vector logo file is the best starting point for favicon work because it can be exported cleanly at any size and, where supported, served directly as an SVG icon. Before relying on it, confirm that the file genuinely contains vector paths. An SVG, EPS or PDF extension does not guarantee editable vector artwork: the file may simply wrap an embedded raster image, or what you are viewing may be a raster preview. Opening the file in a vector editor and inspecting whether shapes are made of selectable paths, rather than a single placed image, is the reliable check.

Full logos rarely work at favicon scale. Wordmarks, taglines, thin strokes and fine detail tend to blur or disappear in a tab-sized square. The usual approach is to select a single symbol from the identity, such as the logo mark, a monogram or a distinctive initial, simplify it if needed, and place it on a square canvas with enough contrast to read on both light and dark browser interfaces. Exporting raster sizes from that simplified vector source, rather than shrinking a full-logo PNG, keeps edges sharp.

Having access to a logo file, or permission to download it, is not the same as permission to alter it. Cropping a logo down to a symbol, redrawing it or changing its colors for a favicon is a modification, and the artwork, any fonts used in it and the trademark itself may each be governed by separate rights or brand guidelines. For your own brand this is rarely an issue; for a client's or third party's logo, confirm that favicon adaptations are allowed before publishing them.

Gaps in the available evidence

No source material specific to a particular platform, version or browser was supplied, so this article describes the general locations and standard HTML mechanisms rather than step-by-step menu paths or confirmed browser support figures. If you are working on a specific platform, its current documentation is the authority on where the favicon field sits and which file formats it accepts.