Wednesday, January 24, 2024
Jan 24 (Wed) – Favorite Icons
You know, that cute teensy icon that appears in your browser tab, bookmark, or desktop shortcut (if you’re into that sort of thing).
They used to appear just to the left of the web address in your browser, too. But browsers stopped doing that because some clever people were building fake web sites that looked exactly like the real thing (like, say, a bank) but the web site icon looked like a green padlock, making some folks think their connection was secure when it really wasn’t. Clever.
.
As part of my glacial pace of web site development I spent a few hours learning about ‘favicons’. Pro tip: If you ever find yourself doing similar stuff and you want to keep your web site’s files and directories organized neat and tidy, don’t do what I did.
.
I tried to move my favicon files to a different directory but no matter what I coded the icon wouldn’t be in the browser. It turns out that not only do different web browsers and different operating systems systems expect to see certain icon image types, resolutions, and color depths, they also expect the file to be in a default location.Hard coded.
.
The solution is to upload your image to a web site like this: Favicon Generator and let the web site analyze your image. It converts your image to icons and displays it in different browsers and on different devices so you can see what your icon would look like to whoever is lookin’. .
You can test drive that web site if you want, just right click on the above picture and save it to your device. Then pop open that web site, upload the image, and have a look around to see what’s what.
.
When you’re satisfied you click the ‘make my icon’ button or whatever and the site creates the code you must add to your web pages, and it creates a zip file with a bunch of individual files for all the possible variants. In the olden days it took just one image and one line of code. These days… I wish.