Hi, 

My name is Bella. I'm designer, but it's not just my work but rather a hobby and passion of all life. I'm trying improving my skills in web design and studying something new all the time.

So, I'd like to share some my ideas and works with you.

Hope it will be helpful! 

Feel free to ask me any questions!

So, let's begin!

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 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.

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.

Step 1 - Designing a Favicon in Photoshop

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.

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 3 - designing a favicon in photoshop

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 4 - designing a favicon in Photoshop

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.