top of page

Что такое фавикон

1 нояб. 2020 г.
2 мин. чтения

Обновлено: 17 мар. 2021 г.


Что такое фавикон, зачем он нужен и как его создать

Прямо сейчас взгляните на меню вкладок — видите эти маленькие значки-логотипы на каждой из вкладок слева? Именно они помогают нам понять, какой сайт находится на каждой из вкладок, особенно когда их много и текст уже не помещается. Фавикон, иконка или даже фавиконка — одно название для такого маленького, но важного элемента сайта, который играет большую роль в юзабилити, идентификации и брендинге сайта.


О том, что такое фавикон, зачем он нужен, какую функцию выполняет и о многом другом мы подробно расскажем в этом посте.


Что такое фавикон


Фавикон (favicon) — это небольшой значок размером 16x16 пикселей, используемый в веб-браузерах для показа на вкладке. Дословно переводится с англ. «значок для избранного» — FAVoritesICON. Чаще всего, фавикон состоит из логотипа, первой буквы компании или другого изображения, характеризующего бизнес. Важно, чтобы все эти элементы вписывались в квадрат — именно так фавикон выглядит на вкладке.


Пример стандартного фавикона

Где используется фавикон


  1. На открытых вкладках перед названием сайта.

  2. В истории браузера.

  3. На панели закладок.

  4. В избранном, куда вы сохраняете все интересные страницы.

  5. В десктопной и мобильной выдаче Яндекса и Google.


Почему фавикон важен


Несмотря на свой крошечный размер, фавиконы имеют большое значение для любого сайта: улучшают пользовательский опыт, являются частью брендинга и показывают профессионализм компании:


Пользовательский опыт. Фавиконы служат запоминающимися визуальными подсказками для пользователя, который открывает множество вкладок, сохраняет сайты в закладки и в приложения. Благодаря им юзерам проще найти нужный сайт в избранном, что ускоряет работу с сайтом и упрощает процесс возвращения на него.


Брендинг. Фавикон является одним из элементов фирменного стиля, который способствует запоминаемости логотипа и фирменного стиля компании.


Профессионализм. Фавикон это как завершающий штрих — без него можно, но с ним картина завершена и продумана, а пользователи понимают, что вы серьезно относитесь даже к мельчайшим деталям.


Как сделать фавикон


Один из вариантов — обратиться к профессиональному дизайнеру. Скорее всего, если он уже сделал для вас логотип, то и фавикон не станет проблемой,


Другой вариант, который особенно хорош, если у вас еще нет логотипа — перейти на Wix Logo Maker, где можно создать логотип и скачать его во всех нужных форматах и разрешениях. одним из которых является формат фавикона.


При создании фавикона в первую очередь следует подобрать правильные формат и размер — это нужно для того, чтобы значки сайтов хорошо и качественно отображались на любых устройствах.


Формат фавикона


Предпочтительным форматом файла для фавикона является PNG. Он поддерживается и корректно отображается практически всеми браузерами, что обеспечивает высокое качество иконки на десктопе и мобильных девайсах.


Второй по популярности формат — JPEG. Почему второй? У фавиконов в формате JPEG, а также SVG и GIF существуют проблемы в отображении ввиду отсутствия широкой поддержки браузерами. Однако, чтобы совсем не сгущать краски, следует отметить, что иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов.


Размер фавикона


Оптимальный размер — 16x16 пикселей. Это размер, в котором они обычно отображаются, поэтому проверьте, как ваша иконка выглядит при таком маленбком разрешении. Иногда для десктопа могут использоваться более крупные размеры, например, 32x32 или 48x48.


размеры фавиконов

Прозрачность


Если у вашего дизайна прозрачный фон, обязательно сохраните файл в формате PNG с включенной настройкой прозрачности.


Команда Wix ❤️







3 комментария


Kyle Lim
25 авг.

Do not stop at the first promise of convenience; 카드깡 should be reviewed through clear terms, payment records, and the responsibility that may remain after the card bill appears.

Лайк

Tae Lee
25 авг.

The real point is not how fast it pays out; 소액결제 현금화 should be checked by looking at the used limit, settlement details, and whether next month’s phone bill stays manageable.

Лайк

Will Smith
Will Smith
02 июл.

Helpful article! A favicon may be small, but it plays a big role in making a website look more professional and easier to recognize in browser tabs. After working on web design, I like taking a quick break with space waves to refresh my mind.

Лайк
ru03n.png
bottom of page