safari favicon black

How to refresh website favicons in Safari on Mac

Are some website icons missing or showing incorrectly in Safari? Learn how to refresh Safari favicons on your Mac to force the browser to fetch the new icons and display everything correctly.

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 we’ll show you how.

Also see: How to hide or show website icons in Safari Favorites Bar

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.

1) Close and quit Safari . You can do this by clicking Safari from the top menu bar and choosing 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

• 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

Major 'National Public Data' Leak Worse Than Expected With Passwords Stored in Plain Text

All Four iPhone 16 Pro Colors Revealed in New Image

iPhone 16 Launch Is Next Month – Here's Everything We Know

Bronze-Like iPhone 16 Pro Color Could Be Called 'Desert Titanium'

Get Up to $600 Off Apple's M2 iPad Pro With New Record Low Prices

New iPhone 16 Thermal Design High on Buyers' Wishlist, Survey Suggests

Next article.

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

Update now for a number of important security fixes.

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.

Updates to Mail, Photos, Messages, and more, with Apple Intelligence features throughout.

iPhone Mirroring, Safari improvements, new Passwords app, and Apple Intelligence features throughout.

Apple Intelligence features, Smart Script handwriting refinement, Calculator app, and more.

New hand gestures, rearrange apps in Home View, larger Mac Virtual Display, and more.

Other Stories

4 hours ago by Tim Hardwick

1 day ago by Tim Hardwick

2 days ago by Tim Hardwick

Your perfect Dark Mode Favicon

Did you switch to dark mode on some of your devices? Yes? Well, then you are already familiar with the problem: favicons. If they contain dark colors they are invisible. Here you will learn how to fix that!

Table of Contents

Google Chrome, the most popular browser to date, introduced dark mode almost 3 years ago. Firefox and all other major browsers now support it as well. On the contrary, even large companies (such as Asics, Sentry, and Under Armour) still use a favicon that is almost invisible on a dark background.

This is especially painful to see for a front-end person with a small tab-hoarding problem (and I have the feeling I am not alone here). Here’s what you can do to solve this difficulty:

Option 1: Quick Fix – Favicon with Background

If you only have 5 minutes to optimize for dark and light mode, you can simply update your current favicon with a white or black background.

This way your favicon will always look professional regardless of light or dark mode. Google also chose this option and added a white circle around the “G” to create more contrast. However, if you want to have a website with dedicated favicons for dark and light mode, go for the next option.

Option 2 (recommended): SVG-Icon for Light and Dark Mode

For a while now it’s been possible to use SVG graphics as favicons. This is convenient: They can be scaled without quality loss, plus you can apply CSS to change the color. The latter we are going to use for our dark mode and light mode favicons.

First open up your SVG file in your preferred editor, in my case that’s VS-Code. All you have to do is add internal CSS to your SVG through style tags. Within the tags, you select the fragment(s) of your icon and choose the color for the light theme.

Finally, use the media query to detect dark mode and set your favicon color accordingly: @media (prefers-color-scheme: dark) { ... }

The final SVG for your favicon will look like this:

Favicon Fallback for SVG Icons

The “Can I use” website states 75% support for SVG icons . We can start from here. Nevertheless, for a crucial branding element like the favicon we need 100% browser support. Therefore you can upload your SVG file to realfavicongenerator.net to create all possible favicon variants and then place the files in the root directory of your website. The generator also creates a code snippet to link all favicon variants in your header.

Note: The link to your previously created SVG favicon should come first, and then the fallback favicons from the generator. The favicon.ico shouldn’t be referenced.

How Safari Handles Favicons

Safari takes a different way in handling favicons in dark and light mode. SVG-Icons are unfortunately not supported, therefore it’s not possible to change the color through the CSS media query when visitors use dark mode. Safari solves the dark mode difficulty by automatically adding a white or black background if there is a low-contrast favicon.

Example WordPress: How to Add Dark Mode / Light Mode Favicon

Use a wordpress plugin: svg-favicon.

It is possible to add the SVG-Favicon through a plugin called SVG-Favicon if you don’t know how to edit your child theme. You still have to update your SVG graphic as described previously and then upload it to your WordPress website through the plugin.

Add SVG-Favicon to Your Child Theme Manually

