Free Tool

Get Favicon from Website

Insert link below.

What Is a Favicon?

A favicon (short for β€œfavorite icon”) is the small icon displayed in browser tabs, bookmark lists, history entries, and search results. It is one of the most recognizable visual elements of a website, providing instant brand recognition even at tiny sizes. Favicons are typically square and served in multiple sizes to accommodate different contexts β€” from a 16Γ—16 pixel tab icon to a 512Γ—512 pixel app icon on mobile home screens.

Why Favicons Matter for SEO and Branding

While favicons are not a direct ranking factor, they play an important role in user experience and click-through rates. Google displays favicons in mobile search results next to the page title, making a well-designed favicon essential for standing out in SERPs. Sites without a favicon show a generic globe icon, which can reduce trust and lower click-through rates.

  • Brand recognition β€” Users identify your site faster in crowded tab bars and bookmarks.
  • Trust signals β€” A polished favicon signals a professional, well-maintained website.
  • Mobile search visibility β€” Google shows favicons in mobile results; a missing icon hurts visibility.
  • PWA and app icons β€” Larger favicon sizes (192px, 512px) are reused as Progressive Web App icons.

Standard Favicon Sizes and Formats

Modern browsers support several favicon sizes and formats. Providing multiple sizes ensures your icon looks sharp everywhere β€” from tiny tab icons to high-resolution displays and app launchers.

SizeUsage
16Γ—16Browser tab icon (standard)
32Γ—32Browser tab icon (high-DPI), taskbar shortcut
48Γ—48Windows site icon
64Γ—64Windows site icon (high-DPI)
128Γ—128Chrome Web Store, large bookmarks
180Γ—180Apple Touch Icon (iOS home screen)
192Γ—192Android Chrome icon, PWA manifest
256Γ—256Opera Speed Dial, high-quality previews
512Γ—512PWA splash screen, Google search results

Favicon File Formats Explained

Favicons can be served in several file formats. Each has trade-offs in terms of browser support, quality, and file size:

  • ICO β€” The classic favicon format. Can bundle multiple sizes in a single file. Supported by all browsers, including older versions of IE.
  • PNG β€” Widely supported, sharp at all sizes, and easy to generate. The most common modern choice for favicons.
  • SVG β€” Vector-based, infinitely scalable, and supports dark-mode media queries. Supported by all modern browsers but not IE.
  • WebP β€” Smaller file sizes than PNG with similar quality. Good browser support but less common for favicons.

How to Add a Favicon to Your Website

Adding a favicon requires placing the icon file on your server and referencing it in the <head> section of your HTML. The most common approach is to include multiple link tags for different sizes and formats:

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

For WordPress sites, most themes automatically handle favicon setup through the Customizer under Appearance β†’ Customize β†’ Site Identity. You upload a single high-resolution image (at least 512Γ—512 pixels) and WordPress generates all the required sizes automatically.

Best Practices for Favicon Design

  • Start with a square image of at least 512Γ—512 pixels for the best quality across all sizes.
  • Keep the design simple β€” intricate details get lost at 16px.
  • Use your brand mark or a recognizable letter rather than a full logo with text.
  • Test your favicon at small sizes (16px, 32px) to ensure it remains legible.
  • Use transparent backgrounds for PNG favicons so they blend with any browser theme.
  • Consider providing an SVG favicon for dark-mode support using the prefers-color-scheme media query.

How This Tool Works

This favicon extractor uses three public APIs to fetch favicon URLs for any domain. No server-side processing is required β€” all URLs are constructed client-side and images are loaded directly from the source.

Google Favicon API

Google's S2 Favicons API returns favicons at any size from 16 to 256 pixels. Google caches favicons for most indexed websites, making this one of the most reliable sources. The API automatically upscales small favicons to the requested size.

DuckDuckGo Favicon API

DuckDuckGo provides favicons in ICO format through their icons API. This is useful when you need the original .ico file rather than a PNG conversion. DuckDuckGo respects privacy and does not track requests to this endpoint.

Icon Horse API

Icon Horse is an open-source favicon service that returns high-quality icons in multiple sizes (64px, 192px, and 512px). It attempts to find the best available icon for a domain, including Apple Touch Icons and manifest icons that other services may miss.

Common Favicon Issues and How to Fix Them

Favicon Not Showing in Browser Tab

If your favicon is not appearing, check that the <link> tag in your HTML <head> points to the correct file path. Browsers cache favicons aggressively β€” try clearing your browser cache or loading the site in an incognito window. Also verify the file is accessible by navigating directly to the favicon URL.

Blurry or Pixelated Favicon

This usually happens when serving a low-resolution image (e.g., 16Γ—16) that gets scaled up for high-DPI displays. Provide at least a 32Γ—32 PNG alongside the 16Γ—16 version, and consider adding larger sizes (64px, 128px) for contexts that need them.

Favicon Not Showing in Google Search Results

Google has specific requirements for favicons in search results: the image must be a multiple of 48px (e.g., 48Γ—48, 96Γ—96, 144Γ—144), the file must be crawlable (not blocked by robots.txt), and the image should be a visual representation of your brand. Google may take weeks to pick up a new or changed favicon.