Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 by 16 pixels — a genuine design challenge.All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. Every browser understands the .ico format though, and it supports multiple embedded sizes in a single file, so it’s still the format worth making.
Download The Plugin
You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.
Let’s Begin
Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File>New, and opening a new canvas that is 64 x 64 pixels in size.
The Design
If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn’t look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website’s palette.
When you’re ready to test the design select Image>Image Size menu and enter 16 x 16. Click on Resample Image and choose “Bicubic Sharper” from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn’t blur as it’s being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.
If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.
Saving The Custom Icon
Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you’ll need to upload the file to the root folder of your website, so it’s a good idea to navigate and save it to that location on your hard drive now.
Uploading The Favicon.ico File
Connect to your server and upload your Favicon.ico file to your website. Place it in the root folder of your site — the same directory as your home (index) page, not an images subfolder. If you put it there (and name it favicon.ico), most browsers will find it automatically.
Some browsers won’t find the file automatically and need an explicit <link> in the head section of each page:
<link rel="Shortcut Icon" href="/favicon.ico">Once you’ve added this code, upload all of your modified pages.
(Some people suggest that the following is actually more correct: <link rel="icon" href="/favicon.ico" type="image/x-icon"> — you can use both if you want.)
A PNG works too and is the usual choice alongside an ICO fallback:
<link rel="icon" href="/favicon.png" type="image/png">Testing
If your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put ?v=2 at the end of the icon URL, which forces the browser to treat it as a new resource.
The 2026 Way
The Photoshop-and-plugin workflow above is period piece now — you rarely need to hand-paint an .ico at all. The current minimum is three files:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">An SVG favicon scales to any size and can even adapt to dark mode with a prefers-color-scheme media query inside the file; all modern browsers support it. The .ico remains as the legacy fallback (build it from a PNG with ImageMagick: magick favicon-32x32.png favicon.ico), and the 180×180 PNG covers iOS home-screen bookmarks. Free generators like favicon.io or realfavicongenerator.net handle the multi-size export for you — design once at a comfortable canvas size, export, done.
The underlying rule hasn’t changed since 2008 though: name it favicon.ico, put it in the site root, and test with a cache-busting query string. Some things never get old.
Brilliant!