Favicons are small images shown next to your website’s URL in the address bar of your browser. They not only make URLs look nice but also increase brand awareness for users. When a user add a website to his favorites, websites with favicons will stand out amongst others which would improve your number of visitors.
How can you make a favicon in Photoshop?
You will make an .ico image with 16 pixels by 16 pixels. First of all, you need to download the ICO plugin for Adobe Photoshop. You can download it from Telegraphics website. When the installation finishes, execute the zip file in to the photoshop/plugins.fileformat folder in your computer.
Open photoshop and select File>New and make a new file with 64 x 64 dimentions. Remember it is best to work with multiples of 16. We will resize our image once it is finished. Create your favicon image as you like. Go to Image>Image Size and change image dimentions to 16 x 16. After resizing the image, go to File> Save As and save the file as favicon.ico
Upload your favicon.ico file in to main directory in your server. I put it in to the images sub-folder under my theme folder. Then, add the following code in to the head section of your template:
<link rel=”Shortcut Icon” href=”/favicon.ico”>
Remember to give your favicon image address in the above code. You can use .png or gif images instead of .ico but your favicon won’t be displayed in Internet Explorer.
Feel free to ask me if you have any questions further.
- Related Blogs on Web Design
- Why Does Clean Markup Matter in Web Design? | Webdesigner Depot