What is Favicon?
A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. (From Wikipedia)
How to Create Favicon for Your Website?
Download Sothink Logo Maker >> (30-day free trial)
Step 1: select template
Launch Sothink Logo Maker and you will see a window showing various kinds of logo templates.
In this tutorial, we use the following template to create the favicon.
Step 2: replace favicon image
Logo Maker provides over 2500 logo graphics, you can select the target image and replace it with any one from the Resources library. Importing external images is also allowed when create the favicon. What’s more, Logo Maker supports importing SWF and extracting its vector graphics.
Step3: change favicon text
You can directly enter the desired text.
Step4: set special effects
Edit the font style and add special text effect for the favicon.
Step 5: export favicon graphic
Click “File” -> “Export Logo”, and you will see the “Export Logo” window. You can export your logo to different dimensions suitable for web or print. Since we are creating a favicon, so set both width and height values to “16”.
From the “Save as type” drop down list, you can see three kinds of output formats: JPG, PNG (with transparent background) or BMP.
Set saving path, choose the export file type, and then click “Save” to export the favicon graphic.
Step 6: convert the favicon graphic to ICO format and publish to web
Find the output favicon graphic from the path you specified. Now you need to convert the favicon to ICO format. There are many online free tools can help you, such as the Free Online Image Converter (http://www.coolutils.com/online/image-converter/).
After converting the favicon graphic to ICO format, save the file as “favicon.ico”, and then you can publish it to your website by following these two steps:
1. Save the “favicon.ico” file in the main website directory.
2. Paste the code below within the head of each page.
<link rel=”Shortcut Icon” href=”/favicon.ico”>
See the favicon showing on the website: