A favicon is the small icon that is displayed next to the site name in the tab bar of the browser. Normally, those are based on the logo of the website (or the logo of the company/entity that runs the website), being either a scaled down version of the logo or a simplified variant, as favicons need to work in low resolutions, down to 16x16px. What I’m interested in is the following question: What can a favicon be based on when the site doesn’t have a logo?
I see a couple of possibilities:
- Just leave it out.
- Use a blank or monochrome favicon, or a gradient.
- Use some generic icon that fits the purpose of the website.
- Use Initials of either the website owner or domain name. Difficult to fit in more than 2~3 clearly readable letters though.
- Some combination of the points above.
However, all of those possibilities seem generic and fail if one applies the usual quality criteria for a logo to seem, in particular the requirement that a logo be distinctive and have a high recognition value. Of course, it can be argued that the lack of a logo indicates the lack of a branding/CI. However, a website can be distinctive and well-designed without having a logo, while the favicon is the only element of the site that is displayed in some situations (e.g. in the favorites bar of a browser or as the app icon if the website is saved to the home screen of a smartphone). So having no favicon or a generic one could be detrimental in those instances.
This is why I would like to get some insights on what approaches there are to designing a favicon that fits the content of the site, i.e. what can a favicon be based on if not on the website’s logo? Obviously, the favicon should be related to the content, but I believe that a favicon fills different purposes than a logo (as described above) and could therefore be approached in a different way.
If there is no ‘better way’ and the answer would be to simply design a logo even if it will only be used as a favicon, I would also welcome an answer that discusses/appraises the options I listed above.
If you have any examples of website that either have no logo but have a good favicon, or that have a logo but have a nice favicon that is not based on that logo, those would be welcome as well.
Of the websites that I’ve come across that don’t have a logo, the majority don’t have a favicon at all (or one that comes default with their website creator/host). The ones that do use a generic icon related to their services or just a generic icon that has no real world meaning. There are even sites dedicated to generic favicons that you can take a look at.
I found an example by looking up a list of local businesses’ websites (because they’re less likely to have a logo):
- Transmission Repair Shop Columbus, Georgia uses an icon for a wrench.
For personal sites, using the first letter of a name or two is fairly common.
When I faced this problem for my personal site, it made me think that I should put something more visually interesting on the page. So I looked through some of my old code projects and modified one to be something that’s less distracting. Once I did so, I used that on my site (and animated it) and used a smaller version as the favicon.
I did a similar thing for my most recent site update, taking a screenshot of the page with only the most prominent part of the design enabled (the Z) with square dimensions. It also happens to be the first letter of my name, so it matches both of the above suggestions in one.
Ultimately it’s up to you what the content is of. It might be a good reason to actually design a logo to be used. For more info on that, you might see What technical/objective qualities do good logos have? or other questions with the logo tag.