Mobile app version of vmapp.org
Login or Join
Tiffany317

: What can the favicon of a website be based on if the website doesn't have a logo? A favicon is the small icon that is displayed next to the site name in the tab bar of the browser. Normally,

@Tiffany317

Posted in: #Branding #Favicon #Logo #WebsiteDesign

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Tiffany317

2 Comments

Sorted by latest first Latest Oldest Best

 

@Holmes874

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

No through way: Symbol

WC: Index

Cloakroom: Index

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

10% popularity Vote Up Vote Down


 

@Nimeshi706

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.



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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme