Favicon is like the identity of a website. Also known as website icon, url icon, or page icon.
Using a favicon gets you quite a few advantages:
- Makes an symbolic identity for your website. Having a Favicon for your site will help your visitors identify your website.
- Makes the website visually pleasing.
- Creates branding of your website.
There are many websites online you can use to generate a Favicon.ico file from an image. But I will show you here how you can do it yourself. You can even make it transparent so there is no white background behind.
So here are the steps to make a transparent Favicon.ico file using Photoshop:
- Create a graphics file in Photoshop. Preferably 32px x 32px or 16px x 16px.
- Put the icon graphics on the file.
- Uncheck the background layer so its not visible.
- Change the color mode to Indexed. It will ask you if you wanna flatten the visible layers; click yes. This will merge all your layers to one.
- Export it using the Gif89a plug-in or photoshop's built in "save for web". Save it as .gif or Png.
- Now open the saved file.
- Perform the "Save As" command from "File" menu. Choose the "Windows Icon, ICO" format.
Thats it.
Now you can get the Favicon file show on your website in several ways:
- You can upload the Favicon.ico file to the root of your website. Browsers will do the rest of the work for you
- Or you can mention the Favicon location in the head section of each file. You can use css code like this <link rel="Shortcut Icon" href="/favicon.ico">
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5