If it looks like I just threw some random words up on the screen — “Nitwit! Blubber! Oddment! Tweak!” — then you probably aren’t familiar with modern web development.
You know what a favicon is, right? It’s the little icon in your browser tab that tells you what website you’re on. Well, once upon a time (probably around Internet Explorer/Netscape era), it used to be that all you needed for a favicon was just one file: favicon.ico
.
That’s not true anymore. Now, you need a huge list of files, because reasons. Mainly because different browsers have their own different standards. So now, you need something like this:
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-256x256.png
android-chrome-36x36.png
android-chrome-384x384.png
android-chrome-48x48.png
android-chrome-512x512.png
android-chrome-72x72.png
android-chrome-96x96.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-167x167.png
apple-touch-icon-180x180.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
apple-touch-startup-image-1182x2208.png
apple-touch-startup-image-1242x2148.png
apple-touch-startup-image-1496x2048.png
apple-touch-startup-image-1536x2008.png
apple-touch-startup-image-320x460.png
apple-touch-startup-image-640x1096.png
apple-touch-startup-image-640x920.png
apple-touch-startup-image-748x1024.png
apple-touch-startup-image-750x1294.png
apple-touch-startup-image-768x1004.png
browserconfig.xml
coast-228x228.png
favicon-16x16.png
favicon-230x230.png
favicon-32x32.png
favicon-96x96.png
favicon.ico
firefox_app_128x128.png
firefox_app_512x512.png
firefox_app_60x60.png
manifest.json
manifest.webapp
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
mstile-70x70.png
yandex-browser-50x50.png
yandex-browser-manifest.json
Whew, what a list! Now make all those manually. Yeah, right.
To make this a little easier on myself, I wrote a Gulp script to take a single source image — 512×512 is usually the recommended size — and output everythingI needed. This was originally for a Ghost template (because functionality for things like favicons isn’t broken out into plugins like it is for WordPress), but I can see this coming in handy for work, too. (Now I just need to convince my team to use Gulp!)
Leave a Reply