safari pinned tab icon size

Safari Web Content Guide

Table of Contents
Jump To…
Download Sample Code

Creating Pinned Tab Icons

Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible. You can set the icon that the user sees when they pin your site by providing a vector image.

Providing the Vector Image

Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent (replacing "website_icon" with your own file's name).

In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value ( #990000 ), an RGB value ( rgb(153, 0, 0) ), or a recognized color-keyword, such as: red , lime , or navy .

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

SVG, Favicons, and All the Fun Things We Can Do With Them

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks .

One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support , with more support on the way.

Here’s the code for how to add favicons to your site. Place this in your website’s <head> :

And place this code in your site’s web app manifest :

Browsers that do support SVG favicons will override the first link element declaration and honor the second instead. Browsers that do not support SVG favicons but do support web app manifests will use the higher-resolution images. All other browsers fall back to using the favicon.ico file. This ensures that all browsers that support favicons can enjoy the experience.

You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation.

Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg . This is to support Safari’s pinned tab functionality , which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit.

Here’s more detail on the current level of SVG favicon support:

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you.

Ease of authoring

It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard , meaning you can use them without any further tooling or platform lock-in.

Future-proofing

Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get .

Performance

SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand . By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot.

This might seem a bit extreme, but when it comes to web performance, every byte counts!

Another cool thing about SVG is we can embed CSS directly in it . This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element.

Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries.

Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes.

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns=" https://t.co/TJalgdayix " viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020

In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept.

Dark Mode support

Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries .

For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat!

Other media queries

Dark mode support got me thinking: if SVGs can support prefers-color-scheme , what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider:

Use light-level to desaturate favicon colors in a low-light environment.
Use inverted-colors to “flip” inverted colors to preserve branding, or to ensure a photorealistic favicon looks as intended.
Use prefers-reduced-motion to remove favicon animation . Ideally, we’d avoid animating favicons in the first place , as they can be a trigger for ADHD and other related disabilities.
Use forced-colors and/or a Windows High Contrast Mode media query to make sure the favicon holds up visually in a high contrast color context. Remember to use color keywords to keep the favicon’s colors dynamic!

Mockup of four SVG favicon treatments. The first treatment is a pink star with a tab title of, “SVG Favicon.” The second treatment is a hot pink star with a tab title of, “Light Level SVG Favicon.” The third treatment is a light pink star with a tab title of, “Inverted Colors SVG Favicon.” The fourth treatment is a black pink star with a tab title of, “High Contrast Mode SVG Favicon.” The tabs are screen captures from Microsoft Edge, with the browser chrome updating to match each specialized mode.

Keep it crisp

Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid , the guide a computer uses to turn SVG math into the bitmap we see on a screen.

Here’s a simplified example using a square shape:

A crisp orange square on a white background. There is also a faint grid of gray horizontal and vertical lines that represent the pixel grid. Screenshot from Figma.

When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect:

A blurred orange square on a white background. There is also a faint grid of gray horizontal and vertical lines that represent the pixel grid. Screenshot from Figma.

A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma , Sketch , Inkscape , or Illustrator . These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position.

Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget .

Go the extra mile

In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari ¹ , chat app unfurls , a pinned Windows start menu tile , social media previews, and homescreen launchers.

If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net .

A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam:

As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann

I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999.

¹ I haven’t been able to determine if Safari is going to implement SVG favicon support, but I hope they do. Has anyone heard anything?

Ah, this seems SUPER useful for something I’m working on right now – but here’s a question: is there any way to check browser support for this with JS? I imagine CSS.supports wouldn’t pick up on this at all (since it’s not CSS).

Oh great, I’m glad this can help!

I’m honestly not sure if you can check this sort of thing in JS. I’m assuming it’s not something you can target, as it’s just just a string in the link ‘s href attribute? I’d love to hear otherwise.

I’ve been waiting to be able to use media queries via the media attribute. Not only would this allow us to avoid inline CSS in SVGs, but it would allow dark mode icons in maybe PNG if we do desire.

Another neat trick are animated favicons: https://blog.tomayac.com/2019/12/01/animated-svg-favicons/ . More of an experiment, though, probably don’t do this on a production site.

Shouldn’t the favicon.ico be linked before favicon.svg since it’s essentialy a fallback?

Tried implementing it on my site and Chrome seems to always pick the last one. Then again, that might by caused by it being a PNG file…

It happends to me too, even I have an icon file. It looks like Chrome has a preference for ico files, if I comment out the line with the link to the ico file, the browser shows the svg file.

Urgh I’m getting this too, why on earth is Chrome doing this. If I have the favicon.ico file at the root and delete the line, it still defaults to the .ico file and not the .svg. Bloody bonkers.

This is helpful, thanks a lot.

impressive amount of resource on the topic, great article!

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 Use Pinned Tabs in Safari Browser on Mac

The neat thing about pinned tabs is that they stay in place, even when you open a new Safari window or quit and reopen Safari. And when you click a link to another website from a pinned tab, the other website opens in a new tab, ensuring your pinned tab always shows the website you pinned.

Keep reading to learn all you need to know about using pinned tabs in Safari.

How to Pin Tabs in Safari

You can also select Window -> Pin Tab from the menu bar, or right-click (Ctrl-click) a tab, then choose Pin Tab from the contextual menu.

How to Rearrange Pinned Tabs in Safari

Pinned tabs aren't fixed in place. If you have multiple pinned tabs, you can rearrange them in the Tabs bar as you please.

How to Unpin a Tab in Safari

To unpin a website tab, just drag the pinned tab to the right side of the tab bar and it will expand to become a normal tab.

How to Duplicate a Pinned Tab in Safari

To duplicate one of your pinned tabs, right-click (or Ctrl-click) it, then choose Duplicate Tab from the contextual menu.

How to Close a Pinned Tab in Safari

To close a pinned tab, simply right-click (or Ctrl-click) the tab, then choose Close Tab .

Get weekly top MacRumors stories in your inbox.

10 Reasons to Wait for Next Year's iPhone 17

Apple Apologizes for 'Crush' iPad Pro Ad, Won't Put It on TV

Every Model of Apple's M1 iPad Air Drops to Record Low Prices on Amazon

iPad Pro M4 Silver and Space Black Feature Purple

iPad Pro's M4 Chip Outperforms M3 by Up to 25%

What’s New With the iPad Pro Magic Keyboard

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, M4 chip, and redesigned Magic Keyboard accessory.

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

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.

How to Create Safari Pinned Tab Icons →

December 22, 2015 · 08:00 · Wojtek Pietrusiewicz

Craig Hockenberry:

The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser. The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the icon on the pinned tab. Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.

Personally, I went with John Siracusa’s approach and it worked fine. I had to use Affinity Designer though, Illustrator did not output a compatible file for some reason. I really should get around to making one for this site…

Surfin’ Safari Details How to Use Apple’s San Francisco Font in CSS Myles Maxfield: Web content is sometimes designed to fit in with...
Watch Out for This URL That Will Crash Your Safari on Mac and iOS Benjamin Mayo: Watch out for a new prank circling Twitter and other social...
The Chrome Distortion: How Chrome Negatively Alters Our Expectations Chris Thoburn: Chrome has taught us to idealize features for so...
Introducing Safari Technology Preview Ricky Mondello: Starting today, there’s a new, convenient way to...
WebKit on Safari, the Web, DCI-P3, and sRGB Dean Jackson: The past few years have seen a dramatic...
What Spectre and Meltdown Mean for WebKit Filip Pizlo, for WebKit.org: This document explains how Spectre and Meltdown affect...

Chcesz zwrócić mi na coś uwagę lub skomentować? Zapraszam na @morid1n .

Comments are closed.

Download Free

How to Pin Tabs on Safari

It's free and super easy to set up

Safari is one of the most popular web browsers, and for good reason. It offers a sleek design, fast browsing, and numerous features that make web surfing more efficient. One of these features is the ability to pin tabs. Just as you might pin a note to your desk, you can pin a tab in Safari to keep it at the forefront of your browsing experience. This article will guide you through everything you need to know about pinning tabs in Safari.

Understanding Pinned Tabs in Safari

Before getting into the nitty-gritty details of how to pin tabs in Safari, it's important to understand what a pinned tab is and how it differs from a regular tab. When you pin a tab in Safari, it shrinks to a small icon-like representation on the left side of the tab bar. This allows you to keep important tabs visible at all times, without taking up valuable screen real estate. Additionally, pinned tabs have some unique behaviors that make them ideal for certain use cases.

Benefits of Pinning Tabs

Pinning tabs can be useful in a number of scenarios. For example, you might pin a tab containing your email inbox, so you can always see when new messages come in. Or you could pin a tab with your favorite news site, so you can quickly check for updates throughout the day. Another benefit of pinned tabs is the fact that they persist across browser windows and restarts. This can be particularly handy if you have a collection of tabs that you use frequently and want to access quickly.

If you're someone who likes to keep a lot of tabs open at once, pinned tabs can also help you stay organized. By designating certain tabs as "pinned," you can easily distinguish them from other tabs and avoid accidentally closing them. This can save you time and frustration, particularly if you're working on a project that requires you to switch between multiple tabs frequently.

Limitations of Pinned Tabs

As useful as pinned tabs can be, they do have some limitations. For example, pinned tabs don't display the full title of the page they represent. This can make it challenging to identify tabs at a glance, particularly if you have several pinned tabs. Additionally, some websites may not be optimized for pinned tabs and may have unpredictable behavior when pinned. However, despite these limitations, many users find pinned tabs to be a valuable addition to their browsing arsenal.

One potential workaround for the issue of truncated tab titles is to use emoji or other symbols in the tab title. This can help you quickly identify the tab you're looking for, even if the title is cut off. Additionally, some users find it helpful to group related tabs together in a specific order, so they always know which tab to click on first.

Another limitation of pinned tabs is that they can sometimes interfere with other browser features. For example, if you have a lot of pinned tabs, they may take up so much space on the tab bar that you can't see the full URL of the page you're currently viewing. This can make it difficult to know if you're on a secure website or not. To address this issue, you can unpin some tabs or use Safari's "Show Full Website Address" feature, which displays the full URL in the address bar.

Overall, pinned tabs can be a powerful tool for staying organized and efficient while browsing the web. By understanding their benefits and limitations, you can make the most of this feature and customize it to meet your specific needs. Whether you're a power user or a casual browser, pinned tabs are definitely worth exploring in Safari and other modern browsers.

How to Pin a Tab in Safari

Now that you understand what pinned tabs are and how they work, let's dive into the details of how to actually pin a tab in Safari. The process is relatively straightforward, and can be accomplished in just a few clicks.

Pinning a Tab on macOS

To pin a tab in Safari on macOS, follow these steps:

Open the desired website in a new tab.

Click and hold on the tab you want to pin.

Select "Pin Tab" from the context menu.

The tab will now be pinned to the left side of the tab bar. You can click on it at any time to bring up the corresponding page.

Pinning a Tab on iPadOS

The process of pinning a tab on iPadOS is slightly different, but still simple. Here's what to do:

Swipe left on the tab you want to pin.

Select "Pin" from the options that appear.

Like on macOS, the tab will now be pinned to the left side of the tab bar.

Managing Pinned Tabs

Now that you know how to pin tabs in Safari, it's important to know how to manage them. After all, if you end up with too many pinned tabs, they can start to become unwieldy!

Rearranging Pinned Tabs

If you want to rearrange the order of your pinned tabs, you can do so by clicking and dragging them to a new position. This can be useful if you have a particular order you like to keep your tabs in, or if you want to group similar tabs together.

Unpinning Tabs

If you no longer need a tab to be pinned, you can unpin it by right-clicking (or Control-clicking) on the tab and selecting "Unpin Tab" from the context menu. Alternatively, you can drag the tab away from the pinned area and it will become a regular tab again.

Updating Pinned Tab Icons

By default, pinned tabs display an icon representing the website they correspond to. However, in some cases, this icon may be outdated or incorrect. To update the icon for a pinned tab, simply right-click (or Control-click) on the tab and select "Reload Pinned Tab". This will refresh the tab and update the icon to the current one for that site.

Keyboard Shortcuts for Pinned Tabs

If you're a power user, you may want to take advantage of keyboard shortcuts to make managing your pinned tabs even easier. Here are a few of the most useful shortcuts:

Navigating Between Pinned Tabs

Use Command + [number keys] (e.g. Command + 1, Command + 2, etc.) to quickly switch between your pinned tabs.

Pinning and Unpinning Tabs with Shortcuts

Use Command + Shift + P to pin or unpin the currently active tab.

Troubleshooting Common Issues

Despite Safari's generally smooth performance, there can be some issues that arise when using pinned tabs. Here are a few of the most common issues, along with potential solutions:

Pinned Tab Disappears After Restart

If you find that a pinned tab disappears after you restart Safari, it may be due to a glitch in the application. Try unpinning the tab before quitting Safari, then pinning it again once you reopen the browser.

Pinned Tab Not Loading Correctly

Sometimes, Safari may have trouble loading a pinned tab correctly, particularly if the website has recently undergone changes. To fix this, simply unpin the tab and reload it as a regular tab. Once it's loaded correctly, you can try pinning it again.

Wrapping Up

Now that you know how to pin tabs in Safari, you can take advantage of this handy feature to streamline your browsing experience. Whether you're pinning tabs for quick access to your email, news, or any other frequently visited sites, Safari's pinned tabs can help you stay productive and efficient.

Let's set you up !

Working on the web!

Student Tips

Startup Tools

Browser Glossary

Browser Tips

Favicon Generator. For real.

All browsers.

All platforms

Your favorite technologies

Submit an image (PNG, JPG, SVG...), at least 70x70. Your image should be 260x260 or more for optimal results.

Favicon for Desktop Browsers and Google Result Pages

The classic favicon is used by desktop browsers and other platforms. For example, search engines such as Google and Yandex are showing this icon in their search results.

Desktop browsers

Default theme, dark theme / incognito, google result pages.

The favicon for desktop browsers is often the web site logo itself. However, a lack of contrast with the tabs or Google result pages can disrupts the appearance of the icon. Adding a solid background can make your favicon more resilient.

Favicon for iOS - Web Clip

iPhone and iPad users can pin your web site on their home screen. The link looks like a native app.

Dedicated picture

Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this?

Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its design. For example, if your favicon features a square border, it will be cut at the corners. Look at the sample on the left and check how your favicon will be rendered on iOS. What do you want to do?

iOS 7 and Later

Ios 6 and prior, miscellaneous.

If your master picture does not fit iOS well, you can submit a picture designed especially for iOS.

Favicon for Android Chrome

Add to Homescreen is a also a feature of Android Chrome. Your visitors can mix their natives apps and web bookmarks.

Main settings

Android is flexible regarding icon design. However, it automatically rounds icons which can be bad news if your icon needs square corners. Also, make sure your favicon will always be prominent, whatever the background. Use the options below to find the best fit.

Android Chrome M39 introduces a manifest that helps you refine the behavior of the Add to Homescreen link.

Modern versions

Android Chrome 39 and later

Legacy versions

Android Chrome 38 and prior

If your master picture does not fit Android well, you can submit a picture designed especially for Android.

Windows Metro

Windows 8 and 10 users can pin your web site on their desktop. Your site appears as a tile, just like a native Windows app.

Transparent pictures make better tiles. Look at the sample on the left and check that your tile looks good. You can also choose the background of the tile.

Windows 8.0 / IE 10

Windows 8.1 and 10 / ie 11 and edge.

These icons are declared in a dedicated browserconfig.xml file, generated along with the icons.

If your master picture does not fit Windows well, you can submit a picture designed especially for Windows.

macOS Safari

Safari implements pinned tabs and takes advantage of the MacBook Touch Bar. This feature relies on an SVG icon. This icon must be monochrome and Safari does the rest.

Pinned tab - No focus

Pinned tab - Focus

If your master picture does not fit well, you can submit a picture designed especially for Safari.

Facebook Open Graph

Make your site ready for Facebook, the RealFaviconGenetor's way:

Generate valid Open Graph meta and image - Many tools do it wrong
Control Facebook format - We reverse-engineered Facebook Open Graph management
Preview for classic desktop, Android and iOS - So you know how your wanna-be visitors see your content on Facebook

Try the Facebook Open Graph metadata editor

Favicon Generator Options

Version/Refresh
Compression
Scaling algorithm
Additional files

When a browser loads a favicon for the first time, it tends to cache it and to never load it again. When your web site is not new and you want to update your favicon, that can be a problem: your loyal visitors won't notice the change. A workaround is to append a version to the favicon URLs as a query parameter.

Compress the favicon pictures and reduce their size by 50%-80%. Learn more

Something went wrong with the compression. Sorry for this :-/

Would you be so kind to report an issue ? Please attach your master picture.

Expected compression rate: %

We let you choose the scaling algorithm which provides the best result for your picture. Please wait a few seconds while we prepare the previews.

When adding a link to the home screen, the user can choose a caption. By default, this is the bookmarked page title, which is usually fine. However, iOS and Windows 8 let you override this default value.

Your favicon is not correct

Your master picture, missing pictures.

You have chosen to use a specific picture fot the iOS Web clip, but you haven't uploaded any picture. Please upload a picture or choose another option.

You have chosen to use a specific picture fot the Windows 8 tile, but you haven't uploaded any picture. Please upload a picture or choose another option.

Missing path

You have chosen to not place your files in the root of your web site. Please specify a path.

Why put the favicon pictures in the root directory

When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site. You may want to place them in a sub-directory, for example in http://mywebsite.com/icons/ , just to make things clearer. However, there are three drawbacks with this approach:

Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico .
iOS devices look for files such as apple-touch-icon-144x144.png at the root of the web site, as described by Apple . This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway), but following Apple conventions is probably the best move.
By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
Several services, such as Yandex , look for favicon.ico in the root directory.

Favicon compression

RealFaviconGenerator can compress the generated pictures. You usually get a 50%-80% compression rate. Not bad! The compression works well on all tested platforms . Even better!

The compression is lossy, meaning you might notice differences between the original and compressed pictures. Yet the differences are (supposed to be) minimal:

You can see slight differences in the gradient part:

When you download the compressed pictures, make sure they match your standards.

Check your favicon

Check your existing favicon with our online tool and see what can be improved.

Why RealFaviconGenerator

No hard decision.

With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes

You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.

Compelling design, a platform at a time

Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.

Instant feedback

How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How do I get Safari 9 to use my new pinned tab icon?

Safari 9 on OSX supports showing icons on its new pinned tabs, using the following syntax:

However after adding this line, reloading my page, and pinning the tab, the icon doesn't show up.

How do I tell it to refresh the icon?

4 Answers 4

Safari is very keen to cache these icons, and indeed the lack of them. Once it has decided there is (or is not) an icon on your site, it will retain that knowledge, potentially for a very long time, and no amount of restarting or refreshing will change that.

You can encourage it to re-check for icons by deleting the contents of the following folder:

And then restarting Safari.

1 That directory doesn't exist for me? – Jonathon Hill Nov 25, 2015 at 17:28
This directory won't be created until a pinned site has downloaded a pinned icon. Try Apple's website to kickstart it. – mix3d Mar 21, 2017 at 1:46
I disagree with that method, most Users cannot access that folder without special commands. See "Clear History" answer by @Flimm – Sebastian Scholle May 6, 2019 at 9:34

Unpin any pins you want to reload then restart safari. Click on the 'go' menu in the finder toolbar and hold down the option key, this reveals the hidden Library directory.

Navigate to the safari directory in the library folder and delete the template icons folder.

This resets the cache safari keeps for icons.

Start Safari and pin away!

Open Safari, click "Safari", "Clear History...", then click the button "Clear History".

That worked for me.

Open Safari > Develop > Empty Caches.
Refresh the page

Note: If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

That did the trick for me ;)

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged favicon safari ..

