A favicon is a small icon associated with a website. Browsers can display it in tabs, bookmarks and other interface areas. Because the icon is often shown at a small size, the design matters as much as the file format: a simple mark with strong contrast usually survives reduction better than detailed artwork or tiny text.
Start with a simple source
Use a square image with a recognizable shape. Logos, initials, symbols and simple illustrations tend to work better than photographs. Remove unnecessary detail because a favicon has very little display space.
Create a favicon with Tervilo
- Prepare a square JPG, PNG or WebP source image.
- Open the Tervilo Favicon Generator.
- Select the source image.
- Generate the favicon.
- Download the generated PNG asset and HTML snippet.
- Add the link markup inside your page's
<head>. - Load the website in a browser and confirm that the icon appears.
What the HTML link does
The page needs a link element that tells the browser where the icon file is located. Tervilo's generator supplies the markup for its PNG output. Keep the path correct when you upload the favicon to your production site; a filename that works locally can fail after deployment if the directory changes.
Example HTML
<link rel="icon" type="image/png" href="/favicon.png">The exact path should match where your generated file is stored. The important part is that the browser can request that URL successfully.
Choose an icon that survives small sizes
Test the favicon at the size it will actually be displayed. Thin outlines, long words and subtle color differences can disappear. A simplified version of a logo is often more effective than forcing the entire logo into a tiny square.
What about ICO files?
Modern browsers can use PNG favicons, but some legacy systems specifically expect an ICO container or a multi-resolution ICO file. Tervilo's current favicon workflow produces a PNG asset and HTML markup; it does not turn the PNG into an ICO container. If your target explicitly requires ICO, use a dedicated ICO workflow instead of renaming the extension.
Transparent vs solid background
Transparency can make a favicon adapt to different browser themes and backgrounds, but the mark must still have enough contrast to remain visible. Check both light and dark contexts when the target browser or operating system can change the surrounding interface.
Test after deployment
Open the live URL, not just the local development copy. Confirm that the icon path resolves, that the file is served with the expected content type, and that the browser can fetch it without a broken URL. Favicon updates can also appear delayed by browser caching, so compare in a fresh/private browser context when necessary.
Common mistakes
- Using a detailed image that becomes unreadable when reduced.
- Writing the wrong file path in the HTML.
- Renaming PNG to .ico and assuming it becomes an ICO file.
- Testing only on the development machine.
- Replacing the production favicon without keeping the original source.
Quick checklist
- □ The source image is square and simple.
- □ The generated PNG opens correctly.
- □ The HTML path matches the deployed file location.
- □ The icon is readable at small size.
- □ I tested the live website in a browser.
Quick answer
Create a favicon from a simple square source, generate the PNG with Tervilo's Favicon Generator, add the supplied link inside the page <head>, and test the live URL. Use a dedicated ICO workflow only when the destination specifically requires an ICO file.