- Benefits
- Images for a Favicon
- Services for Creating a Favicon
- How big should favicon be
- Format
- Favicon pixel size — Google Requirements
- Rules for Creating a Favicon
- Issues with Display
- Conclusion
A favicon is a tiny website’s icon. The icon is displayed in ICO, PNG, and SVG formats. The favicon is easily recognizable and enables you to establish a connection with the brand. The major goals are to make navigating easier and make things more clickable. It is applied to tabs and browsers.
Benefits
A favicon’s key benefits include:
- Highlighting the website in search results. You can use a favicon to highlight a website’s content more strongly.
- Memorability. The icon is a well-remembered brand’s component.
- Simpler website search. The favicon makes it much easier to find the appropriate website.
- No log file errors. If there isn’t a favicon, the log may feature a 404 error.
- Making things more clickable. The icon increases clickability and lends the website greater authority.
Images for a Favicon
The favicon is made out of the images below:
- Thematic. Installing a favicon with the brand logo on the business website is advised. If there isn’t a logo, the image is picked in line with the website’s overall concept.
- Contrasting. It is preferable to select the brightest and most contrasting icons to grab consumers’ attention.
- Condensed. The favicon should be tiny in size. It is preferable to pick a straightforward image with no more than three colors and a few minor details.
- Unique. The resource will stand out in search results if distinctive icons are used instead of generic ones.
Services for Creating a Favicon
To build a favicon, use specialized internet services:
- Favicon.io. You can design and edit your own icons with this service. An image can be imported from a file after being corrected. The generated image is 16×16 in size and is in the ICO file format.
- Logaster. Free service is offered here. There are different sizes and formats available. One small logo is created without charge; however, more logos require payment.
- The Perfectoweb. A picture, text, or emoji can be used to create icons. Formats – ICO and PNG. There is a selection of backdrop and icon colors.
You can make an excellent icon on your own without hiring a designer. However, during the complex optimization of the site is recommended to use the services of professionals who will choose the best option, taking into account the specifics of the brand.
How big should favicon be
Favicon is a bitmapped picture with a pixel resolution. The standard icon size is 16×16 pixels. The standard size of a favicon is usually 24 by 24, 32 by 32, 64 by 64, etc. Google suggests that the size of the favicon should be a multiple of 48 pixels, e.g. 4848, 9696, etc. Apple products employ large icons that are 60×60 and 120×120 pixels in size. The maximum suggested size for a favicon is 256×256 pixels for Windows, 96×96 pixels for Linux, and 1024×1024 pixels for Mac OS X.
Format
A favicon has always come in the ICO format as the standard. This format enables setting icon sizes with various bit sizes. The ICO is being replaced by PNG and SVG formats. Their benefits include light weight and excellent image quality. Other operating systems use PNG, but Safari MacOS uses the SVG format. Although the icon’s resolution is low, the ICO format is still in use. Icons can also be found in JPEG and GIF formats, but not all browsers support them. To check icons, use the caniuse.com service. The most common icon designs have solid fills and translucent backgrounds.
Favicon pixel size — Google Requirements
Google automatically indexes the icons on the website. Typically, indexing takes a few days. Indexing happens more quickly if the site is more well-known. Google prioritizes icons multiple of 48, content that is not obscene, coherence with the overall aesthetic, and distinctiveness. Google dislikes when photos are changed frequently.
Rules for Creating a Favicon
There are some guidelines that should be observed when making a favicon:
- Choosing the appropriate name. Selecting a proper extension, like.ico, is important. Both the file type and the file name must contain the specified format.
- Cross-platform icon sets. Specific sizes and formats are provided for various platforms. The most desirable version among those uploaded is shown. You can use the service realfavicongenerator.net.
- Including the address in the code in the <head> tag. Modern browsers automatically check the icon in the root directory, therefore this condition is not necessary. You can provide your own icons for the site’s various pages using the tag.
- Examine indexing. In the robot.txt file, indexing should be permitted.
- Verifying visibility. You must use search engine services to verify the icon’s accessibility.
Issues with Display
The following guidelines must be followed in order for a favicon to be displayed correctly:
- you should clear the cache and refresh the page;
- check the format compatibility;
- the code of the icon should be placed in the <head> block;
- you must wait until indexing is complete;
- you must allow indexing – replace disallow with allow;
- unique favicons should be used, as non-unique icons are often ignored by search engines;
- the display should not contain forbidden characters;
- check the presence of the site in the filter SE.
Conclusion
A favicon is an emblem used on websites to improve their clickability and recognition. Icons are made using online tools (like favicon.by) or software like Adobe Photoshop. To ensure proper display by browsers, it is advised to create multiple icons at once. The icon needs to be easy to read and consistent with the brand profile.
