Фавикон лого бережёт. Зачем нужны иконки на вкладках — Маркетинг на vc.ru
В этой статье расскажем что такое фавикон, и как он влияет на эффективность вашего сайта.
566 просмотров
Так что же это такое
Фавикон, иконка, а иногда фавиконка — название для очень важного элемента сайта. Именно эти крутые иконочки играют большую роль в юзабилити, идентификации и брендинге сайта, но об этом чуть ниже.
Фавикон (FAVoritesICON) — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.
Традиционно фавикон используется:
- на открытых вкладках перед названием сайта;
- в истории браузера;
- на панели закладок;
- в избранном, куда вы сохраняете все интересные страницы;
- в десктопной и мобильной выдаче Яндекса и Google.
Пример расположения фавикона
Зачем сайту нужен фавикон
Несмотря на небольшой размер, фавикон может значить для бизнеса достаточно много. Сайт без этого идентификатора в виде иконки будет отображаться с общим символом браузера — скучно и вряд ли запомнится.
Фавикон состоит из логотипа, первой буквы названия компании или другого изображения, ассоциирующегося с бизнесом. Фавикон может:
- Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или для энтузиастов с 50 вкладками на панели. Благодаря фавикону, вы сможете упростить процесс возвращения на сайт, к примеру, увидев нужный значок, пользователь легко найдёт нужную страницу.
- Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.
- Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него, конечно, можно, но с ним картина будет точно завершена.
- Улучшить SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется в результатах поисковой выдачи напротив каждого сайта.
Фавикон — завершающий штрих. Без него, конечно, можно, но с ним картина будет точно завершена.Как сделать фавикон
Для начала давайте определимся с размером фавикона.
Самый оптимальный — 16×16 пикселей. Поэтому важно убедиться, что ваша иконка корректно отображается в таком маленьком разрешении. Рекомендуем также создать фавикон в более крупных размерах 32×32 и 48×48 пикселей, которые иногда используются для десктопных версий страниц.
Не забудьте про прозрачный фон, если размещаете логотип в квадрате — для этого сохраните файл в формате PNG. Этот формат самый предпочтительный для фавикона. Он поддерживается и корректно отображается практически всеми браузерами, что обеспечивает высокое качество иконки на любых девайсах.
Также рекомендуем делать иконки в формате SVG — они масштабируются без потери качества, что в будущем может стать отличным решением внезапных проблем с отображением картинки.
С размером определились, теперь выбираем подходящий способ создания иконки.
Начнём с самого очевидного варианта — можно обратиться к дизайнеру. Особенно актуально, если у вашего бренда ещё нет логотипа. Если дизайнер уже сделал для вас лого, то и фавикон – не проблема.
Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop:
- В меню выбора создайте новый файл размером 64х64 пикселя (на крупном холсте просто удобнее). Далее вставьте лого в документ, добавьте или уберите детали.
- После внесения изменений, во вкладке «Изображение» найдите блок «Размер изображения», чтобы изменить уменьшить картинку до 16х16 пикселей.
- Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось.
- И да, сохранитесь.
Также можно воспользоваться онлайн-сервисами: Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.
Можете также скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности бренда можно забыть.
Покажите иконку вашего сайта в комментариях — нам очень интересно. Быть может, ваш пример вдохновит коллег, и они тоже сделают себе фавикон.
А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.
что такое и как сделать для сайта
Инструкции
Поднимите глаза на меню ваших вкладок. Видите эти маленькие значки-логотипы на каждой из них? Именно они помогают понять, какой сайт находится на каждой из вкладок. В этой статье расскажем, что это за иконки, зачем нужны и как сделать фавикон.
Что такое фавикон
Фавикон, иконка, а иногда даже фавиконка — название для маленького, но очень важного элемента сайта. Именно крутые иконки играют большую роль в юзабилити, идентификации и брендинге сайта, но об этом чуть позже.
Фавикон (FAVoritesICON) — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.
Традиционно фавикон используется:
- на открытых вкладках перед названием сайта;
- в истории браузера;
- на панели закладок;
- в избранном, куда вы сохраняете все интересные страницы;
- в десктопной и мобильной выдаче Яндекса и Google.
Зачем сайту нужен фавикон
Несмотря на крошечный размер, значение фавикона для любого бизнеса — огромное. Сайт без такого персонального идентификатора в виде иконки будет отображаться с общим символом браузера — скучно и не впечатляюще.
Чаще всего, фавикон состоит из логотипа, первой буквы компании или другого изображения, характеризующего бизнес. Используя фавикон, вы можете:
- Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или любителя открывать более 50 вкладок. А значит, что благодаря фавикону, вы сможете упростить процесс возвращения на сайт, к примеру, увидев нужный значок, пользователь легко найдёт нужную страницу.
- Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.
- Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него можно, но с ним картина завершена и продумана.
- Улучшите SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.
Как сделать фавикон
Ниже мы расскажем о нескольких способах сделать иконку для сайта, но для начала давайте определимся с размером фавикона.
Самый оптимальный — 16×16 пикселей. Поэтому важно убедиться, что ваша иконка корректно отображается в таком маленьком разрешении. Также рекомендуем создать фавикон более крупных размерах 32×32 и 48×48 пикселей, которые могут использоваться для десктопа.
Не забудьте про прозрачный фон, если размещаете логотип в квадрате — для этого сохраните файл в формате PNG. К слову этот формат самый предпочтительный для фавикона. Он поддерживается и корректно отображается практически всеми браузерами, что обеспечивает высокое качество иконки на любых девайсах.
Также рекомендуем делать иконки в SVG формате — они масштабируются без потери качества, что в будущем может стать отличным решением внезапных проблем с отображением картинки.
С размером определились, теперь выбираем подходящий способ создания иконки.
Начнём с самого очевидного варианта — вы можете обратиться к профессионалу и заказать картинку у дизайнера. Особенно актуально, если у вашего бренда ещё нет логотипа.
Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop.
- В меню выбора создайте новый файл размером 64х64 пикселя (на хосте покрупнее будет просто удобнее работать). Далее вставьте свой логотип в документ, добавьте или уберите детали.
- После внесения изменений, в папке «Изображение» найдите блок «Размер изображения», чтобы изменить его на 16х16 пикселей.
- Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось. Если результат вам нравится, нажмите «Сохранить как файл».
Если не хочется возиться с программами, можно воспользоваться онлайн-сервисами. Например, Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.
Как видите, сделать фавикон — легко и просто, если у вас уже есть готовый логотип. Но, если логотипа нет, желательно всё же обратиться к дизайнеру, который поможет создать что-то уникальное и соответствующее вашему бренду.
А если нет возможности нанять профессионала, но и оставлять сайт без картинки не хочется, можно скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности и узнаваемости бренда можно забыть.
⌘⌘⌘
Расскажите в комментариях, знали ли вы, что такое фавикон? Как часто обращали внимание на них внимание? Можете показать иконку вашего сайта в комментариях — нам очень интересно.
А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.
Создать сайт
Редакция
112
Веб-иконка — 16×16 бесплатных иконок для панели инструментов
| ||||||||||||
| Скачать иконку | ||||||||||||
| Перетащите, чтобы проверить качество значков | ||||||||||||
0 США Веб-папка Smooth Icon Cats Icons Коммерческое использование: Не разрешено | Web Icon 3D BlueFX Desktop Icons Коммерческое использование: разрешено | ||
Web Icon 12×12 Бесплатные значки панели инструментов Коммерческое использование: Разрешено | Веб-иконка Бесплатные иконки социальных сетей Коммерческое использование: разрешено | ||
Web Icon 16×16 Бесплатные иконки панели инструментов Коммерческое использование: разрешено | Иконка веб-сервера Иконки кошек 2 Коммерческое использование: Не разрешено | ||
Значок всплывающей подсказки Web Slice Fugue 16px Дополнительные значки Коммерческое использование: разрешено | Значок веб-камеры Монохромные отражения Зеленые значки Коммерческое использование: разрешено | ||
Значок веб-флага Золотые значки управления Коммерческое использование: Не разрешено | Значок веб-загрузки Значки файлов Lords Коммерческое использование: Не разрешено | ||
Значок веб-папки Значки из нержавеющей стали Коммерческое использование: не разрешено | Иконка веб-разработки Иконки SEO Коммерческое использование: Не разрешено | ||
Значок веб-камеры Монохромные базовые синие значки Коммерческое использование: разрешено | Значок веб-почты 24×24 бесплатные значки кнопок Коммерческое использование: разрешено |
Значок щита Скачать значок Windows Скачать файлы PNG | Значок чата Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки вверх Скачать значок Windows Скачать файлы PNG | Значок стрелки влево Скачать значок Windows Скачать файлы PNG | ||
Значок плагина Загрузить значок Windows Скачать файлы PNG | Значок специального предложения Скачать значок Windows Скачать файлы PNG | ||
Lamp 2 Icon Скачать значок Windows Скачать файлы PNG | |||
Значок стрелки вправо Скачать значок Windows Скачать файлы PNG | Значок Музыка Скачать значок Windows Скачать файлы PNG | ||
Повернуть значок по часовой стрелке Загрузить значок Windows Загрузить файлы PNG | Значок Windows Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки вниз Скачать значок Windows Скачать файлы PNG | Значок стрелки вправо вверх Загрузить значок Windows Загрузить файлы PNG | ||
Значок открытия папки Загрузить значок Windows Загрузить файлы PNG | Smile 6 Icon Скачать значок Windows Скачать файлы PNG | ||
Значок стрелки влево вверх Загрузить значок Windows Скачать файлы PNG | |||
Значок кода Скачать значок Windows Скачать файлы PNG | Диаграмма График 2D 1 ICON Скачать ICON Windows Скачать файлы PNG |
Спонсируемые ссылки
Поделитесь веб -сайт
|
