Menu
Everybody knows how to set up a favicon.ico link in their HTML:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon"> But it's silly that for only a several-byte-tiny icon we need yet yet another potentially speed-penalizing HTTP request.
So I wondered, how could I make that favicon part of a usable sprite (e.g., background-position=0px -200px;) that doubles as, say, a logo on the rest of the website, in order to speed up the site and save that precious and valuable HTTP request. How can we get this to go into an existing sprite image along with our logo and other artworks?
521
Exporting the icon for Web use is straightforward. Choose File -> Save for Web & Devices and then choose PNG-24 from the Preset pop-up menu. Click Save, enter favicon. png as the file name, and once again click Save.
If you only want one favicon for your entire domain, simply save the favicon. ico file to the root folder of your site. When uploaded, it must be accessible from http://www.yourdomain.com/favicon.ico . As soon as you upload the file, your browser should start displaying the icon for all pages on your site.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Just change the URL to point to the path of the favicon you want. Browsers, by default, look for /favicon. ico. But if you specify a different path and file it will use that instead.
I think for the most part it does not result in another HTTP request as these are usually dumped in the browser's cache after the first access.
This is actually more efficient than any of the proposed "solutions".
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
