How to create your own favicon
![]()
This guide will show you how to create your own favicon for your website without using any fancy Photoshop plugins, exterior websites, or any other dependency.
Create your image
All favicons are 16 x 16 pixels. This doesn’t give you a lot of room to play with, so try to stay simple. Focus on one simplified image, logo, or a couple letters. Using complicated gradients or text effects can also be troublesome, as there aren’t many pixels in your square to create many effects.
Regardless of the image editor your using (I’d suggest Adobe Photoshop), it may be easier to start off with a larger work area (for instance 50×50) and work wiht that until you get it right, then reduce down to 16×16 and save.
![]()
Save the image as a BMP file
After getting a design you like, select the “Save As…” option under the “File” menu. Then, under you file extensions options, select “BMP.” Hit “Save.” Another dialogue box pop up and ask what bit depth you’d like. 24bit is the default, and will be fine.
![]()
Rename the file in you folder (finder for Mac)
Navigate to where you new shiny favicon is on your computer, then simply right click, rename, and replace the “.bmp” with “.ico”. Your operating system may warn you against renaming the file, but just continue. Now you have a favicon! Drop it into your root directory for your web application, and the browsers will do the rest.