Favicons are the tiny icons that you see on browser tabs. They’re usually just simple ICO files, but in recent years they’ve become like an icon for your website, with numerous competing sizes and types.
How Do You Use a Favicon?
Most browsers will support multiple different types of favicons. Most of the time, your browser will automatically fetch favicons in the likely locations without you even telling it to, but you can manually add them to your website as well.
If you don’t have the exact size or format, most browsers will use the highest resolution image they can support, and scale favicons up or down. You don’t really need to include 20 different favicon files for each “official” icon resolution, only a couple high-res ones in addition to the default. But, if you must include every single one, you can reference this cheat sheet for more information.
Once you have a picture you’d like to use as the icon, you can create favicons manually in any photo editor. For the sake of sanity though, you’ll probably want to use a favicon generator to do it automatically. This will generate a bunch of files that you’ll want to link in and tags in the
section of your website’s HTML.If you’re not managing your own web server (i.e., if you have managed hosting with a service like SquareSpace), you’ll have to check with your provider for the settings regarding the favicon files. Usually they’ll handle it for you, and you’ll just have to provide the files.
Regular Favicon Tags
The original favicons are favicon.ico files. The minimum size is 16×16, but ICO files can contain multiple different resolutions. Usually favicon.ico will be a set of 16×16, 32×32, and 48×48 icons, all bundled together. You can create this icon from any PNG using online favicon generators.
You can add your favicon by adding a link to the favicon.ico file, usually placed at the root (top directory) of your web server, alongside your index.html and other files.
You actually don’t always need the tag, as most browsers will automatically check for the file, but it’s good to include. This is by far the most common type of favicon, and will be supported nearly everywhere that supports favicons at all.
If your favicon is not working, it’s most likely because the file isn’t in the right spot. Check if http://www.yourwebsite.com/favicon.ico is accessible, and if it renders correctly in your browser. If you uploaded the file manually, it might not have proper permissions, which you can correct from a command line with:
Which will allow it to be read by your web server.
PNG Favicons
Most newer browsers support higher resolution PNG favicons, for use in areas other than the tab bar, like the Chrome new tab page, or the Android desktop. You’ll probably want these so your icon doesn’t look pixelated when blown up.
You can use these in addition to the favicon.ico file, as the browser will pick the higher resolution one.
The favicon generator also generates an android-chrome-512x512.png file, but this will be checked for automatically, and doesn’t need a tag. Chrome on Android will use the Apple Touch Icon to fall back on if it’s missing. If you’d like to include it, you can include any size PNG icon by changing the dimensions and pointing to a different file:
It’s not much of a problem to add more links, as most browsers will only request the favicon they need.
Apple Touch Icon
This is the icon used when your webpage is added to an iOS users Home Screen from Safari, and for various other places in the iOS UI. With Retina screens, having a high-res icon makes a big difference.
The exact size of it has changed a lot with different versions of iOS, but it will always be a square, with the current width being 180px for Retina iPhones. You can add an iOS icon with a apple-touch-icon link, like so:
iOS will automatically scale down higher resolution icons, but you can add multiple icons in different sizes to save a little on bandwidth in the same way as PNG icons.
Most browsers will check automatically for /apple-touch-icon.png, so you may not even need the tag. Because this icon is fairly commonplace, it’s also used as the fallback for a lot of browsers if you don’t specify a high-res PNG icon.
Safari and Touch Bar Icon
Safari has the option of using monochrome icons for the macOS Touch Bar. This isn’t entirely necessary, and Safari will still use regular favicons if this isn’t there, but it looks a little better if your icon has a colored background.
You can make these automatically with the favicon generator, and you’ll have to add:
To your growing list of links. Safari won’t check for this one automatically.
Windows 10 Metro Tiles
If someone pins your site to their Start menu or desktop, it will display your site’s icon.
This should fall back on other favicons if you don’t have it, so much like Safari it isn’t entirely necessary. But to look better when pinned in the Start menu, you’ll need a few meta tags for configuration:
Really just defining the color of the background tile, and the color of the theme. The rest of the configuration is placed in an XML file:
Which does seem a little redundant just for one file link. You’ll still need to place the mstile-150x150.png file at the root of your web server for it to work properly.
Getting Around Hosting Files at Your Web Server’s Root
If you really don’t want to expose any files hosted at your server’s root, you can always redirect /favicon.ico to a different location. For example, in nginx, you could do:
Which would make nginx look in /new/images/path for your favicons. This will have no effect client side, so you’ll still want to link to /favicon.ico as if everything was the same.
