Image

How to Create a Favicon for Your Website

Dev Nexus4 min read

A step-by-step guide to turning an image into a favicon and wiring it into your website, right in your browser.

Every polished website has one: the little icon in the browser tab, the bookmark bar, and the phone home screen. It is called a favicon, and a site without one looks unfinished - a blank page symbol where a brand mark should be.

This guide walks you through creating a favicon from an image and adding it to your site, step by step. It runs entirely in your browser, so even an unreleased logo never leaves your device.

The Problem

Making a favicon by hand is more fiddly than it sounds. A favicon is not a single file - browsers want a small undefinedxundefined or undefinedxundefined icon for the tab, phones want a larger undefinedxundefined icon for the home screen, and a classic favicon.ico bundles a couple of small sizes for old software. Producing each of those from one logo means resizing to exact dimensions and exporting several files.

On top of that, most online favicon makers upload your image to a server to do the work. For an unreleased brand or a client's logo, that is exactly the kind of file you would rather not hand to a stranger. And once the icons exist, you still have to know which link tags to put in your HTML so browsers actually use them.

The Solution

The clean fix is a generator that resizes and encodes every favicon size for you, locally, then a short block of HTML to wire it up. The Favicon Generator reads your image in the browser, re-draws it at each favicon size, and hands back the files ready to drop into your site.

Because it all happens on your device, nothing is uploaded - safe for logos you have not launched yet. Start with a square, high-resolution source so every size stays sharp; if yours is not square, crop it or convert an odd format with Image Converter first. Then add a couple of <link> tags to your <head> and your icon shows up everywhere a browser looks for one.

Step-by-Step Guide

1
Prepare a square source image
Start with a square image that is at least undefinedxundefined pixels so every generated size stays crisp, including the large phone icon. A bold, simple mark works far better than a detailed full logo, because a favicon can shrink to just undefined pixels wide.
2
Open the generator and add your image
Go to Favicon Generator and drop your file onto the tool, or click to browse for it. The image loads instantly and stays on your device - nothing is sent to a server.
3
Preview and generate the icons
Check how the artwork holds up at small sizes like undefinedxundefined and undefinedxundefined, then generate the set. The tool re-draws your image at each favicon size and encodes the files entirely in your browser.
4
Add the files to your site root
Download the icons and place them in your website's root directory - for example alongside your index.html. Keeping favicon.ico at the root gives browsers a fallback even without a link tag.
5
Reference the favicon in your HTML
Add link tags inside your <head>, such as <link rel="icon" href="/favicon.ico"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Reload the page to see the icon appear in the tab.

Common Mistakes

Starting from a tiny or non-square image
Scaling a small or rectangular source up leaves a blurry, stretched icon. Begin with a square image of undefinedxundefined or more so every generated size looks sharp.
Cramming a full logo into 16 pixels
Fine lines and small text vanish at favicon size. Simplify to a single symbol, initial, or bold shape so the icon is still recognisable in a crowded tab bar.
Forgetting the apple touch icon
Without a undefinedxundefined apple touch icon, iPhones and iPads show a blurry screenshot when someone saves your site to the home screen. Include it and link it explicitly.
Expecting the change to show instantly
Browsers cache favicons aggressively, so a new icon may not appear right away. Hard-refresh, clear the cache, or rename the file to force the browser to fetch the new version.

Frequently Asked Questions

How do I create a favicon for free?

Open the Favicon Generator, add a square image, generate the icons, and download them. It is free and runs in your browser, with nothing uploaded to a server.

What size image do I need for a favicon?

Start with a square image of at least 512x512 pixels. A large square source keeps every generated size sharp, including the 180x180 apple touch icon used on phone home screens.

Where do I put the favicon files?

Place them in your website's root directory and add link tags in the HTML head. Keeping favicon.ico at the root also gives browsers a fallback even without a link tag.

Is it safe to make a favicon from an unreleased logo?

With Dev Nexus, yes. The whole process runs in your browser and the image is never uploaded, so private and unreleased logos stay on your device - it even works offline.

Why is my new favicon not showing up?

Browsers cache favicons hard. Hard-refresh the page, clear the site cache, or rename the icon file so the browser fetches the updated version instead of the old one.