How to Create Your Own Favicon Icon
Create a favicon that represents your website., Decide if you want a transparent background., Create a favicon that's easy to read., Create an aesthetically pleasing favicon., Use colors that are cohesive to your brand., Consider your audience when...
Step-by-Step Guide
-
Step 1: Create a favicon that represents your website.
The type of website you have should determine the look of your favicon.
Try to design something that will adhere to your brand image and that will be recognizable and memorable to people.
Your favicon will be the first thing that people see when they look at the tabs in their browser and will also appear in people's bookmarks.
For instance, if you have a food website, choosing a favicon that has a fruit or vegetable as the design may make it more memorable.
If your website is for a law firm or investment company, a traditional and sleek favicon is best.
If your website is aimed towards younger people, try creating a playful and colorful favicon. -
Step 2: Decide if you want a transparent background.
If you don't designate a background, then it will fill in white, which may not adhere to your brand.A transparent background will take on the color of the person's browser and look more streamlined in some cases.
In other cases, having a color for the background will make the foreground letters or graphics pop.
Decide what would be the best for your design and keep it in mind as you make it.
The most basic favicon is a 16x16 square and has a background color. , Because the favicon image you'll be using is small, it's important that you can get your brand across without confusing your visitors.
A favicon that's hard to read leaves a negative impression and can create questions in the visitor's mind about the quality of work that you can provide.Overly complex images and logos do not look good when shrunk down to 16x16 or 32x32 pixels.
If your existing logo is too complicated, then you can use tactics to simplify it, so it can be recognizable at favicon size.
Use initials instead of showing the entire company name, or design a simple icon rather than using a picture.If you already have a simple logo, you can shrink down the image and set it as your favicon.
You may need to alter it before converting it to an icon file.
You can also use a picture of an object that describes your site's overall theme. , The structure of your favicon is called its form.
Favicons typically take on shapes, like a circle or a square.
When you design your favicon, it's generally better if it's able to fit within one of these basic forms because free-form shapes can often get muddled or confused at 16x16 pixels.
Another important aspect of your design is called aesthetic unity.
Aesthetic unity includes the details and sizes of different components in your favicon and how your favicon is balanced.
The more uniform the details, the more cohesive your favicon will look.
For instance, using different font types or sizes within your favicon isn't pleasing to the eye and can make your favicon look confused or messy.Another example of aesthetic unity is maintaining rounded corners throughout the shapes in your favicon.
A good example of an icon that has changed form is Google's favicon.
It has changed from a square to a circle. , When you create your favicon, you should create it in 8 bit (256 colors) or 24 bit (16.7 million colors) color depth, as this will work on modern browsers.Make sure that the colors you choose can be found elsewhere on your website or are associated in some way with your brand.
A favicon with colors that aren't on your website, logo, or applications won't be memorable, and people will not be able to associate the icon with your brand.
Some creative uses of favicon color include GitHub which changes colors depending on your system status and Trello, which changes depending on your background color.
The most common colors used in favicons are red and blue., Other than identifying your brand, your favicon needs to look appealing to your visitors.
People with different tastes, interests, and societal norms will look at different iconology from different perspectives.
Cultural differences exist within our society and could confuse or repel the audience you are trying to attract.
For example, Mac Os X uses a stamp which is a universal symbol for mail.
Using a mailbox would not be as effective because mailboxes vary in different parts of the world., While it isn't incredibly graphically intensive, a favicon is an important part of your brand.
For example, think of your favorite websites like Twitter, Gmail, Facebook, or LifeGuide Hub, and how much you associate the favicon with the brand.
If you don't have a good eye for design, or you're stumped on what kind of design you should have for your site, consult friends who have an eye for design or who work in graphic design.
Ask around in your network of friends to see if anyone can provide design advice for free.
Larger companies have in-house graphic designers that can create the favicon image. -
Step 3: Create a favicon that's easy to read.
-
Step 4: Create an aesthetically pleasing favicon.
-
Step 5: Use colors that are cohesive to your brand.
-
Step 6: Consider your audience when designing a favicon.
-
Step 7: Get the opinion of friends and colleagues.
Detailed Guide
The type of website you have should determine the look of your favicon.
Try to design something that will adhere to your brand image and that will be recognizable and memorable to people.
Your favicon will be the first thing that people see when they look at the tabs in their browser and will also appear in people's bookmarks.
For instance, if you have a food website, choosing a favicon that has a fruit or vegetable as the design may make it more memorable.
If your website is for a law firm or investment company, a traditional and sleek favicon is best.
If your website is aimed towards younger people, try creating a playful and colorful favicon.
If you don't designate a background, then it will fill in white, which may not adhere to your brand.A transparent background will take on the color of the person's browser and look more streamlined in some cases.
In other cases, having a color for the background will make the foreground letters or graphics pop.
Decide what would be the best for your design and keep it in mind as you make it.
The most basic favicon is a 16x16 square and has a background color. , Because the favicon image you'll be using is small, it's important that you can get your brand across without confusing your visitors.
A favicon that's hard to read leaves a negative impression and can create questions in the visitor's mind about the quality of work that you can provide.Overly complex images and logos do not look good when shrunk down to 16x16 or 32x32 pixels.
If your existing logo is too complicated, then you can use tactics to simplify it, so it can be recognizable at favicon size.
Use initials instead of showing the entire company name, or design a simple icon rather than using a picture.If you already have a simple logo, you can shrink down the image and set it as your favicon.
You may need to alter it before converting it to an icon file.
You can also use a picture of an object that describes your site's overall theme. , The structure of your favicon is called its form.
Favicons typically take on shapes, like a circle or a square.
When you design your favicon, it's generally better if it's able to fit within one of these basic forms because free-form shapes can often get muddled or confused at 16x16 pixels.
Another important aspect of your design is called aesthetic unity.
Aesthetic unity includes the details and sizes of different components in your favicon and how your favicon is balanced.
The more uniform the details, the more cohesive your favicon will look.
For instance, using different font types or sizes within your favicon isn't pleasing to the eye and can make your favicon look confused or messy.Another example of aesthetic unity is maintaining rounded corners throughout the shapes in your favicon.
A good example of an icon that has changed form is Google's favicon.
It has changed from a square to a circle. , When you create your favicon, you should create it in 8 bit (256 colors) or 24 bit (16.7 million colors) color depth, as this will work on modern browsers.Make sure that the colors you choose can be found elsewhere on your website or are associated in some way with your brand.
A favicon with colors that aren't on your website, logo, or applications won't be memorable, and people will not be able to associate the icon with your brand.
Some creative uses of favicon color include GitHub which changes colors depending on your system status and Trello, which changes depending on your background color.
The most common colors used in favicons are red and blue., Other than identifying your brand, your favicon needs to look appealing to your visitors.
People with different tastes, interests, and societal norms will look at different iconology from different perspectives.
Cultural differences exist within our society and could confuse or repel the audience you are trying to attract.
For example, Mac Os X uses a stamp which is a universal symbol for mail.
Using a mailbox would not be as effective because mailboxes vary in different parts of the world., While it isn't incredibly graphically intensive, a favicon is an important part of your brand.
For example, think of your favorite websites like Twitter, Gmail, Facebook, or LifeGuide Hub, and how much you associate the favicon with the brand.
If you don't have a good eye for design, or you're stumped on what kind of design you should have for your site, consult friends who have an eye for design or who work in graphic design.
Ask around in your network of friends to see if anyone can provide design advice for free.
Larger companies have in-house graphic designers that can create the favicon image.
About the Author
Roy King
A seasoned expert in education and learning, Roy King combines 5 years of experience with a passion for teaching. Roy's guides are known for their clarity and practical value.
Rate This Guide
How helpful was this guide? Click to rate: