I have to admit that one of my biggest pet peeves when visiting a website is seeing a default favicon image in the top title of the page, whether it be from your website hosting company or the theme logo. If you don’t know what a favicon is check out this screenshot:
I don’t really know why that bothers me so much. Perhaps it’s because I feel it is in an important piece of keeping consistent branding on your site.
Most of the time it is fairly easy to change out your favicon image. You can even just changeout the favicon.ico file in the file directory of your site through FTP.
Did that last sentence just sound Greek to you? If so read on – there are other ways.
Most modern WordPress themes include an area to upload your favicon image into the admin theme option settings. If not, there are free plugins that can help. The All in one Favicon is my favorite because you can upload a frontend, backend and an iPhone icon. Yes that is right if someone chooses to save your website shortcut to their iPhone you can control the icon that appears. Here is how you save a website to your iPhone. (a little tangent for amoment)
- Go to the website you like in Safari
- Click the Go To button on the bottom of the screen
- Then select Add to Home Screen.
Here is what my logo looks like on my iPhone
Some tips for creating your favicons:
Sizing:
- Website favicon = 16×16 pixels
- iPhone favicon = 57X57 pixels
File format:
- Website icon usually is saved as .ico (ex. favicon.ico) and can be uploaded directly into your file directory through FTP or in the admin area of WordPress using the plugin mentioned above or through theme settings
- All in One Favicon plugin also allows a .png (which is nice if you want a transparent background) and even an animated .gif – yes that is right you can make your logo move (but please don’t overdo it with the movement – you could scare people away)
- iPhone logo can be a .png, .jpg, or.gif
How to create this tiny favicon?
- Carefully! Remember that this image can be very difficult to see because of its small size so you want to crop your logo carefully. Most of the time you do not want to include words in your favicon image because it will be unreadable (a couple letters is fine). Crop the most recognizable part of your logo. Here are some good examples:
Where to create your favicon?
- Your favorite image editor on your computer
- Online image editor (www.picmonkey.com is my new favorite)
- Or Google “favicon generator” and you will find several options, but it is probably best that you crop your logo into a square before using one of these generators.
Let me know if you have any questions or need some help creating your own favicon!
