Skip to content
AdawatAdawat
العربية
Adawat

How to Make a Favicon for Your Website

4 min read

To make a favicon, open the favicon generator, choose an image, a few letters or an emoji, adjust the shape and colors, and download the zip. Upload the files to your site’s root folder, paste the ready-made snippet into your pages’ head, and the icon appears in browser tabs, bookmarks and on phone home screens.

The whole job takes a few minutes and needs no design software. This guide explains each file in the pack, so you know what you are putting on your site.

Steps

You need access to your website’s files or its settings: a hosting panel, a website builder’s “favicon” field, or the root folder of your project.

  1. 1

    Pick the idea

    A favicon is tiny, so keep it simple: one or two letters, a simple symbol, or your logo’s most recognisable shape. Fine detail disappears at 16 pixels.

  2. 2

    Open the favicon generator

    Go to the favicon generator. Choose Text for letters (an Arabic letter works well), Image for a logo or picture, or Emoji for a quick placeholder.

  3. 3

    Set the shape and colors

    Choose square, rounded or circle, a background color and, for text, a text color and a font. Raise the padding if the artwork touches the edges.

  4. 4

    Check the previews

    Look at the browser tab in light and dark, the phone home screen and the actual 16, 32 and 48 pixel sizes. If it is hard to recognise at 16 pixels, simplify it.

  5. 5

    Download the zip

    Press Download. The pack contains favicon.ico, favicon-32.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png and site.webmanifest, plus favicon.svg when the source is text or an SVG image.

  6. 6

    Upload the files and add the snippet

    Put all files in the root folder of your site, so that /favicon.ico opens in the browser. Paste the snippet shown under the preview into the head of every page, or into your template.

What each file is for

favicon.ico contains 16, 32 and 48 pixel versions and is the classic format every browser understands. favicon.svg is a vector version that stays sharp at any size, so modern browsers use it when it is present. favicon-32.png is a plain PNG alternative.

apple-touch-icon.png is 180 × 180 pixels with a solid background, because iPhones do not handle transparency there and round the corners themselves. icon-192.png and icon-512.png are used by Android and installable web apps, and icon-maskable-512.png has extra padding so the system can crop it into a circle or a squircle without cutting off the artwork. site.webmanifest lists these icons and your site’s name.

Design tips that matter at 16 pixels

Use strong contrast between the symbol and the background, one or two colors, and thick strokes. A rounded or circular background often reads better in a crowded tab bar than a bare letter. Emoji are quick, but they are drawn by each device’s emoji font, so they look different elsewhere; use them for a placeholder rather than a brand mark.

If you already have a logo, crop it to a square around its simplest part before you use it. A wide wordmark will not be readable in a 16 pixel square.

Common problems

  • The old icon still shows after I changed it

    Browsers cache favicons aggressively. Do a hard refresh, open the site in a private window, or visit /favicon.ico directly and reload it. It can take longer to change in bookmarks and in search results.

  • The icon looks blurry

    Use a larger or vector source, and a simpler design. Heavy detail and thin lines turn to mush at 16 pixels.

  • It is invisible on a dark browser theme

    A dark symbol on a transparent background disappears on a dark tab bar. Give the icon its own background color, or pick colors with strong contrast in both themes.

  • Search results still show a default icon

    Search engines update icons slowly, often over days or weeks. Make sure the icon files are reachable and not blocked by robots.txt, then wait.

Crop Image

Frequently asked questions

What size should a favicon be?

Provide 16, 32 and 48 pixel versions inside favicon.ico, plus 180 pixels for iPhone and 192 and 512 pixels for Android. The generator creates all of them from one source.

Do I still need favicon.ico?

It is still worth including: every browser and many tools understand it, while SVG and PNG icons are extras that modern browsers prefer.

Where do I put the favicon files?

In the root folder of your website, so that /favicon.ico works. Then add the link tags from the snippet to your pages’ head.

Related guides