What is a favicon?
A favicon, short for favourite icon, is the small image that appears next to your website’s name in a browser tab. You’ll also see it in browser bookmarks, your phone’s home screen when someone saves a shortcut, and in the address bar of some browsers.
It might be tiny, but it plays an outsized role in how professional and recognisable your website feels. A well-designed favicon reinforces your brand every time someone has your site open.
What file formats do favicons use?
The original and most widely supported format is .ico, which can bundle multiple image sizes into a single file. Modern browsers, however, also support .png, .svg, and even .gif.
Rather than creating just one favicon, best practice today is to provide multiple sizes so your icon looks sharp on every device — from a small desktop tab to a full-size app icon on an Android home screen.
| Size | Used by | Format |
|---|---|---|
| 16 × 16 px | Browser tab (standard) | .ico / .png |
| 32 × 32 px | Browser tab (high-DPI / taskbar) | .ico / .png |
| 180 × 180 px | Apple touch icon (iOS home screen) | .png |
| 192 × 192 px | Android Chrome home screen | .png |
| 512 × 512 px | Progressive Web Apps (PWA) | .png |
The good news: most online favicon generators handle all of this for you and produce a ready-to-use package of files.
How to create a favicon
You have a few options depending on what you’re starting with:
Option A — Use an online generator
The easiest route. Upload your logo or type some text and the tool generates a complete set of favicon files.
- favicon.io – Generate a favicon from an image, text, or an emoji. Produces a full set of correctly sized files including the .ico, .png variants, and a site.webmanifest file for Android support.
- realfavicongenerator.net – More advanced option: lets you preview exactly how your favicon will look on different platforms and fine-tune each version before downloading.
Option B — Design one from scratch
If you want full control, design a 512×512 px image in a tool like Canva, Figma, or Adobe Illustrator, then run it through a generator to produce all the required sizes.
💡 Design tip: Not all logos work well at 16×16 px — complex shapes and thin text become unreadable. A single bold letter, a simple geometric mark, or your logo’s symbol on its own often works far better than trying to squeeze in a full logo.
How to add a favicon to your website
Method 1: Adding the files manually (HTML)
- Upload your favicon files to your root directory – Place all the generated files (favicon.ico, favicon-32×32.png, apple-touch-icon.png, etc.) into the root folder of your website — the same level as your index.html.
- Add the link tags to your HTML <head> – Open your site’s main HTML template and paste the following code inside the <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">
- Save and deploy – Upload your updated HTML template and all favicon files to your server. Clear your browser cache and reload — your favicon should now appear in the tab.
Method 2: WordPress
WordPress makes this straightforward through the Customiser — no code needed:
- Go to Appearance → Customise – In your WordPress dashboard, navigate to Appearance → Customise → Site Identity.
- Upload your Site Icon – Click Select Site Icon, upload your image (at least 512×512 px recommended), and crop if prompted. WordPress handles the resizing automatically.
- Publish – Click Publish in the top left of the Customiser. Your favicon is now live.
Using a page builder or custom theme? Plugins like Favicon by RealFaviconGenerator give you more control and generate the full set of platform-specific icons directly within WordPress.
Frequently asked questions
My favicon isn't showing up — what's wrong?
The most common cause is browser caching. Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or open the site in a private/incognito window. Also double-check that the file paths in your <link> tags match exactly where you uploaded the files.
Do I need an ICO file, or will a PNG work?
A PNG works fine in all modern browsers. The .ico format is still useful because it provides backwards compatibility with very old browsers and can bundle multiple sizes. Most generators produce both, so it’s easiest to include them all.
Can I use an SVG as a favicon?
Yes, modern browsers support SVG favicons and they’re infinitely scalable. Use <link rel="icon" type="image/svg+xml" href="/favicon.svg">. It’s a good idea to still include the PNG and ICO fallbacks for older browsers.
Does having a favicon help with SEO?
Not directly as a ranking factor, but a favicon appears next to your site name in Google’s mobile search results which can improve click-through rates. It also makes your site look more professional and trustworthy.
Need help setting up your favicon?
We set up favicons as part of our website design and optimisation service. Get in touch and we’ll make sure your brand looks great on every device.
Need help setting up your favicon?
We set up favicons as part of our website design and optimisation service. Get in touch and we’ll make sure your brand looks great on every device.
