A favicon is a small detail that appears at several points in a visitor’s experience of your website. It can sit beside a tab title, appear in bookmarks and, with the right configuration, represent a shortcut on a phone. To support your visual identity, it needs to be designed for these settings rather than simply cropped from your main logo.
1. What your website icon does
A favicon helps visitors recognise your website among open tabs or find it again in their bookmarks. It does not replace your site name or page title; it adds a visual reference. A simple, consistent shape can be easier to recognise than a complete logo reduced until its details disappear.
However, “website icon” describes several related uses. The icon shown in a browser tab is not necessarily the same file used for a phone’s home screen shortcut. Browsers and operating systems may choose different resources depending on your website’s configuration and the features they support.
If you are starting a project, consider the icon alongside your name, colour palette and domain registration. This helps keep the visual reference connected to the identity you want to establish.
2. Why your full logo may not work
A logo can look excellent in a website header yet become unclear in a browser tab. Small lettering, fine lines, shadows and overlapping shapes can disappear when reduced. A horizontal logo is particularly difficult to fit into a square without making its main feature too small.
Create a dedicated version rather than simply exporting a smaller copy of the original:
- Choose a recognisable symbol, initial or simple monogram.
- Remove taglines and details that become indistinguishable.
- Use clear contrast between the symbol and its background.
- Leave space around the design so it does not feel cramped.
- Check the image against both light and dark backgrounds.
View the exported image at its actual display size, not just enlarged in an editor. If you only recognise it when zoomed in, simplify it further. Transparency can be useful, but a pale design may disappear against a light background, while a dark symbol can lose definition in a dark interface.
3. Which files to prepare for browsers and phones
Start with a square source image that is sufficiently large, or use a vector original, then export the versions you need. Enlarging a tiny image will not recover missing detail and can make the result look blurred.
For tabs and bookmarks
ICO remains useful for compatibility and can contain several sizes in one file, such as 16 × 16 and 32 × 32 pixels. PNG is another commonly used option. SVG can scale without losing geometric clarity, although support and behaviour vary between browsers and contexts. If you choose SVG, keep an appropriate raster alternative as well.
For a phone’s home screen
Apple devices commonly use a PNG declared as an apple-touch-icon, often at 180 × 180 pixels. For web applications that use a manifest, 192 × 192 and 512 × 512 pixel icons are common. The exact requirements depend on the platform and on how the website is saved or installed.
Some platforms apply their own shapes or cropping. If you prepare a maskable icon, follow its safe-zone requirements so that the essential part of your symbol stays clear of areas that may be cropped.
4. How to publish the icon without relying on a particular control panel
The method depends on your website software. Some platforms provide a site icon setting and generate variants automatically. Others require you to upload files and configure references in the HTML pages or web app manifest.
- Find the existing setting and check whether a theme or extension already defines an icon.
- Upload your files to stable, public locations that do not require a login.
- Configure the favicon references and, where relevant, the Apple touch icon and manifest.
- Check that the addresses point to the intended files and that the server sends suitable content types.
- Review pages across different sections of the website, not just the home page.
Some browsers may automatically look for a file called favicon.ico at the website root. However, this does not replace explicit configuration for every use. Also avoid duplicate declarations pointing to different versions of your icon.
If you use WordPress, first look for the site icon feature available in your current setup. For the wider project, you can also explore WordPress hosting options, although your hosting choice does not replace checking how your visual assets are configured.
5. How to check the icon in real situations
Opening the image directly confirms that the file is accessible, but not that every device will select it. Test each context that matters to your audience separately:
- Browser tabs: open the website in different browsers and assess the symbol’s clarity, including when tabs become narrow.
- Bookmarks: create a new bookmark and check the icon in the bookmarks list or toolbar.
- Phones: use the option to add the website to the home screen, where available, and inspect the result.
- Internal pages: confirm that articles, information pages and other sections use the same visual identity.
Test iOS and Android separately if both matter to your project. A simple home screen shortcut and an installed web app may follow different rules. Also check the name displayed beneath the icon: the right image does not make up for an unsuitable label.
6. Why a replacement favicon may take time to appear
A delay does not automatically mean that you uploaded the wrong file. Icons can be stored in several places, each with its own update behaviour:
- Browser caching: the old version may be reused, sometimes from a separate store for icons.
- Website or CDN caching: the same address may continue serving the previous file.
- Existing bookmarks and shortcuts: these may retain the image saved when they were created rather than updating immediately.
- Outdated page references: a theme, extension or manifest may still point to the old resource.
First check the file actually being served and the references present in the page. Then refresh the caches you manage and try a fresh browser profile. Private browsing can help with comparisons, but it is not a definitive test for every caching mechanism. On a phone, try creating a new shortcut as well.
Giving the replacement file a new name can help avoid reusing the resource at the old address, provided you also update its references. There is no universal deadline by which every bookmark and device will display the change.
7. Conclusion: check the symbol, not just the export
A useful favicon starts with a simple design, continues with suitable files and is confirmed through real-world testing. Keep an editable source, record where your icons are configured and test again after changes to your theme or visual identity. For guidance on services and their administration, you can consult the frequently asked questions. The practical measure is whether visitors can recognise your website wherever they save and reopen it.
