How to Create Your Own Favicon Icon

A favicon is that cool little image next to your address bar in your browser. It's what sets your site apart in the bookmarks tab and can be used to increase brand awareness. If you have a site but have never considered creating a favicon, you should rethink your decision. Increasingly, software developers are utilizing favicons for different aspects of their applications, such as home screen icons on tablets. Luckily, designing, creating, and implementing a favicon is something almost anyone can do if they follow the right steps.

Method 1

Method 1 of 3:

Designing Your Favicon

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.
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.^{[1]XResearch source} 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.
Advertisement
3
Create a favicon that's easy to read. 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.^{[2]XResearch source} 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.^{[3]XResearch source}
- 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.
4
Create an aesthetically pleasing favicon. 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.^{[4]XResearch source}
- 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.
5
Use colors that are cohesive to your brand. 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.^{[5]XResearch source} 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.^{[6]XResearch source}
6
Consider your audience when designing a favicon. 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.
7
Get the opinion of friends and colleagues. 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 How.com.vn, 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.
Advertisement

Method 2

Method 2 of 3:

Creating Your Favicon

1
Use photo editing software to create your favicon. You can use photo editing software like Adobe Photoshop or Illustrator to create the image for your favicon. These software applications also allow you to resize and export the image in the right format. Some software allows you to create your favicon by hand.
- There are also favicon specific editing programs that you can find online.
- Use a search engine and type in "favicon editors."
- Make your canvas size 512x512 pixels because this number breaks down to most applicable favicon sizes and is still big enough for you to edit effectively.
- Other popular photo editing software includes GIMP, PhotoScape, and Paint.NET.^{[7]XResearch source}
- When using this software, you won't be able to edit the .ico files directly, but you can use .png, .jpg, or .gif files and then convert them later.
2
Resize and save your favicon. 32x32 px is the size of Windows desktop items while 16x16 px is the size of favicons in your browser's tab.^{[8]XResearch source} After you create your favicon in a larger format, it's important to reduce its size so you can see how it will look in people's browsers. If it is unreadable or not aesthetically pleasing, start over on your original design. Think about the platforms that your website or application is most likely going to be used on and then create a favicon to cover all your bases.
- It's important to note that different hardware and software utilizes different favicon sizes.
- Some other favicon sizes include 57x57px for the standard iOS home screen, 72x72px for the iPad, 96x96px for Google TV, 128x128px for the Chrome Web Store and 195x195px for the Opera Speed Dial.^{[9]XResearch source}
- If you want to cover all your bases you can create versions of your favicon in each of these sizes.
- Save separate versions of your favicon, so you don't lose the work you've done.
3
Combine your files using a converter. The great thing about .ico files is that you can combine more than one file to create it. This is useful because different browsers and software will want a different sized favicon. To make sure your favicon looks good across all different platforms, convert your files using an online converter. Type "icon converter" into your favorite search engine to find free online applications to do this. Save the merged file as "favicon.ico."
- You can also use a program like GIMP that has a built in feature, or download a plugin called ICO FORMAT to Adobe Photoshop.^{[10]XResearch source}
- Create a new folder so you can store new favicons or works in progress.
- Type ".ico converter" or "favicon generator" in a search engine to find different tools you can use.
Advertisement

Method 3

Method 3 of 3:

Implementing Your Favicon

1
Upload your favicon if you're using a website editor. Many website editors come with a built-in form that allows you to upload your favicon to your website automatically. If you are using a website editor that has this built in, look for options that say "Upload Favicon" or "Add Favicon" in your website's settings menu. Select your favicon.ico file and upload it to your site.^{[11]XResearch source}
- If you can't find a place to upload your favicon on your website editor, you'll have to do it manually.
If your website supports File Transfer Protocol or FTP, then you can use your FTP client to upload your new favicon.icon file to your root(index) directory.^{[12]XResearch source} If not, then you'll have to go to your web hosts page and upload the image manually. Remember to replace the existing favicon.ico file with your new file.
3
Add the file to your header. Find the place where you can access the PHP and CSS files for your site. Go to your site's header.php file and edit it. Under the <header> tag type, "<link rel="shortcut icon" href="<?PHP echo get_stylesheet_directory_uri(); ?>/favicon.ico" />". This should connect your site to your favicon.^{[13]XResearch source}
- Because you're using PHP, it means that any sites that use your header file will now have the same favicon.
4
Refresh your browser. Once you're done uploading the favicon you can refresh your browser to see your new image next to the address bar. To go directly to an image of your updated favicon, type, "http://www.yourdomain.com/favicon.ico."
- If your favicon does not initially appear, you may have to reset your browser's cache.
- To clear your cache, go to your browser's settings and delete your Temporary Internet Files, Cookies, and History.
Advertisement