Brief Look At Favicon
Prepare a favicon for website.
Where To Put
In the past, favicon resides at the root of a site, and browsers will automatically try to fetch it at the site
Modern day browsers accept
rel link for icon like below in the
SVG has been been gaining popularity in many areas, including website icon. Though its scalable characteristics make it very flexible, file size can increase drastically with elements beyond simple pathing or pure vector.
Take logo of this site as example. It contains 8 characters but its SVG file size is 2M. That is because the font(ttf) is embedded within the file. Without the font, the file is only 629 bytes.
PNG, like JPEGa and GIF, is a raster file format. Its file size scales with image size.
ICO, maybe the most common format due to early browser adaptation.
Imagemagick is a popular command line tool to change PNG to ICO:
Imagemagick < 7.0
Many online tutorials show how to create icons with different sizes to optimized appearance in bookmark/tab(32x32) and top sites(96x96), like following1:
Put Everything Together (IMHO)
When I first start looking at how favicon is setup, multiple size seems to be the “norm”.
However, after checking different browsers’ behavior, all of them can scale icon on the fly. Especially for shrinking. So why not just deploy the highest resolution one?
Regarding location, there is no standard about
rel link precedency. Browser may still try
/favicon.ico even when
rel link is present.
As a result, my current preference for deploying site icon is as follow:
|256x256 (file size ~5k)