Search code examples
htmlcssfavicon

how to add site icon which work on all browser?

<head>
<link rel="icon" type="image/png" href="/anime_logo/favicon32x32.png" size="32x32">
<link rel="shortcut icon" type="image/png" href="/anime_logo/favicon32x32.png" size="32x32">
</head>

my site icon is work only in firefox. how will i change this in order to work to all browser. Please help

Solution

  • You need several icons to support all browsers:

    • Classic, desktop browsers, which display a small icon in tabs.
    • Mobile browsers, which use high definition icons for bookmarks and "add to home screen" use case.
    • Modern Windows IE and Edge, which use specific icons for the Metro UI.
    • macOS Safari uses a specific, monochromatic icon for pinned tabs and Touch Bar for most recent MacBooks.

    There are basically to ways to address all these use cases:

    • Tool assisted: you can use RealFaviconGeneator, which generate all the icons and HTML code you need. Full disclosure: I'm the author of this site.
    • Manually: The Favicon Cheat Sheet is an excellent resource.