Why, yes, we got a makeover – thanks for noticing! There’s been some exciting changes at Style Context over the past couple weeks. A new logo, new interface, and now an official favicon. In case you’re unfamiliar with the term, a favicon is the small URL icon that shows up on your web tab or address bar. It’s useful for differentiating between multiple tabs, and if you’re anything like me, you’ll have about 35 tabs open at a time. Much more than that, it helps associate your blog with your brand rather than a generic favicon from your self-hosted site (no offense, Bluehost). A favicon can be your blog’s logo or a simpler variation. For Style Context, I chose to simplify the logo to SC and invert the colors from my site.
Without further ado, here’s how to create a favicon in 3 easy steps:
1. Using Photoshop, create a document that is 64×64 pixels. Although your favicon must be smaller in size, it’s easier to work in 64×64 rather than 16×16. Design your desired favicon.
2. Once you’re satisfied with your favicon, go to Image –> Image Resize and change the dimensions to 16×16. In the drop down window, change the setting to Bicubic Sharper. Hit OK and save your file as a PNG.
3. Download the All in One Favicon plugin for WordPress (I tried the Favicon Generator plugin, but found the All in One plugin to be best). Upload your file to the frontend and backend. Ta-da! You have a unique favicon.
If you run into any problems, have any questions, or need favicon inspiration, let me know in the comments. Good luck!