Website Performance: Optimizing FavIcon

We talk about so many things when website optimization topic comes but rarely we talk about optimizing favicon. Even if we read about favicon then we just ignore it and try to optimize everything else first.

Favicon is an image so optimizing FavIcon can give us good result. My new favicon is half of the size of earlier icon.

All recent versions of Web Browsers now support png file format for FavIcon, so we can easily use png format if optimizing .ico file format is any difficult. IE11 still does not support gif file format but if you are fan of animated gif then you can use animated gif in HEAD section and put favicon.ico in document Root. Internet Explorer will take it from there.

Having FavIcon is necessary. If you do not have it then your error log will be flooded with 404 error due to missing FavIcon. So, even you just have a blog, get a favicon. If no favicon mention found in Head section then Browser will search in document root like this example.com/favicon.ico.

I just got favicon for Apple devices as well. It is 57*57px. Higher resolution Apple devices need higher resolution for better look. But not an image editing guy, I just stopped there.

Here is the code I am using in Head section:
<link rel="shortcut icon" href="http://sf.satya-weblog.com/media/fav/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="http://sf.satya-weblog.com/media/fav/apple-touch-icon57x57.png" />

There are plenty of websites offering Favicon creation online. You can use anyone of them but at last check the size of each favicon file. You can use ImageMagic or Gimp for reducing the size. In Gimp,
Go to Image -> Mode -> Indexed...

Select colors depth you want to use. Minimum colors we use, minimum size of file we get.

Here are icons I got for myself but only using plain favicon and bigger favicon for Apple. No animated gif for now.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>