Have you ever seen some websites display a small icon next to the website address (URL) in the browser window? This little icon is called a favicon and in a few simple steps I will show you how to quickly create a favicon on your own website.
What is a favicon?
A favicon is a small 16px by 16px image that is displayed inside the browsers address bar and bookmarks (or favourites) menu. The word “favicon” is short for “favourites icon” and it is a great way to add some branding to your website. You can see the little bomb image that we use as a favicon here at cre8ive commando below (and also in the address bar above).
How to create a favicon for your website
Creating a favicon is quite simple and can take as little as a few minutes to do. I’ll be showing you how to firstly create your favicon in Photoshop then how to include the favicon in your website. Simply follow the 4 steps below to add your favicon to your website.
- You will need to download and install the .ICO plugin for photoshop. This will allow you to create .ICO files. Simply download it then unzip the “ICOFormat.8bi” file into the photoshop plugins folder: C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats
- Now open up photoshop and create a new document 16px by 16px in size. Resize your logo or part of your logo to fit into this tiny 16px square. Once you are happy with how your favicon looks you need to save it as an .ICO file. To do this go to “File -> Save As” and give it the name “favicon.ico”. Be sure to select the .ICO file format from the drop down list.
- Once you have saved your “favicon.ico” file you need to transfer the file to the root directory of your website server. This can be done using your favourite FTP program. I use Filezilla.
- Now we just need to include the favicon in our website. This is as simple as inserting the following code into the head of your website:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
That’s it, you’re done! Now you have a favicon for your website and it only took a few minutes to set up (You may need to close your web browser and re-open it to see your favicon).
Adham Dannaway
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
um..this is interesting..!! cant wait to try it out
Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?
just made my own.. very easy! thanks 🙂