safari not loading favicon

How to refresh website favicons in Safari on Mac

A favicon is the small website logo you see in your browser tab. The ability to see favicons for websites in Safari is convenient. It lets you spot the site you want at a glance by seeing just the icon on your tab, in your bookmark list, and in your history.

But have you ever noticed favicons that go missing or are incorrect, showing the wrong icon? You can “refresh” the website favicons in Safari on Mac in just a few steps, and here, we’ll show you how.

Delete Safari’s favicon cache

If you’re experiencing favicons that aren’t right, maybe they have icons for different websites; clearing the cache and starting over is a good option. Here’s how to do that:

1) Close and quit Safari .

2) Using Finder, click Go > Go to Folder from the menu bar

3) Enter ~/Library/Safari/Favicon Cache/ in the pop-up window and go to this location.

4) Select all items in the cache folder and move them to the Trash . You can select all with the keyboard shortcut Command + A and then drag them to your Trash or right-click and pick Move to Trash.

5) Empty your Trash or delete those items from it. (For help with both options, check out our tutorial on How to Empty Trash on Mac .)

6) Open Safari .

The Safari favicon cache folder will rebuild itself as you visit websites. And you’ll need to visit the sites you have saved for the favicons to appear. But those that were incorrect or missing should show up correctly.

Related : How to skip the Trash and delete files on Mac immediately

Alternative option

If you’d rather try something else, there is one other option that may or may not work.

Open the website with the incorrect favicon in a private window in Safari. You can do this easily by right-clicking Safari in your Dock and selecting New Private Window or selecting File > New Private Window from the menu bar.

Visit the website in the private window, and when you return to your non-private Safari, the favicon may be correct.

The suggestion comes from the Apple Community Forum . This method did not work for the user with the question, nor did it work for me; however, it’s worth a try if you’d like.

Enabling favicons in Safari

As a reminder, you can enable favicons in Safari on older versions of macOS by following these simple steps:

1) With Safari open, click Safari > Preferences from the menu bar.

2) Select the Tabs tab.

3) Check the box for Show website icons in tabs to enable favicons.

Hopefully, either rebuilding the Safari favicon cache or opening a specific site in a private window works for you. And if you have another method to refresh favicons in Safari that works for you, please share it in the comments below!

Useful Safari tips:

• 11 tips to customize and personalize Safari on iPhone and iPad
• How to pin tabs in Safari on iPhone, iPad, and Mac
• How and why to update Safari, Chrome, and other web browsers on iPhone and Mac
• How to open multiple websites at once on Mac

Safari Favorites Icons Missing? 7 Ways to Get Them Back

If you buy through affiliate links, we may earn a commission at no extra cost to you. Full Disclosure Here…

Safari favorites icons, or favicons, are a celebrated convenience that allows you to quickly see the website you want in history, bookmarks, or tabs. Unfortunately, these favicons tend to appear incorrectly or go missing. This article shows you how to get back missing favorite icons on your Mac.  

If you notice that your Safari favorites icons are missing , clearing your cache and restarting Safari is the fastest way to get them back . There is another alternative way of opening the affected website in a private Safari window; I will look at it in detail later in the article.

How to Find Safari Favorites Icons Missing? 

• Method 1: Clear Safari favorites icons cache 

Method 2: Use Safari Private Window

Method 3: create new user, method 4: verify your preferences, method 5: restore items from time machine, method 6: download updates.

• Method 7: Use the safe mode        

In Conclusion

If the favorites icons are missing in Safari on your Mac, try going to “Safari” > “Preferences” > “Tabs” and check the box next to “Show website icons in tabs.” If this doesn’t solve the issue, try resetting the Safari browser by going to “Safari” > “Reset Safari” and selecting the appropriate options. If the issue persists, try restarting your Mac or updating the operating system.

How to bring back Safari Favorites Icons

When Apple first introduced the favicon feature on Safari, most people unsurprisingly jumped on it enthusiastically. The convenience of quickly locating your favorite website on a tab or bookmark list was too good to pass up. Precious seconds are saved by that little image appearing in the history list of the Safari browser, while not seeing it can put some people off whatever they are doing on the internet. Even though the Safari favorites icon appears distorted or missing, we’re here to tell you that you can quickly recover the icon by following a few simple steps on your MacBook. 

Method 1: Clear Safari favorites icons cache  

Clearing the Safari favorites icons cache and starting over is the universal way of solving the problem of incorrect and missing favicons on your computer. Follow the steps below to get your favorite icons back. 

• Shut or quit Safari.
• Go to Finder on your Mac.  
• Next, click on Go, then select Go To Folder on the visible menu.
• A pop-up menu will appear, and you will need to type in/Library/Safari/Favicon Cache/ 
• Once you’ve typed that in, you need to click on Go.
• You must send all the items in the folder on your screen to Trash. Pressing the Command and the A key simultaneously selects all the files in the folder, then you can drag them to the trash. You can also right-click the files and select Move To Trash on the menu that appears on the screen. 
• Empty the entire trash or delete the items from the favicon cache folder only. The simplest way to empty your trash is by right-clicking the trash icon on your dock and selecting Empty Trash. 
• Open your Safari browser again and visit your saved sites. 

The incorrect or distorted images should appear correctly. The favicon cache rebuilds itself as you visit your saved sites. However, in rare cases, some alternatives might help. I’ll now look at some of the methods that you can use. Feel free to try them all, as none take a long time to complete.

Also Read: How to Fix Finder Not Responding on Mac

There is no guarantee that this alternative method will work, but it is worth a try if clearing the favicon cache is not working or if you prefer not to use it. Safari has a private window that does not store browsing history, and you can use this feature to try and refresh your favicons.

• Right-click on Safari in the Dock
• Select New Private Window
• Visit the site with the incorrect or missing favicons
• Close Private Window

The favicons should return to normal working conditions after this. You can try these further steps in the Private Window.

• Select Preferences and click on Privacy on the Safari menu
• Click on Manage Website Data, and a list of sites will appear
• Choose the site that is causing issues and click on Remove
• Click on Done to finish the process
• Go back to the non-private window and open the website again.

Your Mac should be able to rebuild the favicon cache on its own. If you know your way around the device, you can manually make another favicon cache folder, but this is not a recommended route. It is better to contact the Apple Support center.    

If you continue having issues with favicons, create a new user on your Mac. This method has worked for others on the Apple Community Forum , where users try to help each other solve various challenges with Mac. One user managed to retrieve all the missing favicons using this method. 

• Select System Preferences (System Settings on macOS Ventura and above) on your menu and click Users & Groups
• Click on Add at the bottom of the dialogue box.   
• Choose the type of user, preferably the Administrator. 
• Enter the name of the new user and a password.
• Click on Add User.

The first time you open Safari under the new user profile, favicons should all work perfectly. \

Also Read: How to Change Admin Name on Mac

The Mac has a preference setting that allows tabs to display icons when you’re on Safari. Check that your preferences are set correctly by following these simple steps. 

• Open Safari 
• Click on Safari in the menu bar
• Select Preferences 
• Click on Tabs, and a list of preferences will show up
• Tick the box allowing website icons to be shown. 

The image below shows the box that you should tick. You can try doing this a couple of times while restarting your device. Try this method several times, restarting your device each time. 

If you use Time Machine to backup files, then you can use it to retrieve files and items. The good thing about Time Machine is that it works with almost all Mac apps. Here is a reminder of how to open Time Machine and retrieve files and items. 

• Click on the Time Machine icon. If the icon is not there, go to System Preferences (System Settings on macOS Ventura and above) and click Time Machine on the Apple menu.
• Click on Show Time Machine in the menu bar to browse backups and local snapshots.
• Use the arrows to look through your missing files and items. When you see the files you need, click Restore. 

You can restore all the files at once or one by one. When restored, the files return to the original folder. Remember, you need to have already set your device to back up to the Time Machine for this method to work perfectly.   

Also Read: How to Turn off Time Machine on a Mac

Your Safari favorites icons missing challenge can also be solved by updating your device. The macOS Catalina 10.15.7 Combo update fixes issues that prevent files from syncing with iCloud and resolves graphics. You can download this update and see if the problem is solved. 

Follow these steps to download software updates on your Mac. 

• Open the Apple menu and choose System Preferences (System Settings on macOS Ventura and above).
• Click on Software Update.
• Open the Software Update preferences for the Safari folder.

You can also find a list of available updates in the Apple Store or set your device to check for software updates in the System Preferences (System Settings on macOS Ventura and above) automatically. However, for this particular issue of missing favicons, the Catalina 10.15.7 Combo update should be able to help. 

Method 7: Use the safe mode         

One way of solving issues on your Mac is to restart it in safe mode. The safe mode allows your device to start and run with limited functionality as you try and solve specific issues. You must determine if your device uses Apple silicon, then follow these steps. 

• Shut down your Mac device.
• Turn on your Mac and hold the power tab until the startup options window appears.
• Choose the startup disk. 
• Click the Continue in Safe Mode tab while holding down the shift key.
• Log in, and if asked to, do it again.

If your device uses the Intel processor, follow the instructions below.

• Turn on the Mac
• Press and hold the shift key immediately
• Release the shift key when the login window appears
• Login as per instruction

All the methods mentioned here should help retrieve missing or distorted favicons. If you continue having issues after everything I have touched on here, you may need to reinstall your macOS to ensure that all the third-party apps are up to date. 

Also Read: Best Mac OS Version

