Finish the Stuff
English
Start a project

Finish the Stuff Campus · Tutorial

Make a favicon, download the right files, and put it on your site

Create a readable small icon, choose the right files, install one route, and verify the real result.

About 5 minutesStep-by-step tutorial
Favicon workbench showing a browser tab, a large editable F icon, three exported icon sizes, and a final checkmark.
The finished work, before you begin
Read time
About 5 minutes
Format
Step-by-step tutorial
Research
Sources reviewed 22 Oct 2026
Verification
Reproduce in your current tools

A favicon is the small image beside a page title in a browser tab. A full wordmark often becomes an unreadable smudge at that size. In this tutorial, you will make a simple letter icon, download usable files, install it through one of two routes, and check the result.

You will finish with: an extracted icon folder and an icon showing on your own site. If someone else maintains your site, you will instead finish with the right file and an exact installation request.

You need: a browser; permission to update the site; and either WordPress administrator access or a maintainer who can update its HTML and assets. Making the files with Favicon.io is free. This does not include website hosting.

Research status: official documentation checked 22 October 2026. The generator, WordPress controls and final browser result have not been exercised for this draft. Steps are researched, not a claim of an end-to-end tested installation.

1. Make an icon that survives being tiny

Open the Favicon.io text generator. Try this practice design:

  • Text: F
  • Background: rounded
  • Font color: #FFFFFF
  • Background color: #153E4E
  • Font: keep a simple, bold option you can read clearly

Use your own business initial instead if you prefer. Adjust font size until the letter has space around it. A single clear letter is a better first attempt than squeezing your entire business name into the square. These are example design choices, not required brand colors.

Look at the smallest preview, not only the large one. Can you still distinguish the letter? Does it touch the edge? If it is unclear, simplify it before downloading. The generator supports text, background shapes, font settings and HEX color values. Generator instructions

Already have a logo? Use the image converter with a simple square version. Avoid uploading an uncropped photograph of a logo or a long horizontal wordmark. Check that you have permission to use the artwork.

2. Download and unpack it

Choose Download in the generator. Find the downloaded ZIP in your browser’s downloads, then open or extract it using your computer’s normal ZIP handling. Keep the extracted folder, not just the ZIP.

The current Favicon.io package is documented to contain:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest

These files serve different sizes and contexts. For example, the Apple touch icon is 180 × 180 pixels; the last PNG is 512 × 512. You do not need to install every file to complete the basic browser-tab task. Package contents

Open android-chrome-512x512.png in an image viewer. Check that it contains the icon you intended, not an older download. If a second download has a numbered ZIP filename, inspect its contents rather than assuming it is the right version.

3. Choose one installation route

Route A: WordPress with a built-in Site Icon setting

Use this route instead of editing theme files.

  1. In WordPress, upload the extracted android-chrome-512x512.png to the Media Library. Favicon.io specifically recommends this file as a WordPress source image. Do not upload the ZIP as the icon.
  2. In WordPress 6.5 or later, open Settings → General and find Site Icon.
  3. Choose the image you uploaded. Complete any selection or crop prompt, then click Save Changes on the General Settings page. Saving General Settings
  4. Open the public site in a new tab.

WordPress calls for a square image at least 512 × 512 pixels. On versions 4.3 through 6.4, its documented route is Appearance → Customize → Site Identity instead. If your account cannot see these controls, send the file to the site administrator. Do not install a plugin or replace a theme just to work around missing access. WordPress Site Icon instructions

If a different website builder provides a favicon or site-icon upload control, use its own current documentation. The WordPress menu path is not universal.

Route B: A site whose HTML and public files you maintain

Make this change in your normal preview and review workflow. Keep the previous icon and markup so you can restore them.

  1. Put favicon.ico in the site’s public root, so its final address is https://YOUR-DOMAIN/favicon.ico.
  2. Add this line inside the shared HTML <head> used by the pages:
<link rel="icon" href="/favicon.ico">
  1. If an existing icon line points somewhere else, update the intended line rather than accumulating conflicting versions.
  2. Publish the approved change through your site’s existing process.

The leading slash means the domain’s root. A framework may use a source folder named public or something else; a source folder path is not automatically the public URL. If the site lives under a subdirectory, confirm the deployed path with its maintainer. MDN page metadata

For explicit PNG and Apple touch icons, you can also upload the corresponding files and use:

<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">

Only include links to files you actually installed. A browser-tab icon does not require you to overwrite an existing site.webmanifest. That file may already contain your web app’s name, icons or launch settings. Leave it alone unless you also maintain that configuration. Favicon implementation reference

4. Prove that it worked

Run these checks in order:

  1. File check, for Route B: open your actual /favicon.ico address. You should see or download the icon, not a 404, sign-in screen or normal web page.
  2. Page check: open the site in a fresh private or incognito window and look at the tab. A private window is a useful cache check, not a guarantee that every cache is bypassed.
  3. Small-size check: make a new bookmark and inspect its icon where your browser displays one. Confirm the design is recognizable at that size.
  4. Second-page check: visit another page. The icon should not depend on being on the homepage.

If the icon URL fails, fix the file location or link before changing the design. If the file is correct but an old tab icon remains, close the old tab and retry in a fresh session; favicon caching can outlast a normal refresh. ICO installation and troubleshooting

This does not guarantee when a search engine will show the icon, or how every device will present it.

Done: the correct image file opens, the intended icon appears on a fresh visit, and you have kept the source files. If a maintainer must install it, send: “Please use this 512 × 512 PNG as our site icon through the site’s built-in setting, or install the supplied ICO and verify it in a fresh browser session.”