Skip to content 
A correctly implemented favicon improves brand presence, ensures a professional appearance on various devices and increases recognizability. To create a Integrate faviconyou need several formats and suitable references for iOS, Android and Windows. The main thing here is that every browser and every operating system can clearly recognize your icon and at the same time the loading time of your website is not unnecessarily extended.
Key points
- Multi-format support is crucial for cross-platform display.
- Head area of the website must contain suitable tags.
- Manifest file optimizes the behavior on Android devices.
- Apple Touch Icons require their own formats and references.
- Fallback icon in ICO format increases compatibility with older systems.
These key points already provide an initial overview of the most important aspects of a favicon. In addition, it is important that the icons are adapted for different screen sizes and enable a consistent brand presentation. Especially users who visit your site frequently benefit from an appealing and quick recognition in the browser tab or on the home screen.
Basics of favicon integration
A favicon is a small icon that appears in the browser tab, in bookmarks, mobile start screens and Windows tiles. To ensure that it is displayed correctly everywhere, you should use the icon in several File formats provide: PNG, ICO, SVG and Apple Touch Icon. Each of these formats is used in different situations. Modern browsers prefer PNG, while older systems fall back on favicon.ico. SVG is particularly suitable for high-resolution displays as it can be scaled without loss.
You should save the required files directly in the web root of your page. This avoids problems with relative path specifications and increases the loading speed. A 180×180 PNG is recommended for iOS home screens, Android typically uses 192×192. Fallback strategy with favicon.ico to operate older browsers and avoid incorrect loading attempts.
You should also name your favicons clearly and note the sizes in the file names, for example favicon-32×32.png or apple-touch-icon-180×180.png. This allows you to quickly identify which icon is intended for which purpose if required. This clear structure in the file system supports you when updating individual graphics and reduces the risk of confusion.
Also note that some browsers stubbornly keep favicon files in the cache. After making changes, it can be useful to clear browser caches or change the file names slightly to ensure that your visitors always see the latest icon.
Favicon for iOS, Android and Windows
Each operating system uses its own mechanisms for displaying icons. iOS uses so-called Apple Touch Icons. These icons appear when users add their website to the home screen. Android mainly works with web app manifests and prioritizes the 192×192 PNG standard. Windows, on the other hand, can adjust tile sizes and colors via the browserconfig.xml file. The following applies to all platforms: clean references and clear file naming create functioning displays.
For Apple, you should also specify a mask icon. This icon is used in Safari on iOS and macOS - primarily in dark mode. Use SVG with a mask-icon-tag in the head area, supplemented by the attribute color. Android devices require a simple, well-structured manifest.json. This file defines icons, short and long titles of your web app as well as a start behavior.
An important point with iOS and Android is the ability to make your web application look like a native app. The icon is often displayed without a browser UI and should therefore be designed with particular care. Use the specific sizes recommended by Apple and Google to avoid unsightly scaling or borders. Also consider the rounded corners of the icons on many Android launchers as well as the touch icons on iOS devices, which are often rounded or masked as well.
HTML code for various icons
In order for the browsers and operating systems to load the correct files, you must use suitable tags in the area of your page. These refer directly to the respective file types. A sensible minimum configuration includes:
| Icon type | file format | HTML tag |
|---|---|---|
| Standard favicon | .ico | <link rel="icon" href="/favicon.ico"> |
| High-Resolution Browsers | PNG (32×32, 192×192) | <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> |
| Apple Touch Icon | PNG (180×180) | <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
| Safari pinned tab | SVG (mask-icon) | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> |
| Manifesto (Android) | manifest.json | <link rel="manifest" href="/site.webmanifest"> |
Depending on your layout or corporate design, you can use the color-attributes or the theme_color in the manifest. Make sure that the colors displayed match your page so that users get a perfect, consistent impression. You can also add several icons in different sizes so that browsers automatically select the best variant.
If you deliver your site in multiple languages or serve different country domains, you should note that favicons are independent of the content. Global availability from a shared directory is usually more practical than storing separate icons for each language version. This saves space and avoids inconsistencies during maintenance.
Manifest file: site.webmanifest
The manifest is a central building block for Android users and progressive web apps. It defines the title, background color and icons. It is important to provide at least a 192×192 PNG and ideally a 512×512 PNG for the app launcher. Place the file in the root directory and link it in the head with a link rel="manifest".
A simple structure of the site.webmanifest can look like this:
{
"name": "Example page",
"short_name": "example",
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"background_color": "#ffffffff",
"theme_color": "#ffffffff",
"display": "standalone"
}
With regard to Progressive Web Apps, the manifest can also include fields such as scope or start_url included. The scope-attribute determines which part of your website the web app is restricted to. With start_url you define which page is displayed when the app is launched. For larger web projects in particular, a well-structured manifest makes administration easier and ensures that users can use your website as an almost native app.
Don't forget to regularly check whether the icons, colors and titles still correspond to your current corporate design. The manifest is quickly adapted, but browser caches can use outdated data for longer. Sometimes it helps to use a new file name, for example site-2.webmanifestif fundamental elements have changed.
Integrate favicon correctly with WordPress
If you use WordPress, you can insert your favicon via the Customizer. Alternatively, you can upload your icons via FTP and add all <link>-entries manually in the header.php or via a corresponding plugin. Make sure you use the correct File paths and then clear the cache.
Also take into account the site.webmanifest for Android and the mask-icon for Safari. This ensures that all systems use the appropriate display format. Automatic help can a favicon generator which delivers suitable formats and code snippets.
Some WordPress themes or page builders already have their own settings for favicons. However, this configuration may be overwritten when you change themes or make major updates. Therefore, keep your favicon files to hand and document which URLs you have stored in the theme or plugins.
Also focus on providing the correct sizes. WordPress sometimes scales images automatically, resulting in blurred icons, for example. After uploading, be sure to check in the media library that the files are stored in the original resolution. If a plugin controls the favicon functions, it may help to deactivate the plugin and reactivate it to force a reload.
Avoid mistakes during implementation
Many sources of error can be avoided by careful checking. Often certain Size variants or the icons are in incorrectly nested folders. After integration, check whether the icons are displayed correctly in tabs, mobile home screens and when pinning. Use browser developer tools or online favicon checkers to do this.
Remove old versions of the favicon from your server to avoid inconsistent displays. Check for expired caches, as browsers like to save favicons for the long term. Guide users to your updates via a clean URL structure.
Confusion can also arise if a subdomain is used that still has an old favicon or an older manifest file. Therefore, test all domain variants (www, non-www, https) and make sure that the same icons are integrated everywhere. Subsequent changes can then be made more quickly and in a more structured way.
If your icons are not displayed, we recommend taking a look at the browser's DevTools to intercept any error messages. Depending on the browser, a missing favicon is only mentioned in the console. Possible error sources are an incorrect path, a missing file extension or non-existent read and write permissions on the web server.
Design recommendations for favicons
A functioning favicon remains simple and immediately recognizable. Keep the design rich in contrast and use sufficient free space. Preferably work with SVG files if scalability is required. Icons should be square and contain clearly defined shapes. Avoid writing or fine lines - they are illegible, especially on small formats.
The 48px grid provides a good orientation. When designing, start with a 512×512 graphic format and scale it down to the required sizes. Then test the display on different end devices. Retina displays also require sharp lines - this is where vector graphics really shine.
For logos or lettering, it is advisable to create a simplified version. Remove all details that are no longer recognizable in small pixel dimensions. Minimalist icons with strong contrast are best. A silhouette or an implied letter shape is often sufficient to achieve recognition value.
The choice of color is just as important. Avoid using too many colors, as favicons that are too colorful can quickly appear unruly. With a view to dark mode or differently colored browser windows, you can also consider whether there is a monochrome variant in your corporate design that is clearly visible everywhere.
Additional options for Windows systems
For full compatibility under Windows, you can create additional files. The browserconfig.xml defines, for example, the color and design of tiles for 'Windows 8' start menus. This file is optional, but useful for higher desktop user rates. Add suitable Meta tags in the head of your page:
Make sure that your PNG icons are available in the sizes 70×70, 150×150, 310×310. Generate these variants using a favicon generator or common image editing tools. Your browserconfig.xml then refers to these resources.
Even with Windows 10 and Windows 11, it is still possible to place tiles that display the favicon on the start screen. Depending on how your users work with Windows, this feature can still be useful. A clear, consistent presentation on all Microsoft platforms ensures a professional appearance that increases your recognition value.
Further practical information and advanced tips
If you operate your website as a progressive web app, you should go one step further. In addition to the favicon and the manifest file, the service worker plays a crucial role. This ensures that the icons also work reliably in offline mode and when added to the start page. In some cases, a well-configured service worker can also enable new icon variants to be preloaded quickly as soon as they are available on the server.
If you have several subdomains or offer different brands under the same main umbrella, you can consider designing favicons with a separate appearance for each. This will make it easier for your visitors to distinguish the tabs in the browser. In a professional context, it may make sense to slightly modify the corporate design of each subdomain so that the origin remains clearly recognizable.
Another focus is on performance: the file size of your favicon should be as small as possible so as not to have a negative impact on loading times. A PNG favicon can often be compressed without losing quality. For very complex shapes, it is worth switching to SVG on a trial basis if the browser and application scenarios allow this. However, make sure that the mask-icon and the valid MIME types.
A favicon can also help with accessibility. Although favicons do not use alt texts, a clear, distinct color contrast makes it easier for visually impaired users to know where they are. Clear icons help to ensure that no one is at a loss as to which tab they have open or which PWA is on their home screen.
Why the effort is worth it
A functioning favicon signals quality and professionalism - both for visitors and for search engines. It improves the user experience in browsers, on mobile devices and in progressive web apps. Through extensive maintenance you get a Uniform appearance across all platforms. The effort involved can be significantly reduced with tools.
Generate your favicons completely in advance, check cache effects and test different devices. This will help you avoid incorrect displays, outdated icons or empty tiles. If you want to appear professional, you should take the topic of favicons seriously - and implement them carefully.
