The list of web design to-do tasks is long, and includes creating logos, icons, and that pesky favicon.ico file. Add in Apple’s insistence that we jump through their hoops, and your top level server folder quickly becomes polluted with image files. Do a quick search for ‘favicon apple’ to see how ridiculous it has gotten. SVG vector files offer a solution, but it isn’t implemented without some complex code. Let’s keep things simple in 2022 and beyond with these tips!
When I told you that creating your own website is a monumental task, I wasn’t joking. Creating a logo is fun, but saving tens of sizes and light/dark options is a pain without a refined workflow. I highly recommend Adobe Illustrator and its Artboard to streamline the work; let’s talk about that workflow in another post. If you don’t want to tackle this heap of image and logo creation, consider my Services page and read about my Logo offerings, then visit the DESIGNshop to order your logo package. I’ll even upload everything to the proper places in your website server if that task is daunting.
Creating Your Own Logos
If you want to create your own logo for your company, blog, or product, sit down and sketch on paper for a while. A good cup of coffee with some paper and pencil will save you a lot of time on the computer working in design programs. Choose letters that start your business name like Google did with their G favicon and the M for Gmail, or select a very simple shape that represents your product or ideas. Make sure your font is the one you intend to use for a long time.
Design Programs for Logo Creation
Nothing works as smooth as Adobe Illustrator and Adobe Photoshop for logo and image manipulation, respectively. The programs require a subscription now; luckily my 2011 Macbook Pro still has my old hard copy installed. As Andrey stated, https://gimp.org offers a free design program, but I’ve never been happy with using it beyond resizing images or creating a new 16:9 image to drop copies of pictures in for optimizing. Gimp is wonderful for saving images in .jpg and .webp formats in various sizes, but I’d never design with it.
Keep Logos and Favicons Simple
You may notice that when you downsize to the 32px and 16px squares, things distort. The only good solution, beyond serving the SVG as described in the link above, is to generate each from a vector file. I save my Logo files as companyname-logo-256w.png (or 128w, etc, with w meaning width, using multiples of 8) for images without a background, and optimize the number of colors to the minimum for just the chosen colors. Keep it simple, select ‘No Dither’ for crisp edges, and save away! Save a .jpg with a background color and .webp file to see if the sizes and quality are acceptable for larger logo sizes.
Favicon Size List
The list of file sizes for Favicons has shortened, and hopefully gets better over time. If not using the SVG vector format, save your favicon in the following sizes as per this article about Favicon Sizing written just before 2020. Save the files as favicon-xx.png in 32, 128, 152, 167, 180, 192, and 196px squares. If that list makes you mad just looking at it, contract CRUU to deliver the favicon goods.
If you like going heavy in code and graphic design principles, this article about Modern Favicon Serving by Evil Martian Andrey describes the hilarious history, along with his solutions. Skip it entirely if you are not a coding and design guru, and order your logo set delivered to your inbox. Remember, time is money, and this rabbit hole is deeper than it should be. I’ve spent my whole day on my logo, saving files, and implementing it.
Where to Put Favicon and Logo Files
The favicon.ico file is placed in the root folder of your website, the same one the main index file is in. Logos go in the Pictures or Images folder. If you are working in WordPress, you simply need to click the + sign, create an Image block, and drag-and-drop the logo to the box. The file will be saved on your server in the proper place, ready for use again in other places.
Preparation For Contracting Logo Creation
Logo creation can take days to get a good product completed. Start writing ideas down when you have them. Aspire to have a unique idea in your URL (website address) and your logo. If ideas aren’t flowing, reach out to CRUUdesign for inspiration!