Favicons: Difference between revisions
Jump to navigation
Jump to search
(Created page with "== 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/...") |
|||
| Line 11: | Line 11: | ||
Use [http://www.imagemagick.org/script/download.php imagemagick] to combine a series of different resolution PNG files into a single ICO file. | 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. | [https://legacy.imagemagick.org/discourse-server/viewtopic.php?t=14080 This thread] contains a lot of useful examples. | ||
[[Category:Web Development]][[Category:Design]] | [[Category:Web Development]][[Category:Design]] | ||
Latest revision as of 23:20, 17 May 2022
Overview[edit]
ICO filetypes can include multiple resolutions in a single file. Make sure to utilize this.
- What Is a Favicon, Why Is It Important, and How Do I Add One? has links to a favicon generator.
- RealFaviconGenerator - Favicon generator, duh. Tool for analyzing an existing site to determine how it will perform relative to major platforms.
- HTML Favicon: A How-To Guide
- 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[edit]
Use 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:
$ convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon-64x64.png favicon-96x96.png favicon-128x128.png favicon-256x256.png ../favicon.ico
This thread contains a lot of useful examples.