Праздничная скидка: До 69 % СКИДКИ

05

:

20

:

32

:

54

Zyro блог

Все темы
Бизнес Идеи Блог Электронной Коммерции Вдохновение Дизайн Маркетинг Основы Web Советы Малому Бизнесу

Как Сделать Фавикон

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

Эта крохотная деталь выделит ваш бизнес в глазах клиентов. Не стоит забывать о скромном фавиконе, когда вы создаёте свой бренд.

Создание фавикона требует минимальных усилий.

Хоть вы и можете запустить свой сайт без него, на самом деле нет причин не включать фавикон в свой список дел по брендингу.

Итак, что такое фавикон?

Фавиконы — это маленькие значки, которые отображаются на вкладках и в списках избранного или закладок в таких браузерах, как Chrome, Mozilla и Safari.

Слово «фавикон» — это сокращённая версия «избранного значка», но у него есть и другие названия:

  • Значок ярлыка
  • Значок сайта
  • Значок закладки

Однако все они означают одно и то же.

Появившись на свет ещё в 1999 году, фавиконы были представлены пользователям Интернета с запуском Internet Explorer 5.

В качестве фавикона компании обычно используют мини-версию своего логотипа, уменьшенного до размера 16 × 16 пикселей.

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

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

Вы также видите ряд крошечных логотипов, так что, сравнивая товары и цены, можете легко переключаться между магазинами.

Конечно, рядом с каждым фавиконом есть мета-заголовки, которые вы можете прочитать. Но у кого есть время, чтобы постоянно это делать?

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

Мужчина, Рисующий Фавикон

Теперь, когда вы знаете, что такое фавикон, вы, вероятно, захотите разместить его на своём сайте.

Это один из самых простых способов сделать ваш бизнес запоминающимся для пользователей Интернета. А также получить профессиональное преимущество.

Если вы хотите узнать, как сделать фавикон, — то в этом нет ничего сложного.

Существуют разные варианты. Вы хотите создать фавикон самостоятельно, или чтобы генератор фавиконов сделал всю работу за вас?

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

1. Создайте изображение

Когда дело доходит до поиска подходящего фавикона для сайта, наиболее очевидным вариантом может оказаться логотип бренда.

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

  • Оно соответствует вашему бренду. Используйте те же цвета, типографику и формы.
  • Оно выделяется. Ваши клиенты должны легко запоминать изображение.
  • Оно не похоже на другие фавиконы или изображения. Вас не должны путать с другими брендами.

Вы можете создать изображение для фавикона с помощью редактора, например Photoshop, или программного обеспечения с открытым исходным кодом, например Canva. Если позволяет бюджет, вы можете даже нанять профессионального дизайнера.

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

Убедитесь, что вы не нарушаете эти негласные правила фавиконов:

  • Никаких фото. Ни одна фотография не будет достаточно чёткой в том размере, который поместится на вкладке браузера.
  • Никаких слов. Конечно, вы можете использовать одну, две или даже три буквы в своем фавиконе, особенно если это часть вашего логотипа. Но отдельные слова? Забудьте об этом.
  • Никаких маркетинговых уловок. Хотя фавикон отлично подходит для брендинга и дополняет общую картинку, он не является местом для рекламных инструментов, таких как «новые» или «распродажные» баннеры.

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

Хотя вкладки браузера отображают фавиконы размером 16 × 16 пикселей, они могут отображаться на сайте с разрешением до 32 × 32 или даже 64 × 64 пикселей.

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

Используйте правильный формат

Хотя раньше фавиконы приходилось сохранять как .ico файлы, теперь .png формат тоже принимается. Вы также можете использовать такие инструменты, как например, faviconer.com, для преобразования файлов в формат .ico.

Однако, если вы хотите, чтобы ваш фавикон отображался как значок закреплённой вкладки Safari, вам необходимо сохранить его как файл .svg.

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

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

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

2. Загрузите изображение на свой сайт

Мужчина, Работающий за Ноутбуком с Собакой

Как только у вас появится готовый значок, следующий шаг будет относительно легким.

Просто переименуйте файл изображения .png или .ico в «favicon» и загрузите файл в корневой каталог своего сайта.

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

Вот когда полезно преобразовать ваш значок в формат .ico. Файл .ico может содержать более одного значка, а это значит, что все размеры могут быть загружены на ваш сайт как один.

3. Добавьте базовый HTML-код

Скорее всего, вам не понадобится добавлять какой-либо код, чтобы современные браузеры могли найти ваш фавикон. Большинство из них автоматически обнаруживают favicon.png или favicon.ico и устанавливают его в качестве вашего фавикона.

Тем не менее, стоит добавить базовый код, чтобы значок был виден в любом браузере.

Вы можете создать HTML-код «link rel= shortcut icon», открыв файл header.php и набрав его ниже или после тега:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

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

4. Сделайте фавикон универсальным

Вывеска логотип Apple

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

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

Значки Apple Touch представляют собой сайты, которые были сохранены на главном экране телефона или планшета Apple.

Не все сайты оптимизировали свои фавиконы для использования с Apple Touch. В таких случаях, если пользователь сохраняет URL-адрес сайта на своем домашнем экране, то отображаться будет миниатюрная версия лендинговой страницы.

Но если вы хотите выглядеть безупречно, вы можете создать и загрузить файл фавиконов, специально предназначенных для использования на устройстве Apple Touch.

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

Наконец, стоит добавить на свой сайт отдельный HTML-код для значков Apple Touch. Кодировка будет выглядеть примерно так:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

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

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

И, вероятно, вам любопытно, как второй вариант может быть еще проще — в конце концов, и это было довольно просто.

Войдите в конструктор сайтов.

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

С помощью такого инструмента, как генератор фавиконов Zyro, вам предоставляется вся необходимая информация, чтобы понять, как сделать фавикон без дополнительных этапов кодирования, преобразования и поиска дизайнера, который выполнит самую увлекательную часть работы.

Итак, давайте рассмотрим шаги по созданию и загрузке фавикона на ваш сайт с помощью инструмента-генератора, на примере Zyro.

Скриншот домашней страницы генератора фавиконов Zyro

1. Выберите шаблон

Вы можете выбрать один из предустановленных шаблонов Zyro или загрузить собственное изображение.

2. Настройте до идеала

Используйте имеющиеся в вашем распоряжении инструменты для редактирования цвета, макета и текста изображения или шаблона.

3. Сохраните и действуйте

Готово — пора загрузить фавикон в виде файла .png или .ico и опубликовать его на своём сайте.

Когда придёт время загрузки созданного вами фавикона на ваш сайт Zyro, вам не придётся писать код или конвертировать. Нужно всего несколько кликов.

Просто зайдите в редактор Zyro. Если у вас несколько веб-сайтов, выберите тот, на который хотите загрузить фавикон.

Выберите Общие настройки в выпадающем меню настроек, найдите значок Фавикон и разверните доступные вам параметры.

Перейдите в Обзор файлов, чтобы найти изображение фавикона, созданное с помощью инструмента Zyro, и дважды щёлкните по нему, чтобы загрузить.

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

Если вас это устраивает, нажмите Сохранить изменения, и ваш фавикон будет загружен.

Теперь вы знаете как сделать фавикон!

Написано

Аватар автора

Katerina Kepanova

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

Присоединиться к разговору

Ваш электронный адрес не будет опубликован. Все поля обязательны к заполнению.

Готовы создать свой сайт?