Identity systems

Member lesson

Favicons and app icons

Lesson 12 of 18 in Identity systems.

App Icon Design: 9 Best Practices To Drive Installs · AppsFlyer
Lesson

This is where a mark gets its hardest test. A favicon lives at 16 or 32 pixels in a row of tabs, and an app icon sits on a home screen beside a hundred competitors, all the same size, all fighting for a glance. Neither has room for a wordmark.

full lockupmark and namemarkat 24pxeach step drops a whole element, never a thinner version
One identity at four sizes, losing an element at each step.
A doodle of an app icon whose mark touches the edges being clipped by circle and rounded masks in the top row, and a smaller mark inside a dotted safe circle staying whole under the same masks in the bottom row.
An icon that fills its square gets clipped when phones cut it into circles and rounded shapes. A mark kept inside the inner safe zone survives every cut.
Member

The rest of this is for members.

You have read the opening of this lesson. The rest of it comes with a membership.

One membership covers all four courses and Brands.

  • All lessons in the four Learn courses
  • All brand breakdowns in the Brands section
  • All quizzes, flashcards and crosswords
  • An AI teacher on every lesson, for up to 60 questions a day
  • All course material published during the membership

Price

Membership is from $12 a month on the Yearly plan, which is charged at $144 once a year. Lifetime access is $59, paid once.Membership is from ₹200 a month on the Yearly plan, which is charged at ₹2,400 + GST once a year. Lifetime access is ₹3,999 + GST, paid once.

Check what stuck

Members only

You can't take this check yet.

Members answer these 3 questions and keep the ticket for this lesson. Every lesson has one.

  1. Question 1, locked

    Two favicons sit in the same row of tabs. One is a dark symbol on white, the other is the mark reversed out of a solid brand colour. Which gets found first?

    • The one filled with colour, because the eye finds a distinct colour before it resolves a shape
    • The dark symbol on white, because that has the highest contrast against browser chrome
    • Whichever has the simpler silhouette, since colour barely survives 16 pixels
    • Neither, because at that size both collapse into grey smudges
  2. Question 2, locked

    Which of these words means this? “The tab icon. Usually seen at 16 or 32 pixels, next to a dozen others.”

    • Pictorial mark
    • Optical edge
    • Illustration system
    • Favicon
  3. Question 3, locked

    Which of these words means this? “An Android icon drawn with a safe zone, because the platform may crop it to any shape.”

    • Cypher
    • Safe zone
    • Maskable icon
    • Earcon

Elsewhere in the library

Hear about new courses.

Leave an email and we will tell you when something new lands. We do not write often.