If I combined multiple .PNG files to make a favicon.ico file what is the proper code for it?-CodePudding

I combined with imagemagick 5 .png files to make one favicon.ico file, the sizes were 16x16, 32x32, 64x64, 96x96, 144x144.

Is it okay to use this code


<link rel="icon" href="/favicon.ico">

<link rel="icon" sizes="16x16 32x32 64x64 96x96 144x144" href="/favicon.ico">

<link rel="icon" sizes="16x16" sizes="32x32" sizes="64x64" sizes="96x96" sizes="144x144" href="/favicon.ico">

I have tried them all but I am not sure which is the correct/proper one

CodePudding user response：

Favicons are different for different browsers and devices. So you should be able to specify the favicons sizes using the following HTML individially:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
 
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
 
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
 
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
 
<link rel=icon href=gnome.svg sizes="any" type="image/svg xml">

CodePudding user response：

You can safely use this:

<link rel="icon" href="/favicon.ico"/>

However, you probably lack PNG icons. favicon.ico is an old artifact, originally introduced by Internet Explorer. It has been replaced long ago with PNG icons. While favicon.ico is still useful, you should not rely on it to implement the favicon of a modern website.

I suggest you to:

Not embed 5 images, as they make the final file unnecessary large. Rather follow Microsoft recommandations with just 16x16, 32x32 and 48x48.
Add two 16x16 and 32x32 PNG icons with

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>

Even with these icons, you still lack a few icons to fully support all platforms, such as iOS. You can generate them all, along with HTML code, with RealFaviconGenerator (I'm the author of this service).