A favicon is a tiny web icon or a badge, which is used to visually identify your website in the Favorites. Furthermore, a favicon is always shown near the address or the name of the website, every single time when you use the browser. In the majority of cases, the favicon is a square with a size of 16 by 16 pixels saved in a favicon.ico format. In this article, we are going to talk about the “base” required to start the entire process. We will show you how to make a favicon for the website using different graphics editors, as well as share the key method of favicon adding to the website.
What do we need to start working?
1. Open the logotype in the PNG format with the transparent background by clicking the following combination: “File” – “Open” and choosing an image that is saved on your computer.
2. Delete the name of the company from the logotype in order to leave only the icon by using the “Eraser” tool and changing the main color to white.
3. In order to change the size of the logotype to 16 by 16 pixels, then that can be done by clicking the following combination: “Image” – “Image size”.
4. Choose the size of 16 by 16 pixels. Your favicon will look incredibly small, but you don’t have to worry because everything goes according to our plan.
5. Save the image by clicking the following combination: “File” – “Save as” and choose the PNG format for saving.
If you are satisfied with the logotype on the favicon, go to the 4th stage of this manual.
1. As per the first option, we need to open a PNG file. The key difference is the fact that it’s going to have a corporate color in the background, but not a transparent one.
2. Remove the text, leaving only the icon: use the “Picker” tool in order to choose the color of the background; click and the color in the palette will be the same as the background. Now, use the “Brush” tool and remove the name of the company from the logotype.
3. Change the size of the image by clicking the following combination: “Image” – “Change size” and choose the size of 16 by 16 pixels. If the image looks proportional and attractive, save it in the .PNG format and move to the 4th step of this manual.
GIMP is a graphics editor program that allows the users to work with various types of vector images. The key advantage of this software is the fact that one is able to create a favicon in .ICO format without using various image converters as in the case with Adobe Photoshop.
1. Open the file in the editor by clicking “File” – “Open”, and choose one of the images saved on your PC.
2. Now, one needs to remove the caption in order to leave the icon only: click the color palette and choose the code of the corporate background color. If you don’t know the code, use the “Picker” tool, hover the cursor over the background and make a left click. The color will be chosen automatically. Now, use the “Brush” tool to remove all the letters from the favicon.
3. Decrease the size of the logotype to the standard dimensions of the favicon, i.e. 16 by 16 pixels by using the following combination: “Image” – “Change image size”.
5. Export the logotype by using the following combination: “File” – “Export as…”.
6. Choose the export format, i.e. Microsoft Windows icon with .ICO extension. Then, click the “Export” button.
Everything is ready now! Now, you can use the favicon on your website!
In order to transform .PNG into the .ICO format, one can use various online converters. We decided to use online-convert.com, but you are free to use any other option that is suitable for you since all of them function similarly. So, Let’s begin:
1. Open the website and use the left side-bar to choose the following: “Image converter” – “Convert to ICO”
2. Choose the files on your computer by clicking “Choose files…” or dragging the files to the corresponding field. Then, continue by clicking “Start conversion”.
3. Click the “Download” button in order to download the favicon in the .ICO format to your computer. One can also send the file to the cloud storage or to download it directly in the ZIP format.
You can load your favicon (favicon.ico) to the main (root) folder of the website. The root folder is the main directory of the website with all key files of the WP, including “index.php”, and other folders such as “wp-admin”, “wp-content” and “wp-includes”. It’s obligatory to save the “favicon.ico” file in the same folder as the “index.php”.
1. Logging into your “WordPress Dashboard”.
2. Go to the “Appearance” section.
3. Open “Theme editor”.
4. Choose the file called “Header” or “Header.php” in order to edit it.
5. Find the line of the code that starts with <link rel=»shortcut icon» and end with /favicon.ico «/>. You need to change or add the following code right under the HTML-tag <head>. In our example, we have used the “favicon.ico” file. You are free to choose any other name.
Here’s the code: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;
6. Save changes.
During the process of website development, one needs to make sure that even the tiniest important details, such as the favicon, are taken into account. It’s really easy to add the favicon to the website. However, this tiny element shows your comprehensive approach to the design and attention to the users. Do you have any questions or want to share your experience in terms of the favicon creation? You can do that in the comments below!
Related Articles
How to Create a Favicon for Your Website: Step-by-Step Guide
by Team ZenBusiness, on July 25, 2024
Favicon Generator
by Team ZenBusiness, on October 29, 2024
How to Create a Real Estate Logo: Helpful Tips from ZenBusiness
by Team ZenBusiness, on October 22, 2024
Everything You Need to Know about Emblems – ZenBusiness Emblem Creator
by Team ZenBusiness, on October 08, 2024
Fresh Logo Designs Inspiration From ZenBusiness
by Team ZenBusiness, on August 23, 2024
How to Create a Logistic Logo?
by Team ZenBusiness, on October 09, 2024
How to Create Pop-Ups That Convert: Tips from ZenBusiness
Start Your LLC Today