To add a favicon to a website, you need three files and a few lines of HTML: an SVG icon, a 32x32 ICO file for older browsers, and a 180x180 PNG named apple-touch-icon.png for iPhones and iPads. Link all three in the <head> of every page, upload the files to your site's root folder, and clear your cache when you test. The rest of this guide shows exactly what to make, what to name it, how to check it and why a small square image does more work for your business than most owners expect.
TL;DR
- A favicon is the small icon in browser tabs, bookmarks and, when Google chooses to show it, search results. A touch icon is the image used when someone saves your site to a phone home screen.
- A minimum setup is an SVG, a 32x32 ICO and a 180x180 apple-touch-icon PNG, each linked in the
<head>. - Google needs a square favicon of at least 8x8 pixels and recommends larger than 48x48 pixels. Its URL should stay stable.
- Most "my icon won't show" problems come from caching, a wrong file path, a blocked file or a mismatch between the link tag and the real image.
- Design the icon for tiny sizes: one simple shape or letter, strong contrast, no fine detail.
Table of Contents
- What favicons and touch icons are, and where people see them
- Which files and sizes you actually need
- How to add a favicon to your website
- Adding a favicon in a website builder or CMS
- Designing an icon that works at 16 pixels
- Why local businesses should care
- Fixing icons that will not show
- A quick pre-launch checklist
- Our perspective
- Get the details right with a site built for mobile
- FAQ
- Sources
What favicons and touch icons are, and where people see them
A favicon is a small image tied to your website. Browsers show it in tabs, bookmark lists and history. According to web.dev's guide to icons and browser colors, favicons can appear in browser tabs, in recent-app switchers and on new-tab or recently visited pages.
Search is the other place that matters for a local business. Google says it may display your site's favicon in search results so people can recognize a brand quickly. Google does not promise it will appear even when every guideline is met, but a clean, on-brand icon gives you the best chance.
A touch icon is a different job. When a visitor saves your page to the home screen of an iPhone or iPad, Safari uses an Apple touch icon to represent the site, which web.dev also notes in the guide above. It works like an app icon, except it opens your website.
Think of the two as one family:
| Icon | Where it shows | Typical file |
|---|---|---|
| Favicon | Browser tabs, bookmarks, history, sometimes Google results | favicon.svg, favicon.ico |
| Apple touch icon | iPhone and iPad home screens | apple-touch-icon.png |
| Android home screen icon | Android shortcuts and installed web apps | PNG listed in a web manifest |
For a plumber, a roofer, a restaurant or a freelance designer, this is brand recognition in a very small box. A visitor with fifteen tabs open finds you by that icon. A customer who bookmarks your menu or booking page sees it every time they scroll their phone.
Which files and sizes you actually need
You will find guides that list twenty or more icon files. You do not need them. A modern setup is much shorter.
The Ontario Design System's favicon guidance describes a multi-format approach: an SVG for scalable, sharp rendering, a 32x32 ICO file for older browsers, and PNG files at specific sizes for platforms, such as 180x180 for Apple devices and 192x192 for Android. That is a good practical baseline.
The minimum setup
- favicon.svg: a vector version of your icon. It stays sharp on any screen density.
- favicon.ico: a 32x32 file for older browsers and for tools that still request /favicon.ico by default.
- apple-touch-icon.png: a 180x180 PNG for iPhone and iPad home screens.
If you want your site to behave well when someone installs it from Android, add a 192x192 PNG and reference it from a web app manifest. Most small business sites do not need more.
What Google requires
Google's favicon guidelines are specific, and they matter if you want the icon in search:
- The image must be square, a 1:1 ratio, and at least 8x8 pixels. Google recommends going larger than 48x48 pixels so it looks good on different surfaces.
- Supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF.
- Google Search supports one favicon per site, where a site is defined by the hostname. So
www.example.comandshop.example.comcan have different icons. - Googlebot must be able to crawl your home page, and Googlebot-Image must be able to crawl the icon file. Do not block either in robots.txt.
- The favicon URL should be stable. Do not move it around.
Notice what is absent: SVG is not on Google's supported list. That is one reason to keep an ICO or PNG alongside the SVG. Use the SVG for browsers that support it and a bitmap file as the dependable fallback.
How Apple picks a size
Apple's documentation on configuring web applications says devices use the most appropriate size available. If there is no exact match, the system picks the smallest icon larger than the recommended size, or the largest one you provide if none are larger. In practice, one clean 180x180 PNG is enough, and it scales down well on older devices.
The same page notes that Safari on iOS 7 and later does not add visual effects to touch icons, so the old -precomposed suffix is not needed.
How to add a favicon to your website
The process is the same on any site that lets you edit the page head. Here it is step by step.
Step 1: Make the master image
Start with a square canvas. Use your logo mark, not the full logo with the business name. A letter, a symbol or a simple shape reads at 16 pixels. A long wordmark does not.
Save a vector version as SVG. Then export a 180x180 PNG for Apple and a 32x32 version for the ICO. Many free generators and design apps can output the ICO from a PNG.
Step 2: Upload the files to the root folder
Place favicon.svg, favicon.ico and apple-touch-icon.png at the top level of your site, so they load at yourdomain.com/favicon.ico and so on. Browsers may fetch icons from the root automatically, but as MDN's documentation for the link element explains, explicit HTML links protect you if those conventions change.
Step 3: Add the link tags
Paste this inside the <head> of every page, or in your site's shared header template. This matches the pattern in the Ontario Design System guidance:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
If you offer more than one Apple icon, Apple's documentation says to add the sizes attribute, for example sizes="180x180", to each link element so the device can choose.
Step 4: Check your Content Security Policy
If your site sets a Content Security Policy, MDN notes that the img-src directive must allow the favicon files, or they will fail to load. This catches a lot of developers on locked-down sites.
Step 5: Test it
Open your site in a private window and look at the tab. Then type the direct file URL, such as yourdomain.com/favicon.ico, to confirm it loads. Finally, on an iPhone, use Safari's Share menu and Add to Home Screen to see the touch icon.
Adding a favicon in a website builder or CMS
You may not touch HTML at all. Most site builders and content management systems have a settings field for the icon. You upload one image, and the platform writes the link tags for you. In the IONOS website editor, for example, the Website Icons section of Settings is where the favicon and touch icon go, and other builders use a similar spot under site settings or appearance.
Two cautions apply whichever tool you use. First, upload a square image, large enough to scale down cleanly. A 512x512 PNG is a common choice for a single upload. Second, view the page source afterward and confirm the link tags are in the head. Some builders only create a single small icon and skip the Apple touch icon, which leaves iPhone users with a screenshot-style thumbnail.
If you are deciding whether a free page builder is enough for your business, this overview of Google Sites for small business owners explains where it fits. Free tools often limit how much control you have over the head of the page, which is exactly where favicon tags live.
Designing an icon that works at 16 pixels
The technical files are the easy part. The harder part is making an image that still means something when it is the size of a grain of rice.
Keep one idea. A single letter, a simple mark or a bold shape. If your logo has a flame, a hammer and a house, pick one.
Use strong contrast. Tabs can be light or dark. A pale gray icon on a white tab disappears. Test on both.
Avoid fine detail and thin lines. Anything under two pixels wide blurs at small sizes.
Give the touch icon breathing room. On a home screen, the system rounds the corners and may crop edges. Keep the important part of the artwork away from the border and use a solid background rather than transparency. A transparent PNG can turn up with a black background on iOS, which looks like a mistake.
Consider dark mode. SVG favicons can respond to the prefers-color-scheme media query, which lets a dark icon switch to a light one in a dark browser theme. Webflow's help center covers this in its favicons and webclips article, and it applies to any hand-built site that uses an SVG icon.
Match your brand. Use the same color and shape as your logo and site header. Consistency is what turns a tiny image into recognition.
Why local businesses should care
A favicon is not a ranking factor you should chase. It is a trust and recognition detail. Still, think about how a customer in Houston, Austin or Dallas looks for a service. They search on their phone, open several results, compare, and come back. A branded icon in a tab strip or a search result tells them quickly which business they were looking at, and a missing icon, the generic globe or blank page, makes a site look unfinished.
For specific trades the details differ:
- Roofing companies get stormy-weather traffic spikes. People open many roofers' pages at once, so a recognizable icon helps them return to yours.
- Restaurants benefit from the touch icon. Guests save the menu or reservation page to their home screen, and a crisp icon makes it feel like an app.
- Freelance designers are judged on polish. A sloppy or missing favicon on a portfolio site undercuts the pitch.
- Local service providers who rely on bookmarks and repeat bookings gain from the same recognition.
Fixing icons that will not show
Icon troubleshooting is mostly about caching and paths. Work through these in order.
The old icon keeps appearing
Browsers cache favicons aggressively. After you replace the file, close the tab, clear the browser cache or test in a private window. If it still shows the old image, rename the file (favicon-v2.svg) and update the link tag, or add a version query string to the URL.
Chrome ignores a changed app icon
If your site is installed as a progressive web app, icon changes in the manifest do not always apply right away. web.dev's guide to manifest updates explains that Chrome checks the manifest on launch if it has not checked in the previous 24 hours, and that desktop icon changes are not supported through that update path. Reinstalling the app is the reliable fix on desktop.
The Apple icon does not appear
Check three things. Is the file really at the path in your link tag? Is it a PNG, not an SVG? And is your site's HTTPS certificate trusted? An Apple developer forum thread on apple-touch-icon not showing describes cases where Safari on iOS failed to load the icon because the server's SSL/TLS setup, such as a self-signed certificate, was not trusted by the device.
Google still shows a generic icon
Confirm that Googlebot can crawl your home page and the icon file, that the icon is square and larger than 48x48 pixels, and that its URL has not changed. Then wait. Google states a favicon is not guaranteed to appear even when you follow the guidelines, and updates can take time.
The link tag and the file disagree
A tag that says type="image/png" and points to an ICO file, or a sizes value that does not match the image, can confuse browsers. Keep the declared type, size and URL in line with what the server actually returns.
A quick pre-launch checklist
- favicon.svg, favicon.ico and apple-touch-icon.png are in the root folder.
- All three link tags are in the head of every page.
- The icon is square, simple and readable at 16 pixels.
- The touch icon is 180x180 with a solid background.
- robots.txt does not block the icon files.
- Your Content Security Policy allows images from the icon location.
- You tested in a private window, on an iPhone and on an Android phone.
Our perspective
We treat the favicon as part of a site's first impression, not a last-minute extra. When we build a site, the icon, the touch icon and the head tags go in during the build, because those small details are part of what makes a business look established on a phone.
Most of the small business sites we are asked to improve have the same pattern: a good logo on the page, but a missing or blurry tab icon and no touch icon at all. It is a ten-minute fix when you know the three files, and it is a sign that the rest of the site was assembled carefully, too.
That is how we work. You deal directly with the founder, we build custom sites rather than templates, you keep full ownership of your site and content, and the scope and pricing are clear up front. Mobile clarity is the center of it: how the site looks in a tab, on a home screen, in a Google result and on a thumb-sized screen.
Dylan
Get the details right with a site built for mobile
Icons are one piece of a site that has to work on phones, turn visitors into calls and bookings, and show up in local search. We build custom websites for Texas businesses with mobile-first layouts, clear contact paths, Google Business integration and speed work, and we handle the head tags, icons and touch icons as part of the build.
Our published pricing starts at $500 for a Starter Website, $1,200 for a Growth Website and $2,500 for a Custom Business Website, with a $250 project deposit. If your current site needs a refresh, see our website redesign and custom website options, or read how our responsive website development keeps every page sharp on a phone.
FAQ
What size should a favicon be?
Provide a 32x32 ICO file for broad compatibility and an SVG for sharp scaling. Google requires a square image of at least 8x8 pixels and recommends going larger than 48x48 pixels. For iPhones and iPads, add a 180x180 PNG touch icon.
Do I need both a favicon and an Apple touch icon?
Yes, if you want your site to look right everywhere. The favicon covers tabs, bookmarks and search, while the touch icon is what Safari uses when someone adds your site to an iPhone or iPad home screen. Without it, iOS falls back to a miniature screenshot of the page.
Where do I put the favicon file?
Upload it to your site's root folder and link it in the <head> of your pages. Browsers may look in the root on their own, but an explicit <link rel="icon"> tag is safer because it does not depend on that convention.
Why is my favicon not showing in Google search?
Check that the icon is square, larger than 48x48 pixels, in a supported format and crawlable, and that its URL is stable. Google says a favicon is not guaranteed to appear even when the guidelines are met, and changes can take time to show.
Can I use my full logo as a favicon?
It usually does not work. Full logos with business names turn into an unreadable smudge at 16 pixels. Use a simple mark, initial or symbol from your brand, and keep the colors consistent with your site.
Sources
- Define a favicon to show in search results, Google Search Central
- Configuring Web Applications, Apple Developer
- Icons and browser colors, web.dev
- Favicon, Ontario Design System
- The link element, MDN Web Docs
- Favicons and webclips, Webflow Help Center
- Handling manifest updates in Chrome, web.dev
- apple-touch-icon not showing, Apple Developer Forums
- Google Sites for small business owners