ICO против PNG для значков Favicons

ICO — универсальный, но старый вариант; PNG является современным, но требует явного связывания. Вот как можно использовать оба вместе.

4 мин чтения

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

ICO: универсальный запасной вариант

Каждый настольный браузер извлекает /favicon.ico без вашего участия. Это контейнер, который может хранить несколько разрешений.

Ярлыки Windows и Проводник используют формат .ico, поэтому, даже если вас не волнуют веб-значки, установите их для ОС.

PNG: идеальное пиксельное качество при любой плотности

PNG четко отображается на дисплеях с высоким разрешением, если связать его с <link rel="icon" size="...">.

Используйте PNG размером 192×192 и 512×512 для веб-манифеста и 180×180 для apple-touch-icon.

Вердикт: используйте оба

Поставьте .ico разных размеров для универсальной поддержки, а также варианты PNG для HD-дисплеев и приглашения к установке PWA. Добавьте SVG сверху, чтобы значок был максимально четким и масштабируемым.

Частые вопросы

Should I use ICO or PNG for a favicon?

Use both: ICO for universal /favicon.ico fallback and PNG for high-DPI tabs and PWA manifest icons.

Does every browser support PNG favicons?

Modern browsers do when you link them with <link rel="icon" type="image/png">. ICO remains the safest default.

Is ICO outdated?

ICO is older but still required for Windows shortcuts and automatic /favicon.ico discovery by browsers.

Связанные руководства

Попробуйте инструменты

Продолжить чтение