Open root

Favicons

Favicons are icons provided by webpages for display within browser tabs. They enable quick visual identification.

Generate Assets

Unfortunately, there is no universal standard for favicon sizing or routing. Luckily, RealFaviconGenerator automates the entire process and explains the rationale behind all the assets it produces. Once your actual icon is designed (as a 260x260 PNG or SVG file), simply upload it and follow the steps to create a favicon for all the most common use cases including:

Verification

The best way to verify your webpage's favicon looks right is to view it on all the platforms you care about. While verifying your favicon on Safari, you may need to clear the cache.

Apple Platform Considerations

Safari supports favicons as documented in Creating Pinned Tab Icons. Furthermore, iOS has rich, built-in support for web apps. To leverage this functionality, refer to Configuring Web Applications.

Additionally, you may find the following links generally informative:

Dark Mode Variant

While the web has gained some support for dark mode interfaces, favicons remain slightly out of reach at the time of this writing. Specifically, Safari has only partial support as clarified by caniuse.com:

Safari 9+ has support for "pinned tab" SVG icons, but this requires an unofficial rel="mask-icon" to be set and only works for all-black icons on Pinned Tabs.

The following articles corroborate this fact:

For the time being, you may want to consider applying a shade of gray to the mask-icon used by Safari so that it appears reasonably in either Light or Dark Mode, especially since some users may switch throughout the day and the mask-icon is not refreshed when the mode switches. For instance, apple.com uses #888888.