Display a favicon on all browsers and mobile devices
Posted: Sat Dec 22, 2018 1:22 pm
Getting a favicon to work with all browsers can be a challenge. Some claim putting a favicon in the root folder is sufficient. Favicons work when displaying a tab in Chrome, Firefox, IE or Opera but many of the newer browsers require higher resolution for menus and pages. Many tablets, smart phones and iPads will not display a favicon.ico and require specific declarations to load the correct icon.
To begin, create a a png graphic file 512 x 512 pixels. There are many graphic programs that will do the job or you can use one of the links in 15 Best FREE Favicon Generators to create an icon. If you use your own software, and want a transparent background, you will need a program that can create Alpha channel transparencies. I use Paintshop Pro to create icons but there are many available, such as Adobe Photoshop. Once you have a graphic file there are websites that can convert your file into all the required sizes.
The two websites I use are REALFAVICONGENERATOR and FAVIC-O-MATIC. Both sites create icons from graphic files and can test your website to ensure you have the correct declarations, files and icon sizes present. Favicomatic has options to generate sizes which includes the safari-pinned-tab.svg icon. Note you can change the color for this icon. Unless I missed something favicomatic does not generate this icon. However favicomatic generates the mstile icons while realfavicongenerator does not although the mstile-310x150 icon has the top clipped off so I create this png file manually. Once you have the favicon files, make sure the file names match the href= side of the declarations in the header codes below as favicon generators will sometimes use different file names.
Once you download the favicon files, do not move them to a sub-folder until you have favicons working and are familiar with changing their location. I had issues, especially with Safari, when the files were not present in the root folder. Even with favicons in the root folder you need to create declarations in the header file. The code below should be placed between the <head> </head> tags. For most programs this will be your page or theme's header.php file. However some programs are written differently, like phpBB. With phpBB the declaration must be added to the active theme's overall_header.html file. (This website would not display an icon on my iPad until I added these lines of code and files)
You may not need all the sizes specified below but, using these sizes, I have not had any issues displaying favicons on different devices. Make sure you delete the line(s) for any sizes you are not going to use.
In addition to icons and declarations, manifest.json and browserconfig.xml files are also required. The paths for these files are specified in the code above. Since some of the configuration files generated online had formatting issues, you can alternately use the download link below which contains three files header.txt, browserconfig.xml and manifest.json. The browserconfig.xml and manifest.json should be copied to the root while header.txt is for reference and contains the declaration codes shown above. These codes and files were tested and should work correctly provided the correct icons are present. The version below was updated to remove sizes= statements in the meta name as this is no longer supported.
Once the icons and files are installed you can check your site online, or with a browser. You can use Chrome, Firefox or any browser containing web developer tools. In Google Chrome open your website and press Ctrl+Shift+I. In Firefox open your website and press Ctrl+Shift+K. Any missing files will be displayed with a warning on the right side of your screen.
To begin, create a a png graphic file 512 x 512 pixels. There are many graphic programs that will do the job or you can use one of the links in 15 Best FREE Favicon Generators to create an icon. If you use your own software, and want a transparent background, you will need a program that can create Alpha channel transparencies. I use Paintshop Pro to create icons but there are many available, such as Adobe Photoshop. Once you have a graphic file there are websites that can convert your file into all the required sizes.
The two websites I use are REALFAVICONGENERATOR and FAVIC-O-MATIC. Both sites create icons from graphic files and can test your website to ensure you have the correct declarations, files and icon sizes present. Favicomatic has options to generate sizes which includes the safari-pinned-tab.svg icon. Note you can change the color for this icon. Unless I missed something favicomatic does not generate this icon. However favicomatic generates the mstile icons while realfavicongenerator does not although the mstile-310x150 icon has the top clipped off so I create this png file manually. Once you have the favicon files, make sure the file names match the href= side of the declarations in the header codes below as favicon generators will sometimes use different file names.
Once you download the favicon files, do not move them to a sub-folder until you have favicons working and are familiar with changing their location. I had issues, especially with Safari, when the files were not present in the root folder. Even with favicons in the root folder you need to create declarations in the header file. The code below should be placed between the <head> </head> tags. For most programs this will be your page or theme's header.php file. However some programs are written differently, like phpBB. With phpBB the declaration must be added to the active theme's overall_header.html file. (This website would not display an icon on my iPad until I added these lines of code and files)
You may not need all the sizes specified below but, using these sizes, I have not had any issues displaying favicons on different devices. Make sure you delete the line(s) for any sizes you are not going to use.
Code: Select all
<link rel="favicon" href="/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-192x192.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-128x128.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png">
<link rel="manifest" href="/manifest.json">
<link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5'>
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content=" ">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png">
<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144x144.png">
<!-- Windows 8.1 + IE11 and above -->
<meta name="msapplication-config" content="/browserconfig.xml">Once the icons and files are installed you can check your site online, or with a browser. You can use Chrome, Firefox or any browser containing web developer tools. In Google Chrome open your website and press Ctrl+Shift+I. In Firefox open your website and press Ctrl+Shift+K. Any missing files will be displayed with a warning on the right side of your screen.
Archive