How To Create A Favicon For Your Website? - All Tips to Go!
Forewords: Your reference book for favicon - Get to know what's favicon, its dimension sizes, usages; How to make your website favicon with advanced tools - DesignEvo, GIMP or Photoshop CC, professionally? If you've gotten your logo already, three easy free favicon creators online in part 3 will show you another path to have an icon file.
Content Table of "How To Create A Favicon For Your Website? - All Tips to Go!"
- Part 1: What Is Favicon? [Its Sizes, Usages & Alters]
- Part 2: How to Create Favicon Easily? (Higher Quality, Professional Way)
- Part 3: The List of Top 3 Easy-Free Favicon Generators Online (Average Quality, or Below Average) - DesginEvo, GIMP, and Photoshop CC
- Part 4: Close Up
Part 1: What Is Favicon? [Its Sizes, Usages & Alters]
A favicon (a.k.a. favorite icon) is a tiny branding image that informs people of which website it is. Recently, favicon has been featured in web title, user bookmark, and Google smartphone search result.
1.1. Favicon Sizes And Implementation:
Favicon has several commonly-used sizes for web according to Microsoft Guideline:
- *16 x 16px
- *24 x 24px
- *32 x 32px
- *48 x 48px
To implement/install a favicon on an HTML page, you only need to add the code below in the block of <head></head> HTML element:
- <link rel="shortcut icon" type="image/png" href="/ URL/imagefile.png">
- <link rel="shortcut icon" href="/URL/imagefile.ico" type="image/vnd.microsoft.icon" />
1.2. Favicon Usages:
You may think favicon is useless. Just like you, I found it of less use for a long period. Until one day, I opened a list of websites, only to find out my browser had no space for web titles. And, favicon became the only recognizable symbol to distinguish one site from another.
Depict Image: Icon helps users jump to the right site quickly.
So, when a user must open a group of websites at one time, web favicons are the only flags indicating which sites they are. With icon flags, viewers can easily know where to click and visit next.
Another Benefit of Favicon: It costs you nothing but helps you reinforce business awareness.
Listing in web title, bookmark, and Google smartphone search result, the iconic graphics will remind people of your brand and service on each visit.
1.3. Favicon Alters:
Alter One - Don't Change Your Favicon A Lot: Though favicon has benefits, we shouldn't change it a lot or frequently. Or your users may get confused and fail to recognize your brand for a second visit.
Alter Two - Keep Your Favicon Simple: Removing all intricate design will make your favicon feel stylish and cutting-edge. Or, you can use the symbol from your logo, which makes your favicon consistent with your logo design.
Alter Three - Make Favicon Small: It's better to use the recommended sizes above, and then user browser has no difficulty in showing it on the title. However, if you choose a large PNG/ICO as your favicon, you may not be able to see it display.
Part 2: How to Create Favicon Easily? (Higher Quality, Professional Way)
Below, we collect the best ways to make a quality favicon, including free DesignEvo online, free GIMP, Photoshop CC 7-day free trial.
2.1. DesignEvo, The Easiest Way to Make a Favicon and a Logo at The Same Time:
If you decide to build a new website and you have yet designed your website logo, then DesignEvo is a dreamy solution to render both icon and logo immediately. (It takes top 7-8 minutes.)
As a free logo maker, DesignEvo offers over 10,000 logo templates, which you can search, customize, and make your logo unique within minutes. To use it free, you are required to register a free account with a combo of email and password.
Depict Image: Use DesignEvo to create web logo.
After you've finished your logo and downloaded it, modifying your logo to an icon will be much simpler:
First, Remove all logo texts.
Second, Select all graphic elements and shrink them to a smaller size, and center the graphics.
Third, Change the canva size from 500 x 500 px default to 24 x 24 px (or other favicon sizes).
Fourth, Download your favicon.
Depict Image: Convert your logo to favicon in DesignEvo.
Tip: If you want to get SVG favicon or PNG-transparent favicon instead of free PNG, then you must choose DesignEvo Basic plan or DesignEvo Plus plan. They are not free but still inexpensive.
2.2 GIMP, A Free Way to Generate a Favicon from a Logo:
Once you have a logo, you can save the logomark as your favicon. GIMP photo editor (Open source) is your freebie to generate a favicon from a logo.
Step 1. Grab logomark from your logo:
If your logomark is in a single color, go GIMP color selection tool (Shift + O) and click logomark color, which will automatically select it for you. GIMP feather tool (in the category of menu > [Select] > [Feather…]) will allow furry graphics showing on your selected border (Such as, furry kitten, or furry dog). It helps to render graphics more natural and less shaper.
But in most cases, the logomark has multiple colors, and you are required to use selection tool and mouse click the border edge by edge, point by point.
Step 2. Copy logomark into a new image:
Copy out your selected graphics to a new image: Go [File] > [New…].
In its image creation windows, input a square size that fits your logomark. Before hitting "OK", hit [+ Advanced Options], find "Fill with:" blanket and go with "Transparent" selection.
Depict Image: Copy logomark to a new image in GIMP.
Step 3. Resize new logomark image and export it to an ICO file:
After logomark graphics is pasted, you can downsize it to ICO standard size. Go [Image] > [Scale Image…].
When icon editing is completed, export the logomark to an ICO file. Click [File] > [Export…], choose a directory for saving icon and hit [+ Select File Type(By Extension)]. Scroll down the list to find "Microsoft Windows icon", press [Export], and you will have your logomark as ICO file.
Depict Image: Resize logomark image in GIMP.
2.3 Photoshop Way to Create a Favicon (7-day Free Trial):
https://creative.adobe.com/products/download/photoshop/
Photoshop works almost the same as GIMP photo editor. With such powerful graphics software, you can either make a favicon from a logo, or create a favicon from scratch.
For PS beginner, creating a favicon from scratch is almost as troublesome as making a logo with Photoshop. Even for senior Photoshop users, it's no easy task and requires at least hours work.
At present, we show you the Photoshop way to create a favicon from a logomark. Here is how:
Step 1. Import a logo in Photoshop, trim it and leave the logomark only.
Depict Image: How to create a favicon from logo with Photoshop CC?
->Photoshop Zoom Tool:
Photoshop zoom tool can help enlarge the logo, so that you can select the logomark part more specifically. Also note, in the left corner, Photoshop offers a percent blanket, where you can change the zoom degree.
->Photoshop Pen Tool:
Photoshop pen tool is very useful for cutting an image or selecting any graphic for editing. You can use the PS Pen Tool to copy out logomark graphics to another layer, and delete original layer.
And, PS Pen Tool navigation includes:
- *Two consecutive left clicks will outline a straight line.
- *While holding left click and move around the mouse simultaneously, you'll be able to outline a curved line in "y" shape. Remember to apply Alt + left click "y" junction point (the point in the middle of the tangent line), so that redundant tangent part will get removed.
- *To select your logo shape, you must circle your selection and click your starting point.
- *Ctrl+Alt+Z to redo the previous navigation.
Depict Image: Use photoshop pen tool and zoom tool - How to select a curved part with PS pen tool.
Step 2. Adjust the canvas, center logomark, and shrink icon size according to ICO standard.
Under menu [Image], two buttons - [Image Size…] and [Canvas Size…] - can help you adjust logomark icon to fitting size.
Step 3. Save your logomark image as PNG.
What if you want to save your favicon as ICO in Photoshop CC? Originally, Photoshop doesn't integrate icon as an export file format. While, you can install a favicon plugin, such as Telegraphics.com.au, which will help you out.
Part 3: The List of Top 3 Easy-Free Favicon Generators Online (Average Quality, or Below Average)
1. Online Free X-Icon Editor
X-Icon Editor is a very feature-limited favicon editor that's online and free. By simply allowing users to cut a part of uploaded image into an icon online (converting logo to icon), X-Icon is still effective to a group of users.
2. Online Free ICOConvert
ICOConvert is a very convenient free icon converter. You can upload any image to it, adjust where to crop, and even choose several shapes for your favicon. Its download size supports 16 x 16px all the way up to 256 x 256px.
3. Online Free Genfavicon
Genfavicon is cheerful to turn an image to a favicon. Three steps to go - upload, use mouse navigation to cut out favicon, and lastly download ICO file.
Part 4: Close Up
Hopefully, this article about creating favicon has everything you want. In part 2 and part 3, we review 6 tools for generating favicon, but we still recommend you to choose among DesignEvo, GIMP and Photoshop CC as your favicon generator - These applications will promise you a crisp favicon.
