To sustain this free service, we receive affiliate commissions via some of our links. This doesn’t affect rankings. Our review process.
What Is A Favicon?
A favicon (also referred to as a website, url, shortcut, or bookmark icon) is the little icon that shows up to the left of the page URL you are viewing in your browser’s address bar, as well as in the corner of the current browser tab, or browser window, of the web page you are viewing. If you have multiple tabs open, it serves as a handy visual queue to help you quickly recognize the identity of a web page.
What Should A Favicon Look Like?
As a general guideline, you’ll want to create a favicon that reflects the identity of your website. This can be done by creating a small icon of your logo, or part of your website or company name, and by using your website’s color scheme. You’ll want the favicon to stick in people’s heads as a little reminder of who you are.
Specifications Of The Favicon Icon (.ICO File)
A favicon is:
- A square graphic
- 16 x 16 pixels (although you may want to start with 64 x 64 to give your design more freedom)
- Ends in the .ico extension.
The favicon was initially introduced in an earlier version of Internet Explorer, and only supported the .ico format. Today, most modern browsers support other graphical formats for the favicon, in addition to .ico (PNG, GIF (including animated GIF’s)), but .ico is the most used across all browsers and thus is the standard that you should use for your website.
Create Your Favicon (.ICO) File in Photoshop
Create a new file in Photoshop. While you’ll want to end up with a 16×16 pixel square, you might want to start with 32×32 or 64×64 so you have more room to work with. Import a square version of your logo or an icon to represent your brand into Photoshop. Then copy and paste it into the new file. Use the transform tool (hold down shift to keep proportions) to resize and make sure your resized 16×16 still looks good. When you’re done, go to “Save for web” and save as a .png format at 72 DPI (dots per inch).
Covert File To .ICO via Converter Tool
Head on over to ICO converter which is a free website that converts your .png file to .ico. Click on “browse” and import the .png file you created. Select the size and bit depth and save to your computer.
Add The Favicon Icon To Your Web Page
Once you’ve got your favicon.ico saved and ready to go, you can add it to your website as follows. In the header of each web page, you’ll want to add the following code (substitute example.com/favicon.ico with the directory where you uploaded your favicon):
<link rel=”shortcut icon” type=”image/jpg” href=”https://www.example.com/favicon.ico”/>
We discourage you from using a relative path (href=”favicon.ico”) because it can result in lost paths when you move your website, and is also more susceptible to link theft. Instead use an absolute path (includes domain name) as in the example above. You should be able to copy and paste this URL into your web browser and see the favicon.
Upload the Favicon To Your Web Server
Once you’ve added the URL to your favicon file to your web page, you’ll want to make sure the favicon.ico actually resides where you specified it (in the example above, in your document root (the root folder of your website – ie. /public_html or /www on Linux servers)).
See The Favicon In Action!
Once you’ve done that, restart your web browser, and you should see your favicon – both to the left of the URL address bar, and in the top left corner of the web page tab you’re visiting. You can see our shiny new favicon in the screenshot next to the favicon for Google Analytics.
Is Photoshop Still The Best?
Adobe’s Photoshop may still be the industry standard photo editing software, but is it still the best? Our experts dive in and find out in our Photoshop review. Find out what the latest version of Photoshop can do as well as how it stacks up to the competition!
Were you able to create and display your new favicon?
Disclaimer: This website contains reviews, opinions and information regarding products and services manufactured or provided by third parties. We are not responsible in any way for such products and services, and nothing contained here should be construed as a guarantee of the functionality, utility, safety or reliability of any product or services reviewed or discussed. Please follow the directions provided by the manufacturer or service provider when using any product or service reviewed or discussed on this website.
Authors timestamped the article as 2020 but it seems it’s a decade-old. Judging by left-side slashes, it’s aimed at Windows, and written circa 2010, mentioning “Internet Explorer… which continues to dominate”. The plugin will work as high as PS CS6, so don’t waste time if you’ve got PS 2021. I just tried.
Thanks for pointing this out Roy, we had updated the article but looks like some old content was left in. Should be good to go now, let us know if you still see anything outdated.
Cheers and thanks for taking the time,
Alex
This does not work for photoshop 2021 as Roy mentioned above. I also just tried
This plug-in no longer works with Adobe PhotoShop CC (2015)
That was great idea. Easy to create in Photoshop, and adds a lot to my website. It’s now easy to tell apart from all the other tabs I have open, and I imagine the same applies to other users. Thanks for the tutorial web rockers!
Is there any chance one day browsers will support larger, higher resolution favicons? The small favicon is fine, but it would be cool to be able to sport a better looking (maybe even an animated) favicon.