Where favicons show up
They appear in browser tabs, bookmark lists, history, the address bar on some browsers, mobile home screens when someone saves your site, and in Google's mobile search results next to your site name. Because the display is tiny, simple designs read more clearly.
Design for tiny sizes
Take the simplest part of your logo, often a single letter or symbol, and place it on a plain or transparent background. Fine detail disappears at sixteen pixels. Use strong contrast and few colors. Test how it looks on both a light and a dark browser theme, since a dark icon can vanish on a dark tab bar.
Make the artwork square. Leave a little padding so rounded masks do not clip the edges.
Files to provide
A modern set is small: an SVG icon, which scales and can adapt to dark mode; an ICO file of 32 by 32 pixels for broad compatibility; a 180 by 180 PNG for Apple devices; and 192 and 512 pixel PNGs listed in a web app manifest for Android and installed apps. Name them clearly and keep them light.
Do not worry about producing every historic size. Fewer, well-made files cover current devices.
Adding them to your site
Link the files in the head of your pages with link rel elements. Place an ICO at the root as favicon.ico, since some tools request it automatically. In WordPress, the Customizer has a Site Icon field. Builders usually include a favicon upload in site settings.
Clear your browser cache or use a private window when testing, because browsers keep old icons stubbornly.
Google search requirements
Google's guidance for showing a favicon in results asks for a single favicon file per site that is a multiple of 48 pixels square, a crawlable file and an icon that is a suitable representation of the brand. The address must not change often, and the icon must not be inappropriate. It may take days or weeks for a new icon to appear.
Check Google's current documentation, since rules can be updated. Make sure robots.txt does not block the icon file.
Common favicon mistakes
Using a wide logo that turns into an unreadable smudge when squeezed to a square. Forgetting a transparent background so a white box shows on dark tabs. Uploading a huge file that slows the first request. Leaving the builder's default icon in place, which makes your site look like a template. Changing the icon often, which confuses returning visitors and search systems.
Make the favicon a one-time design decision, then check it after any theme change, since themes sometimes reset the site icon.
Add the site to a phone home screen, bookmark it on a desktop browser and view it in both light and dark themes. If any look off, adjust padding or contrast and test again.
Common questions
Why is my old favicon still showing?
Browsers and search engines cache icons heavily. A cache clear and some patience usually solve it.
Can I use my full logo?
Only if it stays readable at tiny sizes. Most logos need a simplified mark.
Do I need an SVG favicon?
It is optional, but it scales cleanly and supports color changes for dark mode.
This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking.