Making a Favicon on the site - what it is, why it is important, how to create and options for formats and settings
A favicon is a small but significant element of web design. This small graphic symbol helps to reinforce your brand, improve user experience and gives your website a more professional and finished look. In this article, let's take a look at how to properly create and customize a favicon for your website.
What is a favicon?
A favicon (short for "favorite icons") is a small image that represents your website on the Internet.
Are they displayed in browser tabs, bookmarks, desktop icons and anchored links? They are important for brand recognition and user experience. In this article, let's look at how to create and customize favicon on a website for different browsers and usage formats.
Why it matters
Now that we understand what a favicon is and why we need it, let's discuss the next important step - how to create it and what technical features to pay attention to.
Branding and recognition
Favicons are a subtle but powerful branding tool. A well-designed favicon makes your website instantly recognizable, helping it stand out in the multitude of open tabs and browser bookmarks. It's as much a part of your visual style as your logo.
Think of it yourself - when you search for something on the internet, and you choose from 10 pages in the search engine results. Surely the first thing you do is to look at a familiar or colorful icon, and go to that site.
User Experience
Have you ever tried to find a specific website among dozens of open tabs in your browser? When you have many tabs open, the text is no longer displayed and only the icon is visible.
This is where favicons come in handy too. They help users quickly find and navigate to your site, improving the overall user experience.
Creating a Favicon
Design Principles
Simplicity: Remember that icons are small in the interface (usually 16x16 to 32x32 pixels). So the simpler the design, the better - avoid lots of small details.
Recognizability: the favicon should be immediately identifiable as part of your brand. Even if you have a small personal blog - it's still a brand, otherwise why did you create it?)
Consistency: make sure the icon matches the color scheme and style of the brand.
Tools and Resources
Graphic design software - Adobe Photoshop or Illustrator, or other vector graphics editors are great for creating custom icons.
Online favicon generators - sites like:
- Favicon.io
- RealFaviconGenerator.net
- Favicon-Generator.org
- FaviconGenerator.com
- HubSpot.com
- Favicomatic.com
- WebsitePlanet.com
They offer easy ways to create favicons - from text, images or emoji, with the option to download a ready-made icon pack and code to insert them into your site.
Technical Features
File Formats
The most common file formats are .ico, .png, and .svg. The .ico format is the oldest and most widely supported, especially for legacy browsers, but .png and .svg provide better resolution and scaling.
For the best combination of support for older browsers and display quality in newer browsers, we will use all possible favicon options - more on that next.
Location
Place the favicon.ico file in the root directory of your website. For example, https://www.yourwebsite.com/favicon.ico. Browsers and bots check this address by default, even if the path is not specified in the page layout.
Connection
To ensure that all browsers recognize your favicon, add a link to it in the <head> section of your HTML. Here's a basic example:
<link rel="icon" href="https://www.yourwebsite.com/favicon.ico" type="image/x-icon">
Best Practices
Different sizes and devices
As I wrote above, modern devices and browsers often require, or rather support, different sizes of favicon. This has become relevant, for example, because of the emergence of screens with high resolution, where the standard ICO 32x32 pixels looks quite bad.
Much better fit vector SVG, which looks equally good at any size, or PNG 512x512 pixels, which will also look adequate almost everywhere.
Consider creating multiple versions of the favicon for different platforms. Here's an example of HTML code that includes multiple sizes:
<link rel="icon" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
Testing in different browsers
Different browsers may display favicons differently. It's important to test the favicon in multiple browsers (e.g. Chrome, Firefox, Safari) to make sure it looks good everywhere.
Accessibility and contrast
Make sure your favicon is readable and has good contrast. This is especially important for users with visual impairments.
Common problems
Icon is not displayed
- Check the file path: Make sure the link in the HTML points to the correct path.
- Browser cache: Sometimes you need to clear your browser cache to display the updated favicon.
The favicon looks blurry
- Resolution: Make sure you use a high-resolution image, especially for larger favicon sizes.
- File Format: Consider using .svg format for clearer and more scalable icons.
Favicon is not updating
- Server cache: Your web server may be caching an old favicon. Try renaming the favicon file and updating the HTML link.
Format and customization options
Default favicon
Default favicon
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
PNG/JPG Favicon (for modern browsers supporting these formats)
<link rel="icon" href="/path/to/favicon.png" type="image/png">
<link rel="icon" href="/path/to/favicon.jpg" type="image/jpeg">
Apple iOS devices
Apple Touch icon (used for bookmarks and home screen apps on iOS and iPadOS)
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Different sizes: specify sizes for different devices (optional, but recommended for better resolution on different devices)
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon-180x180.png">
Icon precomposition: to keep iOS from adding gloss and rounded corners:
<link rel="apple-touch-icon-precomposed" href="/path/to/apple-touch-icon-precomposed.png">
Android devices
Android Chrome icon: for Chrome on Android, especially when used as a Progressive Web App (PWA):
<link rel="icon" sizes="192x192" href="/path/to/android-chrome-192x192.png">
<link rel="icon" sizes="512x512" href="/path/to/android-chrome-512x512.png">
Microsoft Devices
Windows Tiles - for placing your website on the Windows start menu:
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/path/to/mstile-144x144.png">
Additional configurations:
<meta name="msapplication-config" content="/path/to/browserconfig.xml">
Safari Pinned Tabs (macOS)
Safari pinned tab icon (SVG format for Safari pinned tab):
<link rel="mask-icon" href="/path/to/safari-pinned-tab.svg" color="#5bbad5">
Other tags for specific purposes
Shortcut icon (mostly deprecated, but sometimes used to support older versions):
<link rel="shortcut icon" href="/path/to/favicon.ico">
A manifest file for progressive web applications:
<link rel="manifest" href="/path/to/site.webmanifest">
Theme color (for Android Chrome toolbar color):
<meta name="theme-color" content="#ffffff">
Summary
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- For modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon-128x128.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon-256x256.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon-512x512.png">
<!-- For iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180x180.png">
<!-- For Windows 8 and 10 -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon-144x144.png">
<!-- For Safari pinned tabs -->
<link rel="mask-icon" href="favicon.svg" color="#000">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" href="favicon.ico">
<meta name="msapplication-TileImage" content="favicon.ico">Notes
- File paths: Make sure the file paths of the icons are correct.
- File sizes: It is recommended to create icons of several sizes so that they display correctly on different devices.
- Cache problems: Sometimes changes may not be visible immediately due to browser or server caching. Clearing the cache or using a different file name may help.
- Testing: Always test your icons on multiple devices and browsers to make sure they are compatible and display quality.
This list covers the most common and widely supported tags for favicons and icons across platforms and browsers. However, always check the latest best practices and recommendations, as web standards and browser support can change.
Conclusion
Favicon may seem like an insignificant detail, but they play an important role in creating your website's personality and user experience. A lot depends on this tiny but influential element of web design.
