Как создать фавикон с плагином All-In-One-Favicon и без него

Последнее изменение поста: Март 22, 2017

Как создать фавикон? Плагин All-In-One-Favicon

Всем привет! Сегодня Вы узнаете, как создать фавикон, и что это такое.  Фавикон — это значок (картинка) веб-сайта, который можно видеть в открытой вкладке браузера, в адресной строке слева и в сохраненных закладках. Перейдите на любой сайт, и посмотрите на вкладку браузера. Вы должны увидеть тот самый фавикон. Но на некоторых сайтах он может быть не установлен.

Когда адрес Вашего сайта добавят в закладки, то значок будет отображаться и в самой закладке. С помощью этой картинки, Ваш сайт будет легче запомнить. Это что-то типа маленького логотипа, что ли. Итак, давайте создадим такую иконку, чтобы наш сайт был более заметным и запоминаемым.

Создаем фавикон с помощью плагина All-In-One-Favicon

Установите плагин All-In-One-Favicon и активируйте его. Теперь перейдите по этой ссылке на сайт, где есть огромный выбор значков для сайта. Выберите любую галерею, а затем скачайте на компьютер любой понравившийся значок.

Для тех, кто не знает, как скачать значок, я объясню. Кликните правой клавиши мыши по выбранной картинке, и в появившемся контекстом меню щелкните «Сохранить изображение как…» сохраните это маленькое изображение. Главное запомните, куда, т.е. в каком место на компьютере Вы его сохранили. Перейдите теперь: «Параметры» > «All in one Favicon» и найдите графу, как на рисунке:

Как создать фавикон? Плагин All-In-One-Favicon

Кликните на кнопку «Upload Favicon» и загрузите изображение. У вас в строке должен появиться адрес этого изображения:

Теперь чуть ниже экрана кликните «Сохранить изменения». Все, фавикон установлен. Таким образом, мы скачали и установили готовый фавикон для своего сайта. Но есть сервис, где мы можем создавать свои собственные картинки для сайта. Давайте зайдем на этот сервис и создадим свой фавикон.

Создание фавикона без плагина

Фавикон может быть с расширением файла: GIF, PNG, BMP или GPEG, но лучше, если фавикон будет иметь расширение ICO. Но у меня фавикон с расширением файла PNG. Вроде и так нормально он отображается. Для удобства, переименуйте файл в favicon. Теперь этот файл нужно закинуть в корневую папку сайта.

Найдите файл header.php в шаблоне сайта, который установлен на Вашем сайте, а затем между тегами <head> код </head> вставьте код ниже:

или этот

Если значок, Вы загрузили в другую папку, тогда нужно указать полный путь к папке. Укажите его в коде href=»/. Если фавикон не ICO, тогда надо указать это и в коде type и x-icon, например:

Советую вставлять в файл первый код. Все очень просто

Как создать фавикон самому

Перейдите http://favicon.cc/. Вы увидите там такое вот чудо:

Как создать фавикон? Плагин All-In-One-Favicon

Кликните по скриншоту, чтобы рассмотреть его хорошо. Давайте рассмотрим, что тут нужно делать:

  1. Нажмите на эту кнопку, чтобы приступить к созданию фавикона.
  2. В этом поле 16х16 мы рисуем сам фавикон.
  3. Здесь мы выбираем цвет
  4. Этим ползунком мы регулируем прозрачность цвета
  5. Если поставить галочку, цвет становится прозрачным.
  6. Это всем известная пипетка для того, чтобы копировать цвет
  7. Если поставить галочку, то изображение можно
    будет в поле  перемещать.
  8. Кликнув по этой надписи «Use Animation«, можно будет
    создать анимационный фавикон. Объяснять не буду, как это делается, потому, что разобраться самому не составит труда.

Чтобы сохранить созданный значок, нажмите чуть ниже «Download Favicon».

Еще картинку для сайта можно сгенерировать.

Генератор фавикон

Перейдите на сайт генератор фавикон. Я выбрал первый попавший сайт. Вы увидите такую картину:

Как создать фавикон? Плагин All-In-One-Favicon

Щелкните «Выбрать файл». Выберите какой-нибудь графический файл а затем нажмите «Создать Favicon». Вот и все, Ваш фавикон создан. Как он выглядит, Вы можете увидеть чуть ниже:

Как создать фавикон? Плагин All-In-One-Favicon

 Затем щелкните «Скачать архив. zip»? чтобы сохранить фавикон на компьютер.

На этом все. Встретимся в следующем уроке.

Получайте свежие статьи на свою почту

Форма подписки dvpress.ru
Поделиться статьей с друзьями


Комментарии закрыты.