The Overflow Blog
Between hyper-focus and burnout: Developing with ADHD
Featured on Meta
Our Partnership with OpenAI
Imgur image URL migration: Coming soon to a Stack Exchange site near you!

Hot Network Questions

Using already existing bolt width
Calculating structural stability of a doped plane
Can you share you got a Major Revision on LinkedIn?
Taking the inverse (not the reciprocal) of both sides of an inequality
4 term exact sequence diagram, surjective map
How to use DOUBLE as a verb
Every Forbidden thing has a corresponding opposite
Name of (90’s?) movie or tv that had an alien scorpion creature that attaches to a forearm as a weapon/tool?
Best way to drive multiple LED strips at distinct times with one LED driver
Which were the reactions to Hume's problem of induction from scientists practicing in the field?
Reproduce Knuth's circle and triangle examples
What Do The New Geometry Nodes Pink Colored Rotation Sockets in 4.1 mean?
60's or 70's book about a planet of only women
Could Android go on PC?
What is the meaning of "they've got life beat."?
Shortest battleship game, to find number of battleships
How far can you push Object Oriented Programming?
Sample size and coefficient of variation
How can I save a dating relationship when I am promoted and she will be in my vertical reporting chain?
How to move a layer to a group using Python code in ArcGIS Pro?
Is it a bad idea to design a purposefully inconsistent magic system?
Generic Shor's algorithm with Qiskit
Almost sure convergence using exponential tail bound
When is it worthwhile to report academic misconduct of a referee?

