If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

How to create .ico favicon with Photoshop

This tutorial will show you how to create favicon for your website using Photoshop.

How to create .ico favicon with Photoshop

Favicon is a small but significant way of promoting your brand on your website. This is how it may look on your website:

How_to_create_favicon_for_your_website_using_Photoshop_1

Photoshop is a great and flexible graphics editing program for creating custom favicons.

Favicon is usually 16×16 mini logo you can use on your website, but if you need a little more space to work with, you can start out with a document that is 64×64 pixels, and then scale it down later.

  1. Let’s create a new document in Photoshop. Open ‘File’ > ‘New’ menu:

    How_to_create_favicon_for_your_website_using_Photoshop_2
  2. Use ‘Zoom’ tool to increase the document for editing:

    How_to_create_favicon_for_your_website_using_Photoshop_3
  3. For our example favicon, we’ll create a simple gradient background with 2 letters ‘TM”’ (TradeMark).

  4. Apply Gradient Tool’ to your document. Feel free to use any color presets available by default or create new ones:

    How_to_create_favicon_for_your_website_using_Photoshop_4
  5. Use ‘Horizontal Type Tool’ to add your own text. Set the font family, font size, font color:

    How_to_create_favicon_for_your_website_using_Photoshop_5
  6. Using ‘Transform Tool’ (Ctrl + T) adjust text position:

    How_to_create_favicon_for_your_website_using_Photoshop_6
  7. Merge layers as shown on the screenshot below:

    How_to_create_favicon_for_your_website_using_Photoshop_7
  8. Go to ‘File’ > ‘Save As’, open up the drop-down menu and select the .PNG (*.PNG) option. Hit the ‘Save’ button:

    How_to_create_favicon_for_your_website_using_Photoshop_8
  9. You’ve successfully created your own favicon image. It was saved as favicon.png’ file on your hard drive.

  10. Favicons are saved as .ICO files, a file format that saves multiple images at different sizes for scaling purposes. Therefore, the last step would be converting image format from .PNG into .ICO. This will be the easiest step in the whole tutorial.

  11. Open any online Image Converting Website in your browser. We will use this website.

  12. Drop your favicon.png’ file into ‘Upload’ area (as shown on the screenshot). Convertion starts automatically. The process takes 1 – 2 seconds:

    How_to_create_favicon_for_your_website_using_Photoshop_9
  13. Hit the ‘Download’ button to get favicon.ico’ file to your hard drive.

And you’ve done it! We’ve created a unique favicon for your website using Adobe Photoshop software. Feel free to upload your favicon to your server.

Feel free to check the detailed video tutorial below:

How to create .ico favicon with Photoshop
 
Live Chat
We help you to choose the right product.
Start chat