Always keep your Mac device updated, as this helps solve issues before they arise. Clearing your favicon cache is the simplest and fastest way of retrieving your missing favicon. If it does not work, you should get joy from the other methods mentioned above. As a last resort, reinstall the operating system. None of your data is removed by reinstalling macOS. Click on the Reinstall macOS tab in the Utilities window and follow the instructions to complete the process. 

Do not close the lid on your Mac until the reinstallation process is finished. Your device will load all the latest software updates and be as good as new. Besides everything I have covered here, you can also contact Apple support and get help.   

Favicons provide a convenient way of quickly identifying websites on tabs, bookmark lists, and browser history. For those using the internet for work, favicons save valuable time and energy since you do not have to type the first few letters of sites to get where you want to be.

Ujjwal is a tech enthusiast with a special interest in everything Apple! He manages and writes on MacMyths.com where sharing anything and everything related to Apple devices and services is his daily thing to do.

Recent Posts

How to connect an ethernet cable to a MacBook Air [Solution]

Apple introduced Ethernet ports in MacBook versions 2010 and 2011. After this, the tech giant focused primarily on Wi-Fi connectivity and removed the ports from all its devices. However, if you are...

8 Ways to Fix a MacBook Trackpad Not Working

Are you having trouble with your Macbook trackpad not working? You're not alone. Many Macbook users experience this issue, and it can be incredibly frustrating. So, after testing different methods, I...

How to Enable Favicons in Safari on iPhone, iPad, or Mac

On Safari in iOS 12 to iOS 14, users have access to the Favourite icon, known as Favicon. It is a tiny visual webpage indicator on the title bar and tab bar. These little icons let you see the websites open in your browser at once. This can eventually be of great help to avoid juggling multiple tabs and trying to keep things organized. So, let’s take a look at how to  enable favicons in Safari on an iPhone, iPad, or Mac.

How to Turn ON Favicons in Safari on iPhone and iPad

How to show website favicons in safari for mac.

• Open the Settings app on your iPhone.
• Scroll down, tap on ‘Safari’

• Open Safari browser on your Mac, if you haven’t yet. Locate and tap the Safari tab at the top left corner next to the Apple icon.

Close the pop-up window and continue using your browser. The feature gets active instantly.

Signing off

With its recent updates, iPhone, iPad, and Mac are adorned with many features and design elements. In case you still haven’t upgraded your device or are unaware about the offerings, or have any other query/feedback, please feel free to connect with us through our comment section or drop a direct mail. We’d be delighted to hear from you.

You may also like to read these posts:

• How to Enable Safari Popup Blocker on iPhone
• How to Delete Frequently Visited Sites in Safari
• How to Search Within a Webpage in Safari in iPhone
• Translate Webpages in Safari on iPhone

🗣️ Our site is supported by our readers like you. When you purchase through our links, we earn a small commission. Read Disclaimer .

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Tips & Tricks

Troubleshooting, how to show website icons (favicons) in safari for ipad & iphone.

Website favorite icons can help to visually distinguish one website tab from another when looking at a crowd of Safari tabs, and in the latest versions of iOS you can now enable website favicons in Safari tabs for both iPhone and iPad.

This tutorial will show you how to quickly enable the display of website favorite icons (favicon) in the iOS Safari web browser for iPhone or iPad.

How to Show Favicons in Safari for iOS

• Open the “Settings” app on the iPhone or iPad and then go to “Safari”
• Locate ‘Show Icons in Tabs’ and toggle that switch to the ON position

• Return to Safari on the iPhone or iPad, if you have multiple tabs open you will now see the website icons appear along the tab name or site name

Enabling the display of website favicon in Safari for iPhone and iPad can make browsing through many tabs a bit quicker, since you may have learned to visually identify a particular favicon with a particular website. You also might appreciate the feature when searching through Safari tabs on iPad or iPhone , or when swiping through a large number of tabs at the top of the Safari browser window on iPad, or when viewing iCloud Safari Tabs .

Beyond that there isn’t much necessary, as the favorite icons will load automatically with all future websites, assuming they’re supported by that web page or web site. Favicons are included with most websites by default appearing as a little ‘favicon.ico’ file on the web server, and those favicon files exist on the site whether they are shown in Safari or not.

If you don’t have this setting available in your iOS Settings for Safari, it means you’re running an older version of iOS. Thus you can either update to a newer version of iOS (12.0 or later) or just do away with the feature. Many of the alternate web browsers for iOS also show favicon by default, including Chrome. This feature has been standard on many other web browsers for a long time but was not available in Safari for iOS or Mac until recently.

While the favicon visibility is desirable to some users, others may not like the feature since it can clutter up a tab bar with a lot of colors and icons, rather than simple text.

Of course you can hide the website favicons from Safari tabs in iOS again by returning to that Safari Setting and turning the feature back off.