Apple Watch
Accessories
Digital Magazine – Subscribe
Digital Magazine – Info
Smart Answers
Let Loose iPad event
New iPad Pro
New iPad Air
Best Mac antivirus
Best Mac VPN

When you purchase through links in our articles, we may earn a small commission. This doesn't affect our editorial independence .

iOS 12: How to enable favicons (site icons on tabs) in Safari

For years, Safari has ignored one of the most useful tiny little features of modern web browsers: favicons. Those are the little site-specific icons that show up in browser tabs and bookmark lists to help you quickly identify sites.

In iOS 12 (and macOS Mojave ), favicons are finally supported in Safari! But you have to turn them on first. The feature is most useful for those who use the iPad or an Plus-sized iPhone, which show browser tabs in a single window, but you’ll see Favicons on your website “cards” in portrait orientation on an iPhone, too.

Favicons—those little site icons on tabs—are most useful on iPads where you can see many tabs at once.

Enabling Favicons

To turn favicons on, open Settings . Scroll down to Safari and tap on that (it’s in the list of Apple apps). Scroll down to the General section and flip the switch next to Show Icons in Tabs .

That’s it! Now favicons will show up in your Safari tabs.

On the left, Safari cards on iPhone without favicons. On the right, with favicons enabled.

Author: Jason Cross , Senior Editor

I have written about technology for my entire professional life - over 25 years. I enjoy learning about how complicated technology works and explaining it in a way anyone can understand.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .