Доброго времени суток друзья!

Как сделать иконку для сайта

Как видите, совсем недавно я сменил свой фавикон. И поэтому решил написать статью на эту тему и поделиться с вами несколькими способами и рассказать, как сделать иконку для сайта и установить её, а вы выберите наиболее подходящий, для вас.

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

Вот так выглядит иконка моего блога на данный момент:

Иконка моего блога

Как сделать иконку (favicon) для сайта

Рассмотрим несколько вариантов:

  1. Создание иконки с нуля.
  2. Создание иконки из картинки.
  3. Где взять готовые иконки (фавикон).
  4. Плагин для создания фавиконок на вашем ресурсе.

Теперь разберём каждый пункт по порядку, более подробно!

Как создать иконку с нуля?

Создание иконки с помощью сервиса favicon.cc

Очень удобный сервис для рисования вашей иконки. Найти его можно по адресу: «www.favicon.cc». Вот так он выглядит:

Создание иконки с помощью сервиса favicon

Нажмите для приближения!

Область для рисования на данном сервисе соответствует картинке 16×16 пикселей, то есть один квадратик = один пиксель.

Для начала рисования достаточно просто выбрать нужный цвет и можно приступать к делу. Для примера я набросал вот такую иконку:

Пример иконки

Достаточно прокрутить страницу чуть ниже и можно увидеть как она будет выглядеть в браузере пользователя в полном размере:

Пример иконки в браузере

Кстати если вы что-то нарисовали не так или вам не нравится расположение вашего рисунка на области рисования, то вы спокойно можете лишние пиксели (квадратики) стереть, а рисунок переместить, куда вам угодно.

За удаление лишнего отвечает инструмент «transparent», а за перемещение «move». Просто ставите галочку напротив соответствующего инструмента и пользуетесь.

Инструменты favicon.cc

Ползунком «Transparence» можете отрегулировать прозрачность цвета, подвинув его вправо.

Регулировка прозрачности

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

Сохраняем фавикон

Полученную иконку вы можете установить на свой блог и использовать в качестве логотипа, об этом в конце поста.

Создание иконки с помощью сервиса favicon.ru

Этот сервис практически ни чем не отличается от предыдущего, но пару отличий всё же есть. Этот сервис полностью русский, поэтому абсолютно любой, с ходу, сможет разобраться, как он работает благодаря подсказкам в его правой части. Выглядит он вот так:

Внешний вид favicon.ru

Нажмите для приближения!

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

Функционал этого сервиса практически не отличается от сервиса favicon.cc. Абсолютно такое же рабочее поле для рисования иконки 16х16 пикселей. Так же можете посмотреть, как иконка будет выглядеть в браузере в реальном размере.

Предпросмотр favicon

Нажмите для приближения!

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

Инстументы сервиса

Ещё одним плюсом этого сервиса является то, что вы можете отменять и возвращать обратно последнее действие. Это делается вот такими двумя стрелочками:

Отмена и возврат последнего действия

Созданную иконку сразу можно скачать на компьютер в формате «.ico», нажав на большую кнопку «скачать favicon».

Кнопка скачать фавикон

Создание иконки с помощью сервиса xiconeditor.com

Это самый функциональный сервис по созданию фавикона для сайта. Вот так он выглядит:

Сервиса xiconeditor

Нажмите для приближения!

В этом сервисе целая куча разных инструментов для рисования!

Инструменты для рисования иконки

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

Настройки кисти и карандаша

Так же вы можете писать текст. Есть возможность выбора его размера и шрифта.

Настройки текста

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

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

Настройки цвета

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

Настройки рабочей области

Нажмите для приближения!

Есть режим предпросмотра:

Предпросмотр иконки

Нажмите для приближения!

Готовую иконку вы без труда можете скачать нажав кнопку «Export».

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

Создание иконки из изображения с помощью favicon.ru

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

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

Выбор картинки для favicon

Выбрав изображение вы попадаете на такую страницу:

Настраиваем иконку

Нажмите для приближения!

Здесь можете сохранить имеющиеся у картинки пропорции, и она просто уменьшится до размера 16х16 пикселей или поставить галочку в поле «Не сохранять пропорции» и картинка может немного сжаться. Советую сохранить имеющиеся пропорции или отцентровать самостоятельно, перемещая выделенную область изображения мышкой.

Затем жмёте кнопку «Далее» и ваше изображение будет автоматически перерисовано в поле для рисования, про которое мы говорили выше. Вам остаётся просто её скачать.

Преобразованная картинка

Нажмите для приближения!

К сожалению, иногда эта функция работает не очень гладко и может плохо перерисовать вашу картинку и вам придётся её немного подправить самостоятельно.

Создание иконки из изображения с помощью сервиса pr-cy.ru

Чтобы воспользоваться этим сервисом перейдите по этой ссылке «http://pr-cy.ru/favicon/«. Меню для создания фавиконки для сайта выглядит так:

Сервис для создания иконок pr-cy.ru

Нажмите для приближения!

Кстати у этого сервиса есть одно очень хорошее расширение для seo анализа вашего ресурса, подробней о нём я писал тут.

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

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

Выбираем картинку для фавиконки

Для продолжения создания иконки нужно нажать кнопку «Создать favicon»! Далее сервис создаёт фавикон и показывает, как он будет отображаться в браузере при открытии вашего ресурса.

Предпросмотр иконки

Если вас всё устраивает, то просто нажимаете кнопку «Скачать favicon.ico» под приведённым примером и получаете созданную иконку.

Создание иконки из изображения с помощью www.xiconeditor.com

С помощью данного сервиса тоже можно сделать фавикон из изображения. Выберите картинку, нажав на кнопку «Import» в правом меню.

Выглядит это так:

Создание иконки в сервисе xiconeditor

Растяните область выделения до нужного вам размера, также можете выбрать размер: 16х16, 24х24, 32х32, 64х64 и нажмите «ок». Картинка автоматически перерисуется в основном поле. Затем нажимаете на кнопку «Export» и скачиваете иконку на компьютер.

Где взять готовые иконки (favicon)

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

Iconj.com – сайт с огромной базой иконок, на любой вкус и цвет.

Сервис Iconj.com

Нажмите для приближения!

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

audit4web.ru – сервис с более чем 15000 базой иконок для вашего сайта.

Сервис audit4web.ru

Смотрите, выбирайте, качайте.

favicon.cc – и в этом сервисе тоже есть уже готовые иконки, как обычные, так и анимированные.

Сервис favicon.cc

Это основные, на мой взгляд, хранилища иконок, да больше в принципе и не надо, так как их там и так очень много!

Как установить favicon на блог?

Теперь осталось дело за малым – установить иконку на ваш ресурс. Для этого сначала закачиваете фавикон в корень вашего сайта на хостинге (папка, где расположен весь ваш сайт, все его файлы: wp-content, wp-admin и т.д.). Вот так это выглядит у меня:

Загружаем готовую иконку в корень блога

Затем идёте на свой сайт: админка —> внешний вид  —> редактор —> заголовок (header.php) и в любом месте внутри тега <head>…</head> вставляете код, который приведён ниже!

<link rel="SHORTCUT ICON" href="/favicon.ico"type="image/x-icon">

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

Бывает такое, что иконка сразу не отображается. В большинстве случаев в этом виноват кэш вашего браузера, просто попробуйте его очистить и всё должно заработать. Про то как очистить кэш в Google Chrome в конце этой статьи.

Плагин для установки иконки на сайт

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

Называется плагин favicons! Устанавливаете его себе на блог (для тех, кто в танке, о том, как установить плагин читайте тут), активируете и всё – плагин уже работает.

Теперь зайдите в меню плагина и выберите один из вариантов:

  1. Можете использовать свой граватар в качестве иконки для сайта.
  2. Если у вас есть своя иконка, то просто можете указать путь к ней и использовать её в качестве favicon.
  3. Можете воспользоваться иконками из базы плагина, просто поставив галочку напротив нужного значка.
Плагин для установки иконки

Нажмите для приближения!

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

Если же у вас что-то не получается, просто напишите свой вопрос в комментариях к этой статье и я попробую вам помочь.

На этом на сегодня всё, подписывайтесь на обновления блога и получайте новые статьи первыми! До встречи!

Понравилась статья? Поделись с друзьями!