Generated icons and HTML code For two or three years, the reference has been to generate as many icons as possible in order to cover all cases.

You cannot just use a 'single design fits all' approach. For example, Google is using transparent icons for its own native apps on Android, while iOS icons cannot be transparent at all. Design As soon as you support multiple platforms, you are facing multiple design guidelines.You cannot just use a single 'one size fits all' image anymore. Maybe Windows 10 (and Edge) and the new Mac Book Pro Touch Bar, too (macOS Safari). Nowadays, you want to support iOS (and iOS Safari) and Android (and Android Chrome). Supported platforms Ten years ago, you only wanted to support desktop browsers and the solution was to generate the classic favicon.ico picture.When creating a favicon, you want to take the following factors into account:

I looked at the first 20 or so google results, and this was by far the best. The site also supports/preserves transparency present in some pngs.Īlso, their site looks cool and is easy to use.įor example here is a stackoverflow logo: It will generate favicons at 16x16 and 32x32 and to quote them: 'Every damn size, sir!'. It creates crisp favicons, and I haven't had to edit them after creating them. If you already have a logo image that you want to transform into a favicon, then you can convert it using.

How to make a favicon with gimp