How to Create a Favicon in Photoshop

A Favicon is a tiny image we usually see next to a website’s URL. It is a custom icon made for a particular website we visit which shows up in the navigation bar, bookmarks, tabs, and even as a shortcut in a Window’s desktop. A Favicon can also be your website logo but only reduced to 16×16 pixels as it is the standard size of any Favicon.Now below we are going to explain step by step how to create a Favicon in Photoshop.

Step 1 :
To get started, open Photoshop and set your canvas size into a perfect square of any even number such as 60×60 pixels as working with a 16×16-pixel canvas would be very difficult.

 

How to Create a Favicon in Photoshop

 

Step 2:

Now, begin designing your own favicon. Set your background color. Always make sure that the colors you use for your favicon is the same set of colors you use in your website.

 

Step 3:

As for the details of your design, you can either make a simple image or use your typography skills in designing your favicon. Always remember that the size of your favicon is too small to contain all the details you want to place in the image. Just keep it simple yet captivating.

 

Step 4:

Because the standard size of a favicon is at 16×16 pixels, you must reduce your current image size for you to be able to use the image as a favicon. Go to the Image tab > Image Size

 

Step 5:

To upload your Favicon to your server, open your FTP and go to the root directory of your site and look for favicon.ico. Now, go to any website that helps you convert any .png or .jpg format to .ico. After converting your Favicon image to favicon.ico, delete and replace the ones in your server with your new favicon.ico file or just upload the new favicon.ico file if there is no existing favicon.ico file in the server.

Leave a Reply

Your email address will not be published. Required fields are marked *

Resource Library

Become a better content marketer with our library of free content available for download.

Check it out