Menu
When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
You can now simply right click the favicon. ico request and click "Block request URL".
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices :(
I got pissed and created my own favicon generator, that creates all these files and the correct HTML header for each one of them: faviconit.com
Hope you enjoy it.
If you already have a logo image that you want to transform into a favicon, then you can convert it using http://www.favicomatic.com/. It creates crisp favicons, and I haven't had to edit them after creating them. It will generate favicons at 16x16 and 32x32 and to quote them: "Every damn size, sir!". The site also supports/preserves transparency present in some pngs. Also, their site looks cool and is easy to use.
For example here is a stackoverflow logo:
Here are some of the generated favicons:
They also generate the needed html:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<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" />
I looked at the first 20 or so google results, and this was by far the best.
GIMP is a good program for that. Just save the image as PNG, then add
<link rel="SHORTCUT ICON" HREF="/favicon.png">
on the <HEAD>section of your page.
You create a icon file that's 16x16 or 32x32 or 64x64. Name it favicon.ico and place it in the root of your website public folder.
There are websites that will convert other graphic formats to .ico for you. ie. http://tools.dynamicdrive.com/favicon/
One of the best online favicon tools is FaviconGenerator.com. Fast, modern design, no fluff.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With