5

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.

  • 2
    Note: current version of Safari on Mac OS does not display favicons at all. – Wildcard Jun 29 '17 at 20:36
  • This certainly doesn't apply to most websites, but I have seen animated/cartoon profile images of the website owner be used as a favicons before. In fact, I use one on my portfolio site, and I think it’s very fitting for personal blogs too. – user72517 Jun 30 '17 at 21:28
  • 1
    @Wildcard, you can see the favicon if you click on the web address bar. – vpn Jul 2 '17 at 20:33
5

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):

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 tag.

  • May I ask what inspired your favicon that you linked? That is, how does it relate to your site's content? Hm, would you say the local businesses did a good job in that case? There is an argument to be made for no favicon at all over a generic wench icon. I'm not sure though, maybe it's just the obnoxious red that I find irritating in that case – MoritzLost Jun 29 '17 at 20:47
  • @MoritzLost I edited my post to include a little more detail. It's only related to my site in that I am a frontend developer and the project was made in code :P Other than that it was just something to make it visually recognizable – Zach Saucier Jun 29 '17 at 20:51
  • 3
    @ZachSaucier That pyramid is dope! I'm already glad if I manage to vertically center stuff ... that's a cool genesis story for your favicon as well, maybe I can try to take a visual cue out of one of my projects for my personal websites as well .. thanks for the leads! – MoritzLost Jun 29 '17 at 20:55
2

Man, this question is bugging me, in part because I am currently studying signs and graphics in graphic and media design. So I took two of my most academic books on graphic and media design and I just want to work my way through to a point where I can give an answer. Here we go, I'll start with the basics of signs:

Signs

What are the advantages and disadvantages of communicating through signs?

Advantages:

  • intelligible without language
  • saves up on space
  • user saves up on time

Disadvantages:

  • possibly internationally different meaning
  • meaning must be learnt in part

What are the categories of signs?

Icon: the sign is the likeness of the meaning
Index: the sign is not the likeness of the meaning, but related to it
Symbol: the sign has no direct relation to the meaning

Examples for these categories

Escalator: IconEscalator sign

No through way: SymbolNo through way sign

WC: IndexWC sign

Cloakroom: IndexCloakroom sign

What is a pictogram?

Simple, stripped-down signs for non-verbal communication of information.

What do Logos and Signets do?

They are signs differentiating companies or organisations.

There are two types of icons, right? Which is which?

There's the icon as a graphical sign used in user interfaces, and there's the icon depicting the meaning of the sign.

Pictograms

What's a pictogram?

Pictograms are simple, stripped-down signs having a stimulative nature. They have to be easily discernible, remembered, and intelligible with no explanation.

What's the history behind pictograms?

We need an international language of road signs. We need to find unambiguous and distinct signs for the most important transportation needs, which apply to all countries.

Werner Graeff, 1923. The mundane and obvious world of road signs of today was there at the start of the evolution of pictograms.

What are the categories of pictograms? Iconic pictograms: are based on depictions of objects or situations.
Symbolic pictograms use symbolic signs whose meaning is defined through convention.
Hybrid pictograms: mixed form of iconic and symbolic pictogram.

What are the properties of modern pictograms?

  • Same layout.
  • Same size representation.
  • Uniform, simple figure-shaping.
  • Unambiguous pictorial statement.
  • Logical and common colour use.
  • Independent of cultural milieu.
  • Internationally legible and intelligble.

Icons

Evolution of icons
The invention of the PC with a graphical user interface brought along pictograms which are called icons.

What's the definition of this icon?
An icon is a pictogram as a part of a user interface.

What are the design criteria for icons?

  • quick and unambiguous recognisability.
  • independent from language and culture.
  • requiring little space as part of the user interface.
  • all icons of an application should have a uniform and unmistakenable design.
  • standards must be considered.

How are icons drafted?

  • Define its use and purpose.
  • Describe the audience and mind its prior knowledge.
  • Gather ideas.
  • Sketch icon.
  • Test sketch with members of audience.
  • Create icon with suitable software.

What's the purpose of icons?

Well designed icons support the usability of an electronic system. A system designed for suitability of use leads to high customer satsifaction, especially when function, safety, image and graphics of a system are all perfectly matched.

Logo and signet

What are the types of logos?

  • Glyph (signet)
  • Word character
  • Letter sign
  • Numeral
  • A combination of the above

What is a logo?

The word logo is of Greek origin and can be translated with "meaningful" word. A logo always serves as both identifying and communicating. A logo can be made up of letters, numbers, an image or any combination of these. Many logos foreground pictorial elements since these are easily recalled by the viewer. Think of Apple, Coca Cola, McDonald's, IBM.

What's a logo's function?

In order to identify and communicate, a logo must be distinct from other logos, any by that, must be distinct from other companies. Logos have to remain in the consumers' memory and largely stored unconsciously.
The presence and existence of a logo is requisite for a company to be perceived as a brand. Most people don't just connect a logo to a product or label, but often also an emotional perception. Further a company's appearance must match its brand product(s).


Here is how you can apply this knowledge:

Having said all that, I feel that I can now discuss your question more clearly. If a favicon is not a logo, what kind of sign can it be instead? Judging from the here provided information on this topic, a favicon can thus be

  • an (linguistic) icon
  • a symbol
  • an index
  • an iconic pictogram
  • a symbolic pictogram
  • a hybrid pictogram
  • a ui icon

and it still wouldn't be a logo, thus satisfying both my curiousity in how to answer your intriguing question and your premise. Thanks for letting me sort through my knowledge. In the end, you will end up arguably designing a logo, but, given these definitions of what a logo is and how a logo is being drafted and designed, you're really not.

Here are a few examples of how other designers have answered your question.

PS: in regards to Transmission Repair Georgia, they do have a logo: look for yourself. They just opted to not use it on their website for reasons. ???

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.