• Add all favicon variants to your root directory via FTP: In my case those are the favicons from the generator
• Update your functions.php To link all your favicon variants open your functions.php of your child theme and add the following function function add_favicon() { // dynamic light mode/dark mode svg favicon echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml" >'; // as icon on the iPhone homescreen echo '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" >'; // link icons for Android devices echo '<link rel="manifest" href="/site.webmanifest">'; // fallback png icon echo '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" >'; echo '<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" >'; // style of windows tiles echo '<meta name="msapplication-TileColor" content="#da532c" >'; // set color of url bar echo '<meta name="theme-color" content="#ffffff" >'; // second fallback favicon.ico located in root directory, but not linked here } add_action('wp_head', 'add_favicon');
• Final Step: Remove your current favicon from WordPress: If you have already linked your favicon in WordPress you have to delete it so it does not overwrite the ones we just added. To do so go to Appearance → Customize → Site Identity (left column) → Site Icon, and click “Remove”

Different Favicon for Admin Dashboard and Login Screen

In WordPress, the html header for the admin dashboard and login is different from the html header which will be sent to your website visitors. This means the fallback favicon in your root directory will be displayed when you login to your website or are in the admin dashboard.

For me, that’s more of a feature than a bug. My fallback favicon is one with an additional white background. Whenever I have two tabs up, one for the admin dashboard and one for the actual website visitors see, I can automatically distinguish those two.

You can add the following two lines to your functions.php to display a different (or the same) favicon on your login and admin dashboard:

Happy coding in dark mode! ✌️

Leave a comment 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.

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 13385 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? 873 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 563 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 Favicon in 2024: Six files that fit most needs

Andrey Sitnik

Author of PostCSS and Autoprefixer, Principal Frontend Engineer

It’s time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Frontend developers currently have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.

Irina Nazarova CEO at Evil Martians

The topic of favicons has proven to be more exhaustive than anyone could’ve ever wished, so I’ve also summarized the entire article in just two code snippets for those who’ve already suffered enough and who know exactly what to do. Still, I recommend geeking out to the rest of it!

Icon transcendence: customizing icons to complement fonts

The extremely short version

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

For the browser using HTML:

And in your web app manifest:

That’s it. If you want to know how I got here, the compromises I had to make, and how to build a set like this from scratch in a step-by-step fashion, stay tuned in for the rest of the article.

The long version, where everything is explained

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupéry

Airman's Odyssey

The concept of a favicon, which is short for “favorite icon”, have been around since the early 2000s. We’ve all seen those cute little images in our browser’s tab bar which help us differentiate our open websites. Users expect your website to have a favicon. It’s one of those little things that make other people take you seriously.

Even Apple, which has always had some kind of aesthetic beef with icons that don’t come from Cupertino, downplaying favicons in Safari for years, has finally given up and now properly displays them across all of its devices.

If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon is actually a lot of them.

So, it’s common to offload the grueling task of generating these necessary files for an ever-growing list of screens and devices to favicon generator tools. No one in their right mind would ever want to spend hours creating them by hand. We’re here to build websites, after all, not to make browser vendors happy.

A set of favicons generated by a popular online generator

As a creator of NanoID and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?

Thus, I set out to create a minimal list of favicons that will work in all cases and in all browsers—barring some edge cases—and even then, this will still work, just not 100% perfectly.

The Ultimate Favicon Setup

Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you’re concerned about performance, I’m here to set the record straight:

• Browsers download favicons in the background, so a bigger favicon image does not affect website performance.
• SVG is a great way to reduce image size for images that aren’t supposed to be bitmaps in the first place; for many logos the resulting file will be much smaller than a PNG.
• With just three PNG images in this minimum set, you can use advanced tools to optimize their size. This solves a problem for Internet users that don’t have unlimited data plans.

Now I’ll reveal the minimal set of icons that I came up with during my research and practice. This list should work with all popular browsers and devices, both old and new.

I. favicon.ico for legacy browsers

ICO files actually have a directory structure and can pack files with different resolutions. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (if it becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that’s tailored to fit small pixel grids.

Don’t get smart with the folder static asset folder structure and cache busters. https://example.com website should have a favicon on https://example.com/favicon.ico . Some tools, like RSS readers, just request /favicon.ico from the server and don’t bother looking elsewhere.

We need sizes="32x32" for <link> to .ico file in order to fix the Chrome bug where it chooses an ICO file over an SVG.

II. A single SVG icon with a light/dark version for modern browsers

SVG is a vector format that describes curves instead of pixels. At large sizes, it’s more efficient than raster images. As of this writing, 72% of all browsers support SVG icons.

Your HTML page should have a <link> tag in its <head> with rel="icon" , type="image/svg+xml" and with the href containing a link to the SVG file as attributes.

SVG is an XML format and can contain a <style> tag to describes CSS. As with any CSS, it can contain media queries like @media (prefers-color-scheme: dark) . This will allow you to toggle the same icon between light and dark system themes .

III. 180×180 PNG image for Apple devices

The Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <link rel="apple-touch-icon" href="apple-touch-icon.png"> tag inside <head> .

Since iOS 8+, iPads have required an image with a 180×180 resolution. Other devices will downscale it, but if we provide the source with a high-enough quality, the downscaling won’t hurt the end-user (I’ll come back to this later).

Small note: an Apple touch icon will look better if you place 20px padding around the icon and add some background color. You can use any image editor to do this.

IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices

• A web app manifest is a JSON file containing all the details for a browser to install your website as a system application. This format came about from Google via its PWA initiative.
• Your HTML page should have a <link rel="manifest" href="path.webmanifest"> tag with a link to the manifest file.
• The manifest should have an icon field that links to two icons: 192×192, for display on the home screen, and 512×512 which will be used as a splash screen as PWA is loading.

Did we forget anyone?

There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some of the less successful formats out there.

Windows Tile Icon

Microsoft Edge used to support a special icon format to pin websites to the start menu. For recent versions of Windows, this is no longer required.

Safari Pinned Icon

Safari formerly had a requirement of SVG monochrome icon for pinned tabs . However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the mask-icon anymore.

rel=“shortcut”

A lot of (now outdated) tutorials will include a favicon.ico into HTML like this:

Be warned that shortcut is not, and never has been, a valid link relation. Read this amazing article by Mathias Bynens from ten years ago that explains why we never needed shortcuts and why rel="icon" is just fine.

Opera Coast

In the past, Opera Coast, an experimental browser for iOS, required a special 228×228 icon. This browser left the App Store in 2017, and I doubt it survived the multiple iOS updates since that time.

Now, as we wave good-bye to our fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.

How to build our Ultimate Favicon Set

Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use.

Step 1: Prepare the SVG

Be sure that the SVG image is square . Open the source file in your system viewer and check the image’s width and height. It’s easy to adjust the SVG size using any SVG editor. In Inkscape , you can change document size by selecting File → Document Properties and then center the logo using Object → Align and Distribute.

Save your file as icon.svg . Now let’s fiddle with our SVG and make it play well with modern system themes . Ask your designer how the colors should be inverted for a dark theme (for B&W logos, you just change black to white).

Now, open your SVG file in a text editor. Find a <path> with a dark or missing fill . Add a CSS media query that will trigger on theme changes and change fill to the colors you want:

You may also use this media query technique with SVGs to add wide-gamut P3 colors to your favicons.

Step 2: Create an ICO file

Open your icon.svg file in a raster graphics editor. I recommend GIMP ; it’s free and multi-platform.

Accept rendering SVG to raster. Set the width and height to be 32 pixels. Export file to favicon.ico using 32 bpp, 8-bit alpha, no palette settings.

If you do not have GIMP you can install Inkscape and ImageMagick and convert SVG to ICO in the terminal:

Scale the image down to 16×16 and check the icon visibility. If it has become too blurry, it would be better to ask your designer for a custom tiny version of the logo.

To include a separate 16×16 version of an icon:

• Open favicon.ico with the 32×32 icon.
• Create a new layer with a 16×16 size.
• Put the 16×16 version of an icon into this layer.
• Export the file. GIMP will save each layout as a separate version of the icon.

Or you can do the same in ImageMagick by:

Step 3: Create PNG images

Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as icon-512.png . Scale the image to 192×192 and export it to icon-192.png . Now scale the image itself to 140×140 and set the canvas to 180×180, and then export it as apple-touch-icon.png .

Or you can do the same in Inkscape:

Step 4: Optimize PNG and SVG files

The best tool for optimizing SVGs is SVGO . To use it, run:

Squoosh is a great web app to optimize raster images:

• Open your icon-512.png in Squoosh.
• Change the Compress setting to OxiPNG .
• Enable “Reduce palette”.
• Set 64 colors.
• Compare the before/after by moving the slider. If you see a difference, increase the number of colors.
• Save the file.

Repeat these steps for icon-192.png and apple-touch-icon.png .

Step 5: Add the icons to HTML

You need to add links to favicon.ico and to apple-touch-icon.png into your HTML.

For static HTML:

However, we recommend using a bundler to generate cache busters (include the file’s hash in the name as a fingerprint). If you are using Webpack with HtmlWebpackPlugin :

Create an index.html template.

Add the template to the plugin options:

Define an HTML template with links (the examples use HtmlWebpackPlugin to include files, but it can be your templating language of choice):

Use copy-webpack-plugin to copy favicon.ico without adding a hash to file name.

Bonus tip: create a separate icon for staging

Favicons are a nice way to distinguish your production environment from a staging one. I find that using an alternative icon for staging is super effective for avoiding any costly cases of confusion.

Create a favicon-dev.ico with the same logo, but invert the colors (or do something that makes sense to you). Do the same for SVG and create icon-dev.svg .

Now, replace the icons in your HTML template depending on the process.env.NODE_ENV === 'production' condition:

Step 6: Create a web app manifest

For static HTML, create a JSON file named manifest.webmanifest :

Link it in your HTML:

With Webpack, you can use webpack-pwa-manifest plugin:

Thank you for reading! As you can see, with modern web standards, the task of creating our Ultimate Favicon Set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will make things even more amazing! Feel free to ping me on Twitter if you’re willing to build one; I’ll be more than happy to help!

• Fixed CLI commands for ICO and PNG generation.
• sizes="any" for ICO file was replaced to sizes="32x32" to fix bug when Chrome downloaded both ICO and SVG files.
• sizes="any" was added to ICO file to fix bug when Chrome took ICO file instead of SVG.
• Inkscape commands were added to convert SVG to PNG.
• ImageMagick commands were added for users who do not have GIMP.

Hire us to build your developer product

We dive into the core of what makes developers tick, considering every aspect of their workflow and tooling needs. We don't just follow best practices—we establish them, which has led us to build open source projects like PostCSS and Autoprefixer, used by millions of developers worldwide. Hire us to create products that developers love and rely on every day.

Let's solve your hard problems

We're experts at helping developer products grow, with a proven track record in UI design, product iterations, cost-effective scaling, and much more. We'll lay out a strategy before our engineers and designers leap into action.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)

audreyfeldroy/favicon-cheat-sheet

Folders and files, repository files navigation, favicon-cheat-sheet.

A painfully obsessive cheat sheet to favicon sizes/types. Compiled from:

• http://mathiasbynens.be/notes/rel-shortcut-icon <-- special thanks @mathiasbynens
• http://mathiasbynens.be/notes/touch-icons <-- special thanks @mathiasbynens
• http://www.jonathantneal.com/blog/understand-the-favicon/
• https://en.wikipedia.org/wiki/Favicon.ico
• http://snook.ca/archives/design/making_a_good_favicon
• http://www.netmagazine.com/features/create-perfect-favicon
• http://www.ravelrumba.com/blog/android-apple-touch-icon/
• http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx

For the main favicon itself, it's best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain. [1] [2]

This works in every desktop browser/version all the way back to IE6, except for SeaMonkey. [1]

Optional But Encouraged

You probably also want the following:

Touch icon for iOS 2.0+ and Android 2.1+:

< link rel =" apple-touch-icon-precomposed " href =" path/to/favicon-180.png " >

IE 10 Metro tile icon (Metro equivalent of apple-touch-icon):

< meta name =" msapplication-TileColor " content =" #FFFFFF " > < meta name =" msapplication-TileImage " content =" /path/to/favicon-144.png " >

Replace #FFFFFF with your desired tile color.

IE 11 Tile for Windows 8.1 Start Screen

< meta name =" application-name " content =" Name " > < meta name =" msapplication-tooltip " content =" Tooltip " > < meta name =" msapplication-config " content =" /path/to/ieconfig.xml " > ieconfig.xml <? xml version = " 1.0 " encoding = " utf-8 " ?> < browserconfig > < msapplication > < tile > < square70x70logo src = " /path/to/smalltile.png " /> < square150x150logo src = " /path/to/mediumtile.png " /> < wide310x150logo src = " /path/to/widetile.png " /> < square310x310logo src = " /path/to/largetile.png " /> < TileColor >#FFFFFF</ TileColor > </ tile > </ msapplication > </ browserconfig >

Very Optional, for the Obsessive

If you're obsessive, you want all this too:

Largest to smallest apple-touch-icons [3] :

Favicons targeted to any additional png sizes that you add that aren't covered above:

< link rel =" icon " href =" /path/to/favicon-32.png " sizes =" 32x32 " >

Favicon Chrome for Android

< link rel =" shortcut icon " sizes =" 196x196 " href =" /path/to/favicon-196.png " >

Create at least this:

More about favicon.ico below. Yes, it's 1 file with multiple sizes.

If you also sort of care about iOS and Android but are lazy:

But keep in mind that icons with complex detail often don't downscale well. Often you have to tweak subtle design details for smaller sizes.

If you're obsessive, create these too:

An .ico file is a container for multiple .bmp or .png icons of different sizes. In favicon.ico, create at least these:

If you're obsessive and don't mind 1-3kb extra size, also include these sizes in your .ico:

Create your .ico out of optimized .png files.

TODO: get confirmation that IE9+ supports .ico files that contain .png files (issue #9 )

Pinned tabs in Safari 9+ use an SVG vector mask for the favicon instead of any other PNG/ICO/etc. favicons that may be present. Vector artwork in the SVG file should be black only (no shades of black or other colors) with a transparent background. Also, a fill color needs to be defined in the <link> tag - a hex value or color shorthand will work. Here's the markup for adding the icon:

< link rel =' mask-icon ' href =' icon.svg ' color =' #ff0000 ' >

Helpful Tools

I recommend:

OptiPNG, to optimize .png files before putting them into an .ico: http://optipng.sourceforge.net/

ImageMagick, to create an .ico from .png files: http://blog.morzproject.com/convert-multiple-png-images-into-a-single-icon-file/ & http://www.imagemagick.org/Usage/thumbnails/#favicon

$ convert favicon-16.png favicon-32.png favicon.ico

Others that I haven't tried:

• Favic-o-matic: http://www.favicomatic.com - A favicon generator that cares of .ico, .png and HTML code to make your website shine on every platform, browser or device
• Ubuntu/Debian package icoutil (Fedora package icoutils ) provides the program icotool which creates .ico from .png files.
• MSDN recommends this web-based .ico creator: http://www.xiconeditor.com
• Resize favicons: http://faviconer.com
• More resizing: https://github.com/abrkn/icon
• Dynamically setting favicons: https://github.com/HenrikJoreteg/favicon-setter
• Fancy favicon tricks: https://github.com/component/piecon
• Web Icon - a simple shell script that generates favicon and touch icons: https://github.com/emarref/webicon
• Icon Slate app (OS X): https://itunes.apple.com/us/app/icon-slate/id439697913
• png2ico wrapper for ImageMagick: https://github.com/bebraw/png2ico
• GIMP : export as .ico, each layer is saved as an image

Forcing a Favicon Refresh

Not normally needed. This is only for those frustrating times when you can't get your favicon to refresh, during development:

Clear the browser cache on Windows (Ctrl+F5 or Ctrl+Shift+R) and on Mac (Command + Shift + R).

Also close and reopen browser if IE.

If still stuck, try opening new tab. Or see http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh

Temporarily add explicit HTML markup and append a query string. Remove this when you're done:

< link rel =" shortcut icon " href =" http://www.yoursite.com/favicon.ico?v=2 " /> < link rel =" icon " sizes =" 16x16 32x32 " href =" /favicon.ico?v=2 " >

For large versioned deployments, if all site visitors need their favicon force-refreshed in an extreme situation:

Add explicit HTML markup (customize the sizes part) and put your version number in the filename.

< link rel =" shortcut icon " href =" /favicon-v2.ico " /> < link rel =" icon " sizes =" 16x16 32x32 " href =" /favicon-v2.ico " >

TODO: find edge cases where this markup doesn't work (issue #3 ).

What about having both a default root favicon.ico and favicon.png? I think it's actually better to provide only favicon.ico and not favicon.png, because:

• An .ico is a container for multiple .bmp or .png files. If you specify 1 default favicon.png, and if that favicon.png overrides the favicon.ico, you are giving up control over how the favicon looks at different resolutions and allowing the browser to do all resizing. For example, you might want the 64x64 version to contain text and the 16x16 version to not display the text at all, since at 16x16 it would be unreadable anyway.
• 'In the absence of a link with the icon keyword, for Documents obtained over HTTP or HTTPS, user agents may instead attempt to fetch and use an icon with the absolute URL obtained by resolving the URL "/favicon.ico" against the document's address, as if the page had declared that icon using the icon keyword.'

More about this in http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos/1344379#1344379 (Note: the text in the chosen answer about alpha transparency is incorrect. See the 2nd answer.)

Is it true that favicons should be in the site root? No, that's only if you don't explicitly specify the browser/device-specific <link> tags with a favicon path. See https://en.wikipedia.org/wiki/Favicon.ico .

If you don't have favicon.ico in the root consider adding one, or returning a HTTP 204 instead. Many tools and services e.g. bookmarking sites, feed readers, web crawlers etc., request a favicon.ico from the site root, and so receive a HTTP 404 if it's not present. In the worst case some frameworks will return a custom error page which is likely to be many times larger than the missing favicon.

Is it true that the png has to be named favicon.png? No, this has never been true as far as I can tell from my obsessive research.

Is it true that the ico has to be named favicon.ico? If you don't explicitly specify its <link> tag, yes. Explicitness is best, so we both name it favicon.ico and explicitly specify the <link> tag.

Why not prefix with "apple-touch-icon"? If you don't specify <link> tags, iOS looks for files prefixed with apple-touch-icon or apple-touch-icon-precomposed. Many (e.g. HTML5 Boilerplate) rely on this assumption, but:

• Explicitly specifying <link> tags is clearer and supported by Apple.
• Not hard-coding names as apple-touch-icon clears up confusion as to whether the same icons can be reused for other purposes as-is, e.g. reusing favicon-144.png for Windows pinned site.

Why use iOS precomposed icons?

• iOS non-precomposed icons add rounded corners, drop shadow, and reflective shine. Sounds great in theory, but in practice the results can be very frustrating, especially to designers.
• Non-precomposed icons don't work with Android 2.1.

Why absolute paths? Some Firefox versions require absolute paths. Since all browsers support them, it's the simplest choice.

Why not append a query string to force-refresh for all visitors? Some proxies and load balancers can fail to read query strings in edge cases.

Contribute!

Send pull requests if you have anything to add/change, providing citations and justification. I'd love to see this improve.

Note on March 6, 2020: I'm behind on merging PRs but am slowly catching up. Bear with me while I get this repo caught up. ❤️

Contributors 21

MacOS Mojave tip: How to enable favicons in Safari

Finally -- favicons!

Stacks are useful. Dark Mode is fun. The new screenshot tool and the more fully functional Finder are also welcome additions with MacOS Mojave , but my favorite new feature of Mojave is something tiny but hugely important: Safari favicons. I'm not the only one who's excited for Safari finally adding those little icons that let you quickly identify which of your open tabs is which. You know, the little red ball for CNET, the blue square with the white F for Facebook, the blue bird for Twitter, the red E for ESPN, the black, gothic T for The New York Times and so on.

The omission of favicons is the single reason I use Chrome instead of Safari on my MacBook . With Mojave, I can now use Safari, which runs more efficiently than Chrome on a Mac. After installing Mojave, however, I was surprised to see the plain, gray tabs in Safari. Turns out, you need to opt in to Safari's favicons. 

Enable Safari favicons

To turn on favicons in Safari, go to Safari > Preferences and click the Tabs tab at the top. Next, check the box for Show website icons in tabs . That's it! No restart required. When you close the Preferences window and return to Safari, your boring, uselessly gray tabs will now show colorful, cheerful favicons to help you make sense of your row of open tabs.

Originally published on July 10, 2018. Update, Sept. 25: Added new video for MacOS Mojave.

Read more: Everything you need to know about MacOS Mojave

Computing Guides

• Best Laptop
• Best Chromebook
• Best Budget Laptop
• Best Cheap Gaming Laptop
• Best 2-in-1 Laptop
• Best Windows Laptop
• Best Macbook
• Best Gaming Laptop
• Best Macbook Deals
• Best Desktop PC
• Best Gaming PC
• Best Monitor Under 200
• Best Desktop Deals
• Best Monitors
• M2 Mac Mini Review
• Best PC Speakers
• Best Printer
• Best External Hard Drive SSD
• Best USB C Hub Docking Station
• Best Keyboard
• Best Webcams
• Best Laptop Backpack
• Best Camera to Buy
• Best Vlogging Camera
• Best Tripod
• Best Waterproof Camera
• Best Action Camera
• Best Camera Bag and Backpack
• Best E-Ink Tablets
• Best iPad Deals
• Best E-Reader
• Best Tablet
• Best Android Tablet
• Best 3D Printer
• Best Budget 3D Printer
• Best 3D Printing Filament
• Best 3D Printer Deals

Favicons: everything you need to know in 2024

Favicons may be some of the smallest graphics you’ll encounter, but they have a big role in websites and branding. Here's why they matter.

Favicons are something we’ve all seen, whether we know what they are or not.

If you take a look at your open browser tabs right now, you’ll see Webflow’s ‘W’ on this open web page. This small graphical embellishment is known as a favicon. 

Let’s take a closer look at where favicons came from, how they’re used, and tips on designing your own.

The beginning of the favicon

Favicons trace all the way back to Internet Explorer 5. At the time, they lived in the root directories of websites, with the rather simple name “favicon.ico,” which is still in use today. If you favorited a website on Internet Explorer, a favicon would appear next to it in the address bar as well as your bookmarks list.

In addition to their role as a design element, favicons were also used as a primitive means of tracking visitor counts. One could gauge a website’s popularity based on the number of times a favicon had been downloaded. Thankfully, metrics and measuring blog visitors have come a long way since these rather crude beginnings.

Where you’ll find favicons

Favicons show up on the left-hand side of your desktop browser tabs. They may be small — generally at a resolution of 16x16 or 32x32 pixels on retina-based screens — but these bite-sized pieces of visual branding should not be overlooked when putting together a website.

A favicon image may take the form of a stripped-down version of a logo, a symbol, or even just a single character. Since they must fit into the small space afforded by modern browsers, they need to be simple, yet impactful. 

• If you’re looking at the HTML code of a website that has a favicon , you’ll see it in the <head> tag, and in the form:
• You may also see additional favicon.png sizes in the cod e, to accommodate different apps and devices, we'll be getting into this a bit later on in this post. Favicons aren’t limited to browser tabs and can be seen in other places that list or display websites.
• You’ll find favicons in your browser’s history. Whether you’re using Chrome, Safari, Firefox, or any other capable browser, a favicon will appear next to the website it represents. Here is how they look in Google Chrome:

• Favicons also appear in Google search results and autosuggest in the search bar, as well as bookmark dropdowns and browser toolbars. In these busy lists, favicons allow us to identify websites without even having to read any of the text.

Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.

How to use favicons — the right way

Favicons serve as visual guides, creating a more consistent user experience and overall brand identity. Just as you put effort into the harmony of CSS styles that come together in a web design, you should also pay attention to how a favicon fits into your overall theme and branding. 

Examples to think of when designing your own favicon include YouTube’s play button, Twitter’s bluebird, and Google’s colorful ‘G.’ These favicons are unique, immediately identifiable, and make the brand easy to spot when scanning tabs. 

When creating an equally memorable favicon — here are some things you should take into consideration

Make your favicon small but legible.

There are several favicon sizes to consider, but keep in mind at their smallest iteration of 16x16 pixels they need to be legible. This means coming up with a visual hook that captures the essence of a brand, giving it instant recognition.

A great example is this use of crisp text from one of our favorite design websites Behance . Even at this small scale, there’s no lack of definition, and the image appears high quality and easily identifiable.

Don’t overdo it

With such a limited amount of space, it’s best to take a minimalist approach. One of the easiest ways to create a favicon is to take an element from your preexisting logo. 

Here are some examples: 

• ‍ PetSmart has a rather large logo that would overwhelm the confines of a browser tab. For their favicon, they use just the bouncing red ball from their logo. This single graphic is an excellent representation of their brand, while still utilizing clean and simple design.
• When your logo is also a symbol, it’s easy to use it as a favicon. Apple’ s logo is a great example of this. 
• ‍ Instagram uses its camera logo for both its app button and favicon, which creates a sense of brand continuity across platforms. 

Keep it to a few characters

Along with pulling a symbolic element from a logo, you can also use a character in a favicon. There are many brands out there with favicons that use a single letter to represent who they are.

Can you guess whose favicons these are?

The swooping letter “D” is instantly recognizable as Disney, the stylized P in a red circle is from Pinterest, and the blue square with “in” ties back to LinkedIn. 

When designing a favicon, whittling it down to an essential letter or two works well in representing a brand.

Consider the color scheme 

Beyond what your favicon is, how it utilizes color is just as important. Here are some things to consider when deciding on what colors to use: 

• The background color of a browser tab is generally grey or white , or sometimes black if it has been switched to night mode. When designing a favicon, consider how it may appear against different background colors. For example, Marvel uses just red and white, which is a solid combination that stands out no matter what color a tab may be.

• ‍ Your canvas for creating a favicon is a tiny space. Use a refined palette , with colors that look good together at a minuscule scale.
• Use colors with enough contrast so that they’re distinct from one another. Clarity and definition are key.

Using a vector-based graphic is best

While it may be tempting to create something quick in Photoshop, using vector graphics will help you in the future. When you craft a favicon in Illustrator, Sketch, Figma, or another vector-based design application, it’s much easier to resize and alter it later on. 

Many designers start with an SVG-based favicon graphic and then convert them into non-vectorized files like a png, gif, jpg, or ico.

Consider creating favicons with a favicon generator

Favicon generators offer a quick way to come up with an icon and generate multiple sizes. They’re also handy in producing HTML code you can implement into your designs  by displaying them on different apps and devices. 

Use the right file format

Today, favicon.ico still has widespread support across a variety of browsers. However, more contemporary websites tend to use favicon.png. Keep in mind that Internet Explorer only supports .ico, and the .png format will not display. You can get ahead of this issue by storing both a .ico and .png version of the favicon so it will appear properly on multiple browsers. 

How to size favicons properly

The standard size for favicons is 16x16 pixels, but most designers start with 32x32 pixels to accommodate retina screens. This way, the larger favicons show up nicely on retina screens and can also be scaled down. Of course, there are other favicon sizes out there, and it’s worth mentioning that Apple-touch-icons, like those for OS Safari require dimensions of 180 x 180, Android Chrome needs a favicon at 192 x 192, and Opera Coast works best at 228 x 228. Designers generally create a variety of different sizes to accommodate both desktop browsers and other applications.

Don’t skimp on favicons

Favicons are important. Without them, our open browser tabs feel empty. We’re left with a bunch of grey space with text, which is far from noteworthy.

Favicons provide visual cues that help people recognize and — more importantly — remember your brand. If you want your brand and site to be memorable, this tiny icon can pack a big punch. 

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

9 best favicon generators

Quickly create the favicons you need with these 9 helpful favicon generators.

SVG files: what are they and how to use them?

Here’s everything you need to know about SVG files, including when and how to use them and answers to common questions.

How to design a logo: What to know about size, color, fonts, and more

Creating a logo for your business? Check out our in-depth guide.

5 Web browsers web designers should know how to design for

As a web designer, it's crucial to be aware of the different browsers your audience might use. Here's what to know about 5 of the most popular browsers.

Understanding cross-browser compatibility: 5 common issues & how to test

Cross-browser compatibility tests ensure your website reaches its intended audience without inconsistencies that could poorly impact their experience.

Vh and vw: how and why to use them in Webflow

See how the vh and vw units empower you to make your typography and other site elements truly responsive.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

Building an adaptive favicon

A foundational overview of how to build an adaptive favicon.

In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo .

If you prefer video, here's a YouTube version of this post:

A custom favicon is a great way to polish a web project. It displays on desktop browser tabs, and also inside "save for later" readers, other blog posts linking to your site, and more. Traditionally this has been done with the .ico file type, but recently browsers have allowed use of SVG , a vector format. Using progressive enhancement you can serve well supported .ico favicons, and upgrade to an .svg if available.

SVG is able to scale up and down without quality loss, and can potentially be very small in size, they can also have embedded CSS, even embedded media queries. This means if an SVG favicon is used in a reader app or bookmarks bars, there's a chance the user could get a theme relevant (light or dark) icon due to dark preference styles provided inside the SVG. The SVG then adapts using its embedded styling for light and dark user preferences.

SVG markup is XML using an .svg file type extension which allows it to hold more dynamic types of code.

Start by making favicon.svg

Make a new file called favicon.svg and add the following:

Here's my SVG file, I've sized the viewBox relevant to my artwork:

Adding shapes and paths

Next, add SVG path code. Often this means opening the SVG in a code editor, but that code is generally not human friendly. Here's a great guide that guides you through exporting and optimizing SVG from design tools.

The artwork for this GUI Challenge came from a designer who made it in Adobe Illustrator . I heavily optimized it. I ran it through SVGOMG and then hand-edited the cruft away.

Here's an example of the skull artwork path group from mine, after cleaning it:

Notice the human readable ID selectors like #eyes-and-nose and classes like .favicon-stroke . These are from my hand editing, in preparation for CSS. Adding classes and ID's is not required for your SVG to be an adaptive favicon.

Link the favicon SVG from HTML

In the <head> tag of your HTML, after the .ico favicon, add the following:

As the new icon may look identical to the .ico version verify that it is being used. Open the Network panel of DevTools. Filter by images and search for favicon:

Like HTML, you can add a <style> tag to the markup for use against that document scope:

The light theme version will be the default coloring of my favicon SVG. The styles I wrote for that were mostly stroke and fill colors:

Next, the most fun part, styling the dark theme version of your favicon. The styles for that will go into a media query within the style tag:

Mine ended up like this:

I chose to swap the bright purple borders for a nice cool dark gray ( #343a40 ), changed the skull bone color from white to a light cool gray ( #adb5bd ), but left the pink accent hat.

Now that you know how I did it, how would you‽ 🙂

Let's diversify our approaches and learn all the ways to build on the web. Create a demo, tweet me links, and I'll add it to the community remixes section below!

Community remixes

• Where I learned of this technique: @tomayac on his blog

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-02-09 UTC.