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

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

Наш помощник в создании иконки — сервис xiconeditor. Этот сервис позволяет нарисовать иконку самому или сделать ее из готового изображения. Скриншот сайта:

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

Картинку для иконки можно найти в Яндекс.Картинки. Давайте для примера создадим иконку для женского сайта, именно эта тематика в последнее время очень популярна в интернете.

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

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

Для примера мы возьмем вот этот цветочек:

Выбранную картинку нужно сохранить на компьютер. Затем перейдите на сервис xiconeditor — перейти. Затем выполните следующие действия:

• нажимаем Import
• нажимаем Upload
• выбираем выбранную картинку и нажимаем открыть
• растягиваем квадрат на изображении по максимум, захватывая весь цветочек
• нажимаем ОК

Теперь вы можете посмотреть результат:

• нажимаем Preview
• нажимаем Preview your icon

У нас получилось:

Если вас иконка устраивает, остается лишь ее сохранить. Для этого:

• нажимаем Export
• нажимаем Export your icon
• сохраняем картинку на компьютере

Всё, иконка создана. Осталось только ее разметить на своем сайте. Мы напомним, как это сделать.

Между тегами head размещаем следующий код:

 

 

Поздравляем! Вы научились создавать уникальные иконки для сайта + размещать их.