Create and add favicon

[catileptic]

Currently, there is no favicon for this project.

When designing a favicon, please make sure to stay in touch with the Code for Romania tech team in order to get feedback on the design.

This isn't a straightforward task, although it might seem like one. This article describes all the things you have to consider when designing a favicon. In short, you have to consider that it's more than just the icon in the browser. Windows 8+ allows the bookmark to be a shortcut in the start menu, and the favicon acts as... an icon. Various sizes and rules about allowed transparency come into play. Please read through the article before diving deep into this task.

The article lists several resources:

• a favicon cheat sheet
• an article about Touch icons
• the RealFaviconGenerator's FAQs
• a favicon generator website

[ghost]

Hi @catileptic,

Before starting to work,
could you please clarify if this is the final logo (brand) for this project?

Also, I think it would be very helpful to have a place (repo or something) with design assets (vectors, brand book and so on)

Thanks!

[catileptic]

Salut, @babasghenciu

1. No, that isn't the final logo. This project is merely an asset digitalisation app. The data that results at the end of the digitalisation process will "feed" Catalog Politic.

2. We currently do not have a final logo for the asset digitalisation app. We would like to adhere to as many good practices as possible with the favicon we create. Such as it being able to serve as an icon both in the browser and also in phone and tablet apps (where a bookmark uses the favicon as icon - except it imposes different colour & transparency rules, not to mention being larger).

If you'd like to start working on this, the thing that would be the most helpful right now would be a very clear rule set that we have to "tick off". This can be composed by reading the articles linked in this Issue. The end result would be something like: "for a favicon, we need n icons, with following sizes: a x a, b x b etc. They can/can't use a transparent background. Ideally, the number of colours should be limited to x.

After we have this checklist, we can provide a logo and/or branding guidelines for the logo (if you, or any other volunteer would like to design it themselves). We would like the checklist to precede our asset creation because I think having the checklist will also help us understand what our restrictions are, for the assets.

[ghost]

For a favicon we need:

• an icon which will be translated in a favicon
• the icon should have a monochrome version and a transparent version
• the starting size for the favicon should be 228 x 228 or greater, but having in mind that the image will also be 32x32, 16X16 and so on (don't add to many details)

---

• after creating the favicon, we can use realfavicongenerator to generate all favicon sizes
• the final export will have ≈ 14 different icon sizes and will probably be an .icon (it's 1 file with multiple sizes)

---

• (optional) after exporting the favicon, because of downscaling, we may need to edit the favicon at the pixel level for a sharp and crisp result (only 16x16 and 32X32)
• Why Not SVGs? svgs are not supported in all browsers