How to Add a Favicon to Your Website - Step by Step Guide
Learn how to add a favicon to any website including HTML, WordPress, Shopify, and more. Complete installation guide with code examples.
🚀 How to Add a Favicon to Your Website - Complete Installation Guide
Adding a favicon to your website is a simple process that significantly improves your site's professional appearance. This comprehensive guide covers every method for installing favicons across different platforms.
💻 Adding Favicon to HTML Websites
For standard HTML websites, adding a favicon requires just one line of code in your <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Place your favicon.ico file in your website's root directory (the same folder as your index.html file), and add the above code between your <head> tags. Most browsers will automatically detect a favicon.ico file in the root directory, but explicitly linking it ensures compatibility.
🎨 Alternative Favicon Formats
While .ico is standard, you can also use PNG files for modern browsers:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
For scalable vector graphics that look sharp on all displays:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
📝 Adding Favicon to WordPress
WordPress makes favicon installation extremely easy through its built-in customizer:
- Log into your WordPress dashboard
- Navigate to Appearance → Customize
- Click on "Site Identity"
- Find the "Site Icon" section
- Click "Select Site Icon"
- Upload your favicon image (minimum 512x512 pixels recommended)
- Crop the image if needed
- Click "Publish"
WordPress automatically generates all necessary favicon sizes and adds the proper HTML code to your site. The platform recommends uploading a 512x512 pixel image for best results across all devices.
🛒 Adding Favicon to Shopify
Shopify also provides a simple interface for favicon uploads:
- From your Shopify admin, go to Online Store → Themes
- Click "Customize" next to your active theme
- Click "Theme Settings" at the bottom of the left sidebar
- Navigate to the "Favicon" section
- Click "Select image" and upload your favicon
- Save your changes
Shopify accepts JPG, PNG, or GIF files and automatically converts them to the proper favicon format.
🌐 Adding Favicon to Wix
For Wix websites:
- Access your site's dashboard
- Click "Settings" in the left menu
- Select "Manage" under Site Favicon
- Upload your image (recommended size: 512x512 pixels)
- Click "Save"
✅ Verifying Your Favicon Installation
After adding your favicon, clear your browser cache and reload your website. The favicon should appear in your browser tab. If it doesn't show immediately, try:
- Hard refresh the page (Ctrl+F5 or Cmd+Shift+R)
- Clear browser cache completely
- Check in a different browser
- Verify the file path is correct
- Ensure the image file isn't corrupted
📱 Multiple Device Support
For comprehensive device support, use our free favicon generator to create all necessary sizes automatically. Modern websites should include favicons for:
- Desktop browsers (16x16, 32x32)
- Apple touch icons (180x180)
- Android Chrome (192x192, 512x512)
- Windows tiles (144x144)
This ensures your website icon looks perfect whether visitors access your site from a desktop browser, mobile device, or save it to their home screen.
Related Topics
Ready to Create Your Favicon?
Use our free emoji favicon generator to create a professional favicon in seconds - no design skills required!
Start Creating Free Favicon