This is obviously for the iPhone and iPad, but you can also show website favicons in Safari on Mac if you’re running a modern version of MacOS too (10.14 or later).

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

Related articles:

• How to Show Website Favicons in Safari for Mac
• How to Turn Off Split Screen in Safari for iPad? Exiting Safari Split Screen in iPadOS
• OSXDaily.com Privacy Policy
• How to Disable favicon Support in Firefox

Leave a Reply

Name (required)

Mail (will not be published) (required)

Subscribe to OSXDaily

• - How to Use Hover Text on Mac to Magnify On-Screen Text
• - How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
• - How to Use Apple Watch as Viewfinder & Remote for iPhone Camera
• - How to Hide the Sidebar in Microsoft Edge
• - The Best Way to Clean a MacBook Air Keyboard: Microfiber Cloth & KeyboardCleanTool
• - Opinion: Shiny Keys on MacBook Air & Pro Are Ugly and Shouldn’t Happen
• - MacOS Ventura 13.6.6 & Safari 17.4.1 Update Available
• - Using M3 MacBook Air in Clamshell Mode May Reduce Performance
• - First Beta of iOS 17.5, macOS Sonoma 14.5, iPadOS 17.5 Released for Testing
• - iOS 16.7.7 & iPadOS 16.7.7 Released for Older iPhone & iPad Models

iPhone / iPad

• - What Does the Bell with Line Through It Mean in Messages? Bell Icon on iPhone, iPad, & Mac Explained
• - Fix a Repeating “Trust This Computer” Alert on iPhone & iPad
• - Create a Resume with Pages on Mac, iPhone, iPad
• - How to Check Disk Health on Mac with smartctl
• - 3 Mac Tips for Working with International Teams
• - Fix “warning: unable to access /Users/Name/.config/git/attributes Permission Denied” Errors
• - How to Fix the Apple Watch Squiggly Charging Cable Screen
• - NewsToday2: What it is & How to Disable NewsToday2 on Mac
• - Why Did My iPhone Alarm Stop Automatically & Turn Itself Off?

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari (15.1) no longer displaying Favicons

Upon updating to Monterey, Safari (15.1) is no longer displays Favicons.

Safari preferences no longer has a Favicon toggle in the Tabs section. Any suggestion on how to remedy this?

MacBook Pro 13″, macOS 10.13

Posted on Oct 25, 2021 1:33 PM

Similar questions

• Refresh Favicons A few weeks ago Safari (12.1.1 on macOS 10.13.6) began displaying the wrong favicons for some sites; these were favicons associated with other sites. Although not specifically related to troubleshooting this issue, I've quit and restarted Safari and I've restarted the computer. Does anyone know how to refresh the favicons on my system? Thanks srb 11741 4
• Favicons have disappeared! I'm using Safari 14.0.3 and all my favicon have disappeared. Restarting my MacBook Pro didn't help. Checking/unchecking/Checking show icons in the Preferences setting didn't help. Deleting same files in the cache library didn't help. How do I restore them? 731 1
• Safari does not have a search window after recent update to macOS Monterey 12.4 Safari does not have a search window after recent update to macOS Monterey 12.4 455 1

Loading page content

Page content loaded

Oct 25, 2021 2:54 PM in response to CreativeSmith

That wasn't stated in the original post. In that case boot into Safe Mode according to Start up your Mac in safe mode - Apple Support and test to see if the problem persists. Reboot normally and test again.

NOTE: Safe Mode boot can take up to 3 - 5 minutes as it's doing the following; 

• Verifies your startup disk and attempts to repair directory issues, if needed

• Loads only required kernel extensions (prevents 3rd party kernel/extensions from loading)

• Prevents Startup Items and Login Items from opening automatically

• Disables user-installed fonts 

• Deletes font caches, kernel cache, and other system cache files

Oct 25, 2021 2:55 PM in response to CreativeSmith

my favicons have been working all along. after clearing my history, i get the grey icons with the first letter of each of my favourites in them. when i reopen safari, they come back one by one. if it's not working properly for you, the only thing i can suggest would be to completely quit safari, then safe-start safari by pressing and holding the shift key while launching safari and see if they repopulate themselves.

Oct 25, 2021 4:37 PM in response to CreativeSmith

CreativeSmith wrote:

my situation— which is that the favicons are not rendering correctly.

if you still have an issue:

quit the Safari.app

From the Finder>Go>Go to Folder copy and paste:

Select all items (Command A) in the cache folder and move them to the Trash.

Relaunch your Safari, the favicon cache folder will rebuild itself as you visit websites.

Oct 26, 2021 7:19 AM in response to leroydouglas

Have followed all of the above guidance, for which I'm grateful, but am still unable to get some sites to repopulate their favicons.

Specifically, can't get [previously cached] favicons to reload. If, however, I load a site which I've never visited on this MBP, the that [totally new] favicon appears as it should.

So, is there a favicon database which should/could also be deleted?

Oct 28, 2021 11:41 PM in response to leroydouglas

This seems to only affect icons in OPEN TABS and the START PAGE FAVORITES. Is there any way to have the bookmarks bar display favicons?

Oct 25, 2021 2:20 PM in response to CreativeSmith

There is a checkbox under Safari's Tab preference pane to change tabs to icons:

Oct 25, 2021 2:41 PM in response to Old Toad

Thanks, but not quite my situation— which is that the favicons are not rendering correctly.

Oct 26, 2021 7:47 AM in response to CreativeSmith

Resolved by going to Develop>Empty Caches.

It was the nuclear option, sadly, but am back to normal… I think.

Oct 26, 2021 8:05 AM in response to CreativeSmith

Good computing CreativeSmith

How to fix your Favicons

by Matt Fantinel

06 Jan 2021 - 4 min read

Favicons kinda suck. They should be a simple icon that identifies your webpage on a bunch of scenarios, i.e. the icon displayed on the tab besides your website's title, or the icon on the mobile browser's bookmarks screen, or the icon on the phone's home screen.

Unfortunately, different browsers, OSs, and implementations throughout the years have ended up with many different files and meta tags, that we as developers need to handle otherwise we end up with missing or pixelated icons.

I recently met my new best friend, Real Favicon Generator . It took all these pains I just wrote about and just made it a breeze to handle. Best of all, it's customizable!

You just have to add in your existing favicon image (for best results, a SVG or high-quality PNG is recommended). From then on, the generator will display previews and allow customization of each category of favicon it will generate:

At the bottom, you can even set up ways of avoiding caching issues, compression, and scaling algorithms (!). After all that, it will generate them all as set, give you a zip with all the files, and the HTML code to paste on your <head> . You can check the result on this very website (fantinel.dev). The favicon should look fantastic on every device/browser combination.

Manual Mode

So, there are 5 types of favicons that we need to add, if we want to support every current browser:

1. Desktop browsers

• favicon.ico , for IE and any other legacy browsers. Optional if you don't want to support it;
• favicon-16x16.png , the classic one that's displayed on the tabs;
• favicon-32x32.png , used on Safari for macOS.

2. Android browsers

• android-chrome-192x192.png , shown on the tab card and when added to home screen;
• android-chrome-512x512.png , shown on the splash screen for when the website is installed to the phone. Optional if it's not a PWA;

3. iOS Safari, and some Android browsers like Samsung Internet

• apple-touch-icon.png , a 180x180 file displayed when the website is added to home screen;

4. Windows 8/10 start menu (optional)

• mstile-150x150.png , only used when your website is added to the start menu as a tile on Windows 8/10, and when not declared, defaults to apple-touch-icon.png instead.

5. macOS Safari Pinned Tabs (optional)

• safari-pinned-tab.svg is used when users pin a tab on Safari for macOS. Basically, you declare a monochrome SVG and a theme color. Safari does the rest.

With those files, you should be good to go on every single browser, by adding this to your <head> :

Single SVG Favicon

Something that's starting to become a thing is having a single SVG favicon. Theoretically, SVGs are infinitely scalable, and should look good on all sizes. Unfortunately, browser support is not there yet.

Can I Use reports that, currently (January 2021), only recent versions of Firefox and Chromium-based browsers support this feature. This means that Safari, non-Chromium Edge, IE, and some mobile browsers do not support it. Therefore, unless you want your favicon to just not appear in those browsers, you'd still have to use other file formats as well. The downside of this approach is that all favicons would look the same, and you won't be able to customize and have differently-shaped icons for mobile devices, for example.

Wrapping Up

Favicons suck. Luckily, there are people working to make it suck less. With the approach presented on this article, your website should be able to display its best favicon on all browsers for years to come.

Related Posts

Have some time? Feel free to read some other posts by me.

Progressive Enhancement (and why it matters)

Progressive Enhancement isn't just another web jargon; it's a guiding principle shaping modern web development.

“Classic rock, Mario Kart, and why we can't agree on Tailwind”

Great article from Josh Collinsworth explaining why Tailwind is good and bad for the exact same reasons.

Container Queries Are Here!

Responsive web development will never be the same again.

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

How to Show and Hide Favicons in Safari Favorites Bar

In Safari 17 and macOS Sonoma , Apple has introduced support for displaying favicons in the Favorites bar. Keep reading to learn why favicons can be useful, and how you can disable them if they aren't for you.

Favicons can usually be found next to anything in a browser's interface that identifies a website. This can include bookmarks, tabs, history results, and search bars.

In Safari 17, if you have the Favorites Bar enabled ( View -> Show Favorites Bar in Safari's menu bar) the favicon for each site will appear beside its title, allowing you to more easily spot it in the bar.

Get weekly top MacRumors stories in your inbox.

Popular Stories

iOS 18 Will Add These New Features to Your iPhone

Delta Game Emulator Now Available From App Store on iPhone

NES Emulator for iPhone and iPad Now Available on App Store [Removed]

Apple Removes Game Boy Emulator iGBA From App Store Due to Spam and Copyright Violations

All iPhone 16 Models to Feature Action Button, But Usefulness Debated

Game boy emulator for iphone now available in app store following rule change [removed], next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

57 minutes ago by MacRumors Staff

6 hours ago by MacRumors Staff

8 hours ago by Tim Hardwick

10 hours ago by Tim Hardwick

Favicon Not Showing Up - How to Fix In Chrome, Wordpress & Shopify

What is a Favicon

Favicons make it easier for users to identify your site when they have many tabs on the web browser open. Favicons are usually displayed just before the URL on a browser. You can also see favicons on bookmarks, Google autocomplete results, and search history. Here are the places where favicons can be displayed on different browsers.

Favicons can be defined as icons that are used as part of a site’s branding. A favicon could be a brand’s logo, a character or a set of characters, part of the logo, or even a generic image that represents the type of business or industry a brand is in.

In this article, we explore what causes favicons not to show up, and how to fix these issues.

How to Install Favicons Correctly

You need to correctly install your favicon if you want it to render correctly. First, create a favicon. There are many favicon generators that you can use for this. Next, add it to your site. Here is how to install it on the main pages of your site:

• Upload the favicon.ico file to the desired directory on your site.
• Insert this code into the <head></head> section:

<link rel=”shortcut icon” href =“images/favicon.ico”>

• ‘images’ needs to be replaced with the directory where your favicon is stored.
• ‘favicon.ico’ needs to be replaced with what you have named your icon.
• Note that the rel value can also be ‘icon’, ‘apple-touch-icon’ or ‘apple-touch-icon-precomposed’
• The href value can be a relative path (where you use the file path where the favicon is stored) or an absolute URL (where you use your domain and add the favicon file to the URL as in https://abc.com/favicon.ico)

Learn more about how to add favicons in this article. You can also read about Google’s guidelines to favicons here.

Common Reasons Your Favicon is Not Showing Up

You can check to see if your favicon is showing up properly by using our website audit tool . Here are common reasons why your favicon is not showing and how to fix the issues:

Syntax Errors

A simple syntax error in the code that you use to implement your favicons could result in your favicon not showing. Here is an example:

<link rel=”icon” type=“image/x-icon” href=”https://www.abc/com/drive/uploads/2019/10/favicon.ico>

The above code has 1 simple syntax error:

• The href link lacks closing quotes

Your browser has cached your site as one without a favicon

When you add a favicon to your site, it may not show up since your browser has ‘saved’ your site as one without a favicon. You need to clear the cache in your browser or use a different browser.

Alternatively, add /favicon.ico to your domain name as in www.abc.com/favicon.ico

Wrong File Path

You need to ensure that your favicon’s file path is correct. If you have your icon in the images folder, then make sure that your file path has /images/favicon.ico depending on what you named your icon.

If your CSS and icon are siblings, in that they are on the ‘same level’, then make sure that you do not have a slash before the favicon’s file name, as in your href should be as follows:

href=“favicon.ico”

The Browser Does Not Display Favicons if They are Local

Browsers like Chrome and Safari do not display favicons if they are local (they have not been uploaded to a server). Chrome, for example, is only able to show the favicon if it is located in the downloads folder.

The Link to Create the Favicon is Not in the Right Location

It is important to place the link to add your favicon in the right location. It needs to be placed in the header section of your webpage and not anywhere else. While if placed in the body it may work on some browsers, other browsers like Chrome will not load it.

Your Favicon’s File Name is Still the Default Filename

Sometimes, the reason your favicon does not show is as a result of not changing the filename. The simple fix for this is to rename the favicon file from the default, ‘favicon.ico’

Let us now focus on why favicons will not show up on Chrome, WordPress, Shopify, Wix, and Squarespace:

Reasons Favicon Not Showing Up in Chrome Specifically

Here are the reasons why your favicon may not be showing up in Chrome:

The Favicon Size is Wrong

We mentioned that Google has specific guidelines that need to be followed when adding favicons to your site. One of them is that the icon size needs to be in multiples of 48 and it cannot be 16x16. If your icon size is 16 x16, it will not show.

Content Management Systems (CMSs) also have specific sizes that they recommend. WordPress recommends 512 x 512 and Squarespace 300 x 300. These CMSs are able to resize the favicon to fit different scenarios. A bigger size is needed for bookmarks, for example, while a smaller size may be needed for mobile.

This article explores the various favicon sizes , where they are best suited, and even the deprecated sizes.

Having the Favicon File in the Root Directory, but Not Adding the Link that ‘Imports’ it

Just because the favicon file is in your root directory, it does not mean that it will automatically upload when your website loads. Make sure that you have these links in your header:

<link rel=“icon” href=”favicon.ico” type=“image/x-icon”>

<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>

These are what will import the favicon to your site.

Reasons Favicon is Not Showing Up in Shopify Specifically

Here are the reasons why your favicon may not be showing up in Shopify:

The Link to Import the Favicon is in the Wrong Location

Where you place your link matters. Make sure that it is in the <head> </head> section, and not <header></header>.

See how to a favicon to your online Shopify store

Reasons Favicon Not Showing up in WordPress Specifically

Here are the reasons why your favicon may not be showing up in Wordpress:

In Customizer, the Site Icon is Meant for the AMP Favicon

If you use Customizer to upload a custom favicon, it may not work as this is meant for pages that use AMP . To fix this problem, you need to first remove the favicon that you had uploaded using Customizer. You then need to install a plugin called ‘ Favicon by RealFavicon Generator ’. This plugin allows you to upload the image that you prefer to use as your favicon. It needs to be in png or jpg format. The plugin will help you convert it to .ico.

There could be a plugin adding body elements in your head /head

You need to ensure that you do not have a plugin that is creating body elements in your <head></head> section. Go through your head section and if you see code that belongs to the body section, check for the plugins that you had installed when adding your favicon to your WordPress site. Go ahead and deactivate or even uninstall it.

You have not specified image type if it’s not .ico

If your icon is in .png format, you need to edit the link that you are using to upload the favicon to include type as follows:

<link rel=“icon” href=“yourpath” type=”image/png”>

You also need to add the .ico file to the site’s root.

Learn how to add favicon to a WordPress site .

Reasons Favicon is Not Showing Up on Squarespace Specifically

Here are the reasons why your favicon may not be showing up in Squarespace:

The cached version is not yet invalidated

The template code in the <head></head> section always uses ‘favicon.ico’ as the file name. This is the cached version. To invalidate it, change the filename.

You are still logged on to the CMS

If you are still logged on to your CMS, it may still be showing Squarespace’s default icon. You need to log out of CMS in order to see your custom favicon.

Favicons come in handy to help with brand consistency. They make your site easily identifiable where the user has to identify several sites at a glance, for example when many tabs are open. They are great for repeat visitors and customers. When your user bookmarks your site, favicons make it easily identifiable.

Implementing favicons may not always go smoothly and we have looked at common reasons why favicons will not show up. We have even explored issues that may arise when using particular Content Management Systems - CMSs-  like WordPress, Shopify or SquareSpace. As you may have noticed, most of the issues are simple enough and you can fix them. Do not hesitate to ask for professional help where needed, though.

Putting all things SEO under a microscope. I'm an experimentalist, researcher, recording every step of how to rank number 1. Here to help, verify, explain, cross-examine the wonders of search engine.

SEO Audit & Reporting Tool. Improve Your Website. Win More Customers. Get a Free Website Audit Instantly

Featured Articles

Recent articles, related articles.

SEOptimer - SEO Audit & Reporting Tool. Improve Your Website. Win More Customers. Get a Free Website Audit Instantly

Favicon is not showing on safari - Can you help please

I really don’t understand why I keep uploading my favicon but it won’t work on safari I have seen websites that use this platform and have a great favicon for their site when used through safari but when I refresh mines it stills appears the same.

Do you have safari 12?

thanks and yes I have the newest safari (well it said I did when I tried to re-download) and the favicon works on chrome and other browsers just in safari I still see the Webflow logo even after multiple uploads

Same issue here. I see my clients favon on Chrome and Firefox. But in Safari it says webflow favon? Is this a bug?

Just a silly question but have you tried refreshing your cache?

Safari uses “apple-touch-icon” instead of “icon”. Also, you will have to specify the icon for all Apple devices if you want it to show up in all of them.

Read more here Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? | CSS-Tricks - CSS-Tricks

Quick update on a recent challenge I faced: I’ve successfully fixed the favicon issue. The key learning here is that Safari doesn’t support SVG files for favicons. For broader compatibility, especially with Safari, it’s advisable to use favicon formats like ICO, PNG, GIF, or JPG.

Hope this insight proves useful for anyone tackling similar favicon concerns!

• For Agencies
• Case Studies
• Resources Product Updates Features Roadmap Free SEO Tools Blog Help Center Educational Partnership Affiliate Program
• Web Hosting
• Latest Post
• SEO SEO Basics SEO essentials explained simply Technical SEO Optimizing site mechanics for SEO Site Audit Issues How to fix technical SEO issues Link Building Strategies for acquiring quality backlinks Ranking and Visibility Improving search presence essentials
• Product & Studies Case Studies Real Successes, Strategic Insights Data Studies Analytics Driven Success Stories Product Updates Latest Features and Improvements Unveiled

Why Web Browser Icon Missing and How to Restore a Favicon?

Free Complete Site Audit

Access a full website audit with over 300 technical insights.

Free Website SEO Checker & Audit Tool

• Scan the site for 300+ technical issues
• Monitor your site health 24/7
• Track website rankings in any geo

A favicon is a recognizable element of the page. Let’s find out why the graphic logo is not displayed in browsers and online interfaces and how to deal with it.

What Does Web Browser Icon Missing Mean?

A favicon is a graphic image in the form of a small icon that appears next to the site name at the top of the browser, snippets, bookmarks, and in advertisements. The icon is stored in the search history, service interfaces, which facilitates user experience.

Almost all browsers, including IE, Chrome, Firefox, Safari, apply a favicon to indicate new tabs. When trying to re-enter the site, the image is loaded from the cache.

What Triggers This Issue?

Sometimes, despite the fact that the icon has been created and installed, it is distorted, remains invisible, or disappears altogether. Common causes that lead to this error are:

• incorrect file format;
• wrong icon size;
• an error in the html code or URL;
• the URL of the logo changes frequently;
• the file is not indexed by Google;
• the file is on local hosting;
• Google considers the logo design unacceptable.

This is an incomplete list of causes. If you’re wondering why your site has lost its favicon, we advise you to study Google’s guidelines for developers.

How to Check the Issue?

The easiest way is to enter the URL of the site into the browser and see if the logo is displayed next to the site URL. You need to check this for different browsers and devices.

Or you can use Sitechecker, and it will check your domain for favicon presence in different browsers. If everything is okay, you will get a notice that “Site has a favicon”

Don't let your site go unnoticed in a sea of tabs!

Check if you have a favicon and boost your brand visibility with Sitechecker.

Why is This Important?

A missing icon is not as serious as a 404 error. But it requires attention as well.

Favicon URL is indexed by the search engine to be displayed next to the site name. A favicon increases the clickability of the page by improving brand awareness.

A recognizable favicon will help to easily identify the page, improve interaction with users, who will visit the website more often and stay on it longer. User experience is taken into account by search engines and has a positive impact on the ranking.

How to Fix the Issue?

The course of action will depend on the cause of the error. Determine it with the help of this article and Google guidelines.

Resetting the page or clearing the cache on your site or browser may be sufficient to fix the issue.

If that doesn’t work, try other options.

• Different graphic formats are used to create a favicon, but some of them are not supported by all browsers and their versions. In this case, it is recommended to use .ICO images.
• The logo size can be 16×16, 32×32, 48×48, 96×96, 144×144 pixels. However, keep in mind that the standards of each CMS are different, and they can change the size. For example, this is the case when you add a favicon through WordPress, Squarespace, Shopify, and Angular and React frameworks. The icon is added to them with the help of settings in the menu of the admin panel or special plugins.
•  A new logo file is saved in the root directory of the website. Information about it, including the name and location of the file, is added to the <head> section of the page. If you place a favicon in <header> by mistake, it will be lost.
• Check the html code for errors. For a regular favicon in ICO format, it looks like this: <link rel=”icon” href=”favicon.ico” type=”image/x-icon” />; <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />.
• The address must be stable. If you often change it, it will not link to the site, and search engines will not be able to respond to it.
• If the search engine can’t index the image and link it to the site, remove the ban on indexing.
• Some browsers, including Google Chrome, require the file to be uploaded to the server.
• The image or its element can be similar or contain hatred symbols, elements of pornography, other inappropriate content. In this case, the search engine will replace it with the default image.

Please note that even after all the conditions are met, the icon is not guaranteed to appear in search results.

Head of Product at Sitechecker

Ivan joined the team in 2018 and was the first to handle Sitechecker marketing. He had successful results in growing organic search traffic to B2B SaaS websites (Sitechecker, Copywritely). Read full bio

• What Does the Issue Mean
• What Triggers This Issue
• How to Check the Issue
• The Importance of the Issue
• How to Fix This Issue

You may also like

Check your website for SEO errors

Fix: Safari showing old favicon issue due to Cache

Does your website or web app still show old favicon in just Safari?

The reason behind it could be because of Caching. Safari does aggressive caching of resources like favicon as a result your new favicon might not be displayed as expected (if you've already visited the site)

One way to confirm this issue is by clearing your Cache

Thankfully, you can solve this by cache-busting

Method 1: Add a cache-busting parameter

Append some query string in your favicon's URL like ?v=x.x . And it'll force Safari to fetch a new favicon.

Method 2: Change the filename

To be on the safer side, you can also change its filename instead of adding a cache-busting parameter. That will make sure to fetch the new URL without fail in Safari.

Happy resolving cache!