Editing Favicons

== Overview ==

ICO filetypes can include multiple resolutions in a single file. Make sure to utilize this.

* [https://www.seoptimer.com/blog/what-is-a-favicon/ What Is a Favicon, Why Is It Important, and How Do I Add One?] has links to a favicon generator. 
* [https://realfavicongenerator.net/ RealFaviconGenerator] - Favicon generator, duh. Tool for analyzing an existing site to determine how it will perform relative to major platforms.
* [https://careerkarma.com/blog/html-favicon/ HTML Favicon: A How-To Guide] 
* [https://mobiforge.com/design-development/adding-favicons-in-a-multi-browser-multi-platform-world Adding favicons in a multi-browser multi-platform world] - mobiForge. A lot of detailed information about sizes, platforms, and markup needed to deliver all the formats and sizes of favicons.

== Creating ICO files with multiple resolutions ==

Use [http://www.imagemagick.org/script/download.php imagemagick] to combine a series of different resolution PNG files into a single ICO file.

On Mac OS, install imagemagick with `brew install imagemagick`.

To combine a series of different sized PNG files into a single ICO file:

<syntaxhighlight lang="bash">
$ convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon-64x64.png favicon-96x96.png favicon-128x128.png favicon-256x256.png ../favicon.ico
</syntaxhighlight>

[https://legacy.imagemagick.org/discourse-server/viewtopic.php?t=14080 This thread] contains a lot of useful examples.

[[Category:Web Development]][[Category:Design]]