How to Add a Favicon to Your Website: Step-by-Step Guide
Adding a favicon to your website is one of the easiest ways to make your site look more professional and polished. The good news is that it's much simpler than most people think. Whether you're using WordPress, Shopify, a custom HTML website, or any other platform, you can have a favicon up and running in minutes.
This guide walks you through the entire process, from creating your favicon to uploading it and verifying it works correctly.
What You'll Need Before Starting
Before you begin adding a favicon to your website, gather a few things.
A favicon image file is the most important requirement. This can be in PNG, ICO, SVG, GIF, or JPEG format. PNG format is recommended for most websites because it's easy to create, produces high quality results, and works in all modern browsers. Your favicon image should be at least 16x16 pixels, though 32x32, 64x64, or 256x256 pixels is better for modern displays.
Access to your website's file system or content management system is necessary. You'll need to be able to upload files or edit your website's code. If you use WordPress, you can upload a favicon through the customizer. If you use Shopify, there's a settings page for favicon. If you use a custom HTML website, you need access to your files via FTP or your hosting control panel.
A web browser for testing is also helpful. You'll want to verify your favicon appears correctly after uploading it.
Optionally, you might want a favicon generator or design tool to create your favicon if you don't already have one. Many free favicon generators are available online that can help you create a simple favicon from scratch.
Step 1: Create or Prepare Your Favicon Image
Your first step is to have a favicon image ready. You have a few options.
If you already have a logo or icon you want to use, you can convert it to a favicon. Use design software like Photoshop, Illustrator, or even free tools like GIMP or Canva. Take your existing image and resize it to favicon dimensions. Keep in mind that favicons are very small, so your image should be simple and clear. Complex designs with lots of details won't work well at favicon sizes.
If you don't have an image yet, you can create one from scratch. Use design software or an online favicon generator. Favicon generators typically let you choose colors, add text or initials, select shapes, and see a preview of how your favicon will look at different sizes. This is an easy way to create a professional favicon without design skills.
If you want a truly custom favicon, you could hire a designer to create one. Designers understand how to simplify images for favicon display while maintaining your brand identity.
Regardless of which approach you use, save your favicon file in a standard format. PNG format is recommended. Make sure the filename is simple and descriptive, like "favicon.png" or "site-icon.png". Some hosting environments are case-sensitive, so use lowercase letters in your filename.
Step 2: Determine Your Website Platform and Methods
Different website platforms have different processes for adding favicons. Let's cover the most common scenarios.
WordPress websites can add favicons through the customizer. Most modern WordPress themes include favicon options in the customization panel. You access this through the WordPress admin dashboard, find the customizer, look for the "site identity" or "logo" section, and upload your favicon image. WordPress handles the technical details automatically.
Shopify websites have a favicon option in the settings. Log in to your Shopify admin, go to Settings, then Online Store, then Preferences. You'll find a field to upload your favicon image. Upload your file and save.
Wix, Squarespace, Weebly, and similar website builders typically include favicon upload options in their customization panels. Look for settings related to site identity, branding, or customization. Most of these platforms simplify the process significantly.
Custom HTML websites or those hosted on traditional web hosting require manually adding the favicon file to your server and referencing it in your HTML code. This involves more technical steps but is still straightforward.
Step 3a: Method 1 - Adding Favicon via HTML Code (Modern Approach)
If you have access to your website's HTML code, adding a favicon via HTML is the most flexible method.
Locate the head section of your website's HTML. This is typically in a file called index.html or a header template file. The head section is the part of HTML code between the opening tag and the opening tag.
Add this line of code within the head section:
<link rel="icon" type="image/png" href="/path-to-your-favicon/favicon.png" sizes="any">
Replace "/path-to-your-favicon/favicon.png" with the actual path to your favicon file. If your favicon is in the root directory of your website, you can simply write:
<link rel="icon" type="image/png" href="/favicon.png">
If your favicon is in a folder called "images", write:
<link rel="icon" type="image/png" href="/images/favicon.png">
For multiple favicon sizes and formats, include multiple link tags:
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-256.png" sizes="256x256">
For SVG favicons, use:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Save your HTML file after adding the code. If you're using a CMS like WordPress or Drupal, find where to edit the header template (often in a child theme's header.php file) and add the code there.
Step 3b: Method 2 - Root Directory Favicon.ico File
If you don't want to edit HTML code, you can upload a favicon.ico file directly to your website's root directory. Browsers automatically look for a file called favicon.ico in the root directory, so if you place your favicon there with the correct filename, it will work without any HTML code changes.
To use this method, convert your favicon image to ICO format. You can use online conversion tools to convert PNG or other formats to ICO format.
Upload the favicon.ico file to your website's root directory using FTP or your hosting control panel's file manager. The root directory is the main directory of your website, typically called "public_html" or "www" depending on your hosting provider.
After uploading, clear your browser cache and visit your website. The favicon should appear in your browser tab.
This method works, but the HTML code method is more flexible because it allows you to use modern formats like PNG and SVG instead of being limited to ICO format.
Step 4: For iOS and Apple Devices (Apple Touch Icon)
If you want your website to display a custom icon when users save your site to their iPhone or iPad home screen, you need to add an Apple touch icon.
Create an Apple touch icon image. This should be at least 180x180 pixels for the latest Apple devices. You can use the same design as your regular favicon but at a larger size.
Add this code to your HTML head section:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Some designers prefer to add multiple sizes for compatibility with older devices:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png">
Upload your Apple touch icon files to your website and update the paths in the code if necessary.
Step 5: For Android and Progressive Web Apps
If you have a Progressive Web App or want to optimize for Android devices, create a manifest.json file in your website's root directory.
This file specifies icons that display when your website is installed as an app. Create a file named manifest.json and include:
{
"name": "Your Website Name",
"short_name": "Your Site",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Then add this line to your HTML head:
<link rel="manifest" href="/manifest.json">
Create icon images at the sizes specified (192x192 and 512x512 pixels) and upload them to your website.
Step 6: Upload Your Favicon Files to Your Website
Once you've prepared your code and images, upload everything to your website.
If using FTP, connect to your website via FTP using your hosting credentials. Navigate to your website's root directory or the folder specified in your HTML code. Upload your favicon files here.
If using your hosting control panel's file manager, log in to your hosting account, find the file manager, navigate to your root directory, and upload your favicon files.
If using WordPress or another CMS with a built-in upload function, use the media library or customizer to upload your favicon.
After uploading, verify the files are in the correct location. The path in your HTML code should match the actual file location.
Step 7: Test Your Favicon
Testing ensures your favicon is working correctly.
Visit your website in a web browser and look at the browser tab. You should see your favicon displayed next to your website's title. If you see your favicon immediately, great! If not, try the next steps.
Clear your browser cache. Browsers cache favicons, so if your browser downloaded an old favicon before you added the new one, it might still be showing the old version. Clear your browser cache and reload your website.
Try a different browser. If your favicon appears in Chrome but not Firefox, there might be a compatibility issue specific to one browser.
Check your browser's developer tools. Most modern browsers have built-in developer tools. Open the developer tools (usually by pressing F12), go to the Network tab, and look for favicon requests. This shows whether your browser is finding the favicon file and what status code it's receiving.
Test on your phone. Add your website to your home screen and verify the icon appears correctly on your mobile device.
Use an online favicon checker tool. These tools analyze your website and verify that all favicon files are configured correctly, files are accessible, and favicons display properly. The tool provides a detailed report showing what's configured correctly and what needs fixing.
Step 8: Troubleshooting Common Favicon Issues
If your favicon isn't showing, several common issues might be the cause.
404 Error on Favicon means the file isn't found. Verify the file path in your HTML code matches the actual file location. Check the filename for typos and ensure it's using the correct case if your hosting is case-sensitive.
Cache Issues are common when updating favicons. Clear your browser cache completely, not just cookies. Some browsers cache favicons aggressively. Try visiting your site in an incognito or private browsing window, which doesn't use the cache.
Incorrect File Path happens when the path to the favicon doesn't match where the file is actually located. Double-check your file path. If your favicon is in a folder called "images", make sure your code says "/images/favicon.png" and not just "/favicon.png".
Wrong File Format can cause issues. Make sure your favicon file is actually in the format you specified in the code. If you're saying type="image/png" but the file is actually a JPEG, that could be the problem.
Special Characters or Spaces in the filename can cause issues. Use simple, lowercase filenames without spaces or special characters.
Hosting Permission Issues might prevent your favicon from displaying. Some hosting environments have permission restrictions. Contact your hosting provider if you suspect this is the issue.
Step 9: Make Sure Favicon Updates Display
If you change your favicon later, make sure visitors see the new version.
Change your favicon file name or add a version number. Instead of favicon.png, use favicon-v2.png or favicon-2024.png. Update the HTML code to reference the new filename.
Use cache-busting query parameters. Add a query string to your favicon URL:
<link rel="icon" type="image/png" href="/favicon.png?v=2">
Change the version number whenever you update the favicon. This tells browsers to download the new file instead of using the cached version.
Communicate the change to your users. In some cases, especially for widely recognized brands, let users know you've updated your favicon so they understand if they notice the change.
FAQ About Adding Favicons
How long does it take for my favicon to appear? Your favicon should appear immediately in your browser after uploading it. If it doesn't, clear your cache. For search engines to pick up your favicon and display it in search results, it typically takes a few days to a few weeks depending on how often they crawl your site.
Can I change my favicon later? Yes, you can change your favicon anytime. Upload a new favicon file and update your HTML code if necessary. Note that browsers cache favicons, so users might see the old version temporarily until their cache clears.
What size should my favicon be? Minimum 16x16 pixels, but 32x32, 64x64, or 256x256 pixels work better for modern displays. For Apple touch icons, use 180x180 pixels. For Android PWA icons, use 192x192 or 512x512 pixels.
Do I need multiple favicon files? Not necessarily. A single PNG file works across most browsers and devices. However, providing multiple sizes and formats ensures optimal display on different platforms.
Will adding a favicon slow down my website? No, favicons are very small files and don't meaningfully impact your website's load time or performance.
Can I use an animated favicon? Technically yes with GIF or SVG formats, but browser support is inconsistent. Most browsers don't animate favicons in tabs. Stick with static favicons for reliability.
What if my website uses a subdomain? Each subdomain can have its own favicon. Add the favicon to the root directory of each subdomain and reference it in the HTML code as usual.
Final Thoughts
Adding a favicon to your website is a quick, easy way to improve your site's appearance and professionalism. It takes just a few minutes but makes a noticeable difference. Whether you're using a CMS that simplifies the process or manually editing HTML code, the steps are straightforward.
Once your favicon is in place, you'll see it in your browser tabs, bookmarks, browser history, and eventually in search engine results. It's a small detail that contributes to your overall brand presentation and user experience.