What Is a Favicon? A Small Website Branding Detail Explained

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the small icon

   0:18

   Browsers can show a website icon in tabs and bookmarks.

   On-screen labels: Browser tab; Bookmark; Website identity.

2. 2

   Step 2: Use a simple brand mark

   0:30

   Tiny text and complicated details can become unreadable.

   On-screen labels: Simple shape; Recognisable mark; Clear silhouette.

3. 3

   Step 3: Prepare a suitable square

   0:42

   The artwork needs enough resolution for its intended uses.

   On-screen labels: Square proportions; Suitable resolution; Clean artwork.

4. 4

   Step 4: Add the correct reference

   0:54

   The page must point browsers to the icon resource.

   On-screen labels: Icon file; Page reference; Working address.

5. 5

   Step 5: Test an actual browser tab

   1:06

   Check the small result against different browser backgrounds.

   On-screen labels: Tiny display; Light background; Dark background.

6. 6

   Step 6: Allow for cached icons

   1:18

   Updates may take time to appear; search display is not guaranteed.

   On-screen labels: Cached browser icon; Recrawl timing; No display promise.

Common questions

Go further