This tutorial will show you how to create favicon for your website using Photoshop.
Favicon is a small but significant way of promoting your brand on your website. This is how it may look on your website:
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.
Let’s create a new document in Photoshop. Open ‘File’ > ‘New’ menu:
Use ‘Zoom’ tool to increase the document for editing:
For our example favicon, we’ll create a simple gradient background with 2 letters ‘TM”’ (TradeMark).
Apply ‘Gradient Tool’ to your document. Feel free to use any color presets available by default or create new ones:
Use ‘Horizontal Type Tool’ to add your own text. Set the font family, font size, font color:
Using ‘Transform Tool’ (Ctrl + T) adjust text position:
Merge layers as shown on the screenshot below:
Go to ‘File’ > ‘Save As’, open up the drop-down menu and select the .PNG (*.PNG) option. Hit the ‘Save’ button:
You’ve successfully created your own favicon image. It was saved as ‘favicon.png’ file on your hard drive.
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.
Open any online Image Converting Website in your browser. We will use this website.
Drop your ‘favicon.png’ file into ‘Upload’ area (as shown on the screenshot). Convertion starts automatically. The process takes 1 – 2 seconds:
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: