How to Turn a JPG Logo Into a Favicon That Displays Across Browsers

Your logo looks sharp across your website header. Shrink it into a browser tab, though, and the lettering disappears. A white rectangle might surround it. Sometimes the browser shows an older icon instead. Creating a favicon from a JPG takes more than changing the file extension. You need artwork that survives small sizes, suitable image formats, and declarations that tell browsers where to find each asset.

Your Favicon Starting Point

Crop your JPG into a square, simplify the mark, and check it at actual tab sizes before converting it. Keep its background intentional because JPG cannot store transparency. Create an ICO fallback and a PNG version, then add SVG only if you have suitable vector artwork. Declare browser icons in your document head. Prepare separate touch and manifest icons for mobile use. Finish by testing deployed files, browser tabs, and home screen shortcuts.

Choose the Part of Your Logo That Survives a Small Tab

A favicon usually has very little room to communicate. Start by previewing your logo at 16 by 16 pixels and 32 by 32 pixels. View those previews at their actual size. A large zoomed preview helps you inspect pixels, but it cannot tell you whether someone will recognize the mark in a crowded tab bar.

Long business names rarely work at 16 pixels. Taglines disappear even sooner. If your JPG contains a symbol beside a wordmark, use the symbol. If the lettering carries the identity, try one strong initial or a compact monogram. You are choosing a version of the logo for a different job.

Watch for thin strokes, tiny gaps, and fine borders. Downscaling can make separate shapes merge. A narrow line may fade into the background. Slightly thicker strokes and fewer internal details can make a favicon much easier to read.

Choose the largest clean source image available. A square master around 512 by 512 pixels gives you room to create several exports. Enlarging a tiny JPG will not restore missing detail. If a better original exists, use it before spending time repairing compression artifacts.

Crop to a Square Without Stretching the Artwork

Open the JPG in an image editor and set the crop ratio to 1:1. Position the mark inside that square. Keep its original proportions. Forcing a wide logo into a square by changing its width and height independently will distort letters and curves.

If cropping would cut away part of the mark, expand the canvas instead. Add background around the existing artwork until the canvas becomes square. This keeps the full symbol intact while giving you control over its position.

Leave enough space around the mark to prevent it from touching the edges. There is no single padding value that suits every logo. A thick circular symbol may need less breathing room than a pointed shape. Judge the result at 16 and 32 pixels, where excessive padding can make the artwork disappear.

Optical centering also helps. A mathematically centered symbol may look off balance if one side carries more visual weight. Move it a little if needed. Your aim is a mark that looks settled inside its square.

Make the JPG Background an Intentional Choice

JPG does not support transparency. Any white, black, or colored background in your source remains part of the image after a straightforward conversion. Saving that JPG as PNG or ICO does not automatically remove the background.

A solid background can work beautifully. It creates a clear tile and gives the logo reliable contrast. Choose a color that belongs with the artwork, then inspect the tile against both light and dark browser interfaces.

If you want a transparent favicon, remove the background in an editor and save a transparent PNG master. Check the edges carefully. JPG compression can leave pale pixels around the logo, which become visible against dark tabs. A clean original with transparency is usually easier to use than a background removed from a compressed JPG.

Keep mobile artwork in mind here too. A transparent tab icon and a full background home screen icon can use different treatments. Prepare each for the surface where it will appear.

Convert the Prepared JPG Into a Real ICO File

Once your crop and background are ready, use JPG to ICO to convert the prepared image. Download the result, then inspect its dimensions and appearance. Renaming logo.jpg to favicon.ico changes the filename but leaves the image data in the original format.

An ICO file can contain multiple image sizes. A useful browser fallback includes 16 by 16, 32 by 32, and 48 by 48 pixel images. Check which sizes your downloaded file actually contains. If the converter produces one size, use an icon editor or another export workflow to assemble the versions you need.

Export a PNG from the same prepared master. A 32 by 32 pixel PNG is a useful tab asset. Keep larger exports for mobile and installation surfaces. Create each size from the master instead of repeatedly resizing already reduced images.

SVG is optional. Use it if you have clean vector artwork that remains readable when small. Placing a JPG inside an SVG wrapper does not turn its pixels into scalable vector shapes. Keep a raster fallback when you add SVG.

Which Icon Format Fits Each Use

Add Icon Declarations to Your Document Head

Upload your icon files to publicly accessible paths. Keeping favicon.ico at the site root also helps clients that request that conventional location. Add explicit declarations inside the <head> of your page so browsers can find your chosen assets.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Use the ICO size declaration only if those sizes exist inside your file. Remove the SVG declaration if you have no SVG asset. Every declaration should describe a real file with matching dimensions and format.

Browsers choose among icon candidates using attributes including type, sizes, and media, as explained in icon selection. Do not assume the final declaration always wins. Supply useful candidates and test the result.

Paths beginning with / point to the domain root. If your site lives under a project directory, adjust the paths to match its deployment location. A missing asset may return your site's HTML error page, even with a successful HTTP status. Open each icon URL directly to check that it returns an image.

Prepare Mobile Icons Separately From Browser Tab Icons

A working tab favicon does not mean your home screen icon is ready. Apple touch icons use a separate declaration. A 180 by 180 pixel PNG is a common starting asset for that purpose. Use a square image with an intentional background, and avoid drawing rounded corners into it. The platform controls its presentation.

Web app manifest icons serve installation and other app surfaces. Provide 192 by 192 and 512 by 512 pixel PNGs as a practical starting pair for Chromium-based installation workflows. Those sizes are not a universal guarantee of installation. Other browser requirements and your site's configuration still apply.

The manifest specification defines icon metadata and purposes, including any and maskable. Maskable artwork must tolerate cropping into platform-selected shapes. Keep essential artwork inside the central safe circle, whose radius is 40 percent of the image width for a square icon.

A manifest icon section might look like this. These entries form part of your full manifest, which also needs the metadata appropriate to your application.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Create the maskable file with a full background and extra space around the central mark. Declaring an ordinary edge-to-edge logo as maskable can cause meaningful parts to be cropped. Manifest icon paths resolve relative to the manifest URL unless you use root-relative or absolute paths.

Test the Published Files Across Browsers and Devices

Test after deployment. Your local preview cannot reveal every production path issue, caching problem, or server response error. Use this sequence to cover both file delivery and visible results.

1. Open every deployed icon URL directly. Confirm the expected image loads, its dimensions match its declaration, and the server sends an appropriate content type.

2. Visit the site in current Chrome, Firefox, Edge, and Safari where available. Check the tab icon at normal display size. Inspect it in light and dark browser themes.

3. Inspect the rendered document head and network requests. Check for duplicate declarations from themes or plugins, missing files, redirects, and security policies that block images.

4. Add the site to an iPhone or iPad home screen. Test an Android shortcut or installation separately. Inspect the resulting icon for unwanted backgrounds, tiny artwork, and cropped edges.

5. If your site uses a manifest, inspect it in browser developer tools. Review icon previews and reported errors, then test installation when the browser offers it.

6. Repeat checks after replacing old artwork. Use a fresh browser profile when possible, and remove then recreate existing shortcuts to check the latest mobile assets.

Favicons can remain cached after a normal reload. A new filename for an explicitly declared asset can help during updates. Root-level fallback icons and installed shortcuts may need separate refresh steps. Check CDN caches and service worker responses if old files continue to appear.

If the icon looks blurry everywhere, revisit the artwork and export sizes. If it fails in one browser, inspect the chosen format and request. If tabs look right but a phone shortcut looks wrong, check the touch icon or manifest asset used by that surface.

Give Your Logo a Clear Place in Every Tab

A dependable favicon begins with a readable mark. Crop it carefully, choose its background, and inspect it at the sizes people actually see. Package that artwork into useful ICO and PNG assets, with SVG where suitable. Add accurate declarations and separate mobile files, then verify the deployed result.

Once those pieces work, your JPG logo has become a complete set of web icons. Keep the prepared master and export settings so your next logo update follows the same tested process.