Working on a new site means I need to include a favicon. The magical favicon is a design treatment that is made up of a small image or icon that can represent a website or web page.
Where Favicons are Found
Favicons are commonly displayed in the browser’s address bar next to the web URL, but can be found in other other areas:
- Address bar
- Links bar
- Bookmarks/Favorites
- Tabs
- “Dragged to Desktop”
Since they are found in and around the browser as well as sometimes on a desktop when a bookmark is dragged to a PC’s desktop, having a favicon is an important site asset.
Image Formats for Favicon
Internet Explorer 5 first started using favicons and only through the ICO image file format.
Other browsers have since widely adopted the favicon and support more file formats. Most browsers support GIF, JPEG, and PNG.
PNG favicons
Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the PNG format can be preferable.
Supported from the following versions:
Desktop
- 4
- 2
- 11
- 9
- 3.1
Mobile / Tablet
- No
- 2.1
- No
- 55
- 51
SVG images are also supported–but only in Firefox and Safari at the time of this writing.
SVG favicons
Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the SVG format can be preferable to more easily support higher resolutions or larger icons.
Supported from the following versions:
Desktop
- 57
- 4
- No
- No
- 9
Mobile / Tablet
- 9.0
- No
- No
- No
- No
The ICO format is the original responsive image format as it can contain multiple images at different sizes like an image storage locker.
For example, a browser will use the 16×16 pixel ICO image. However, if a browser is on a computer with a retina screen, it might pick out the 32×32 pixel image instead leaving the smaller image behind.
Since all browsers support ICO file format, going with this “responsive” ICO image format makes the most sense to me.
Creating a Favicon
For Macs, there is a great application called Icon Slate that makes creating an ICO file easy.1
Using my logo as the image source, I exported different sizes and placed them in their respective slots:
Once the images are lined up in their respective sections, I start the build process by selecting File > Build which produces a hot ‘n’ fresh ICO file.
Inserting a Favicon into a Web Site
Making sure to rename the file to favicon.ico, place the ICO file in the root or main directory of your site:
By placing the file in the root directory and giving the file this specific name, the browser picks up the favicon file automatically. No fuss, no muss.
This way updating the favicon then becomes easy: in the future, create a new image, rename it favicon.ico, and replace the file on the server.
What If I Don’t Have Access to My Root Directory?
If there is a reason I could not drop the ICO file in the root directory, I could then tell the browser that a favicon would be found elsewhere through a bit of HTML in the document header:
<link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" />
This link approach is practical if you cannot access the root of a web site for one reason or another and still want to deliver favicon.
Conclusion
Adding a bit of flair of your personal brand is pretty straightforward. Give it a shot, if you haven’t already!
UPDATED: To include Can I Use charts for PNG and SVG support.
-
Use can use the versatile Icon Slate creating icons for pretty much any situation you might need an icon: Apple Watch, folder icons, Android, and much more learn the facts here now. ↩
