Создание Favicon.ico Для Сайта Онлайн

Favicon.ico для сайта — специальный файл изображения, которое отображается в панели заголовка браузера и в поисковых системах рядом с названием сайта. То есть по сути иконка сайта является неотъемлемой частью его бренда и должна соответствовать общему стилю и отражать его смысл — а уместить его в размер 16х16 пикселей весьма непросто. Поэтому к ее созданию нужно подойти не менее серьезно, чем к основному логотипу.

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

Создание Favicon.ico Для Сайта Онлайн

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

Как сделать favicon.ico для сайта?

Первое, что приходит на ум — Photoshop. Заходишь туда, рисуешь картинку 16х16, а потом оп — и облом! Родной фотошоп не сохраняет в формат ICO, который нам требуется. Но выход всегда есть! Сохраните ее в любом графическом формате, а а потом откройте в программе Irfan View и сохраните как ICO. Дам один совет по созданию изображения — рисуйте сразу изображение нужного размера, поскольку при уменьшении количество пикселей становится меньше и картинка может размыться. По опыту использования программы Irfan View могу сказать, что некоторых может постичь разочарование, а именно, при попытке сохранить иконку с прозрачным фоном, изображение будет иметь различные «заусенцы», то есть фон отрежется неровно и это будет некрасиво. Можно поискать другие бесплатные графические аналоги, сохраняющие иконки, но предлагаю попробовать использовать еще один хороший способ — сделать faicon онлайн в редакторах — еще они по-буржуйски называются «Image Favicon Generator».

Я уже рассказывал об эффективных он-лайн генераторах CSS элементов, так вот, есть такие же для создания иконок для сайта. Мне больше всего пришелся по душе инструмент, который предлагает favicon.cc

Создание Favicon.ico Для Сайта Онлайн

С самого начала вы можете выбрать вариант создания изображения — рисовать самому с нуля (Create New Icon) или загрузить уже имеющийся рисунок (Import Image), например, логотип, чтобы скрипт автоматически его подогнал под размеры и выделил основные цветовые пиксели, вам же останется только отредактировать. Я выберу как раз этот вариант.

Далее нам предлагается выбрать файл и установить способ его уменьшения — с сохранением пропорций или без.

Создание Favicon.ico Для Сайта Онлайн

И после загрузки начинаем редактировать наше изображение.

Создание Favicon.ico Для Сайта Онлайн

Окно «2» — основной блок для рисования. #3 отвечает за цветовую гамму рисующего инструмента, а #4 — за выбор самого инструмента — карандаш, ластик или перемещение. Также настраивается прозрачность этих инструментов и отображаются недавно использованные цвета. В окне #5 вы увидите, как favicon ico для сайта будет в реальности отображаться в браузере и можете скачать созданное изображение.

Также обратите внимание на ссылку «Use Animation» под центральной панелью. Нажав на нее, вы сможете создать несколько разных фреймов и потом объединить их в анимированное изображение — формат ICO поддерживает анимацию, так же, как GIF.

Создание Favicon.ico Для Сайта Онлайн

Как изменить favicon image для сайта

После того, как мы создали favicon ico и сохранили ее на компьютер, надо изменить иконку сайта, которая в данный момент существует на свою. Это делается совсем просто — загружаете файл в самый корень сайта — и все. Если вы часто меняете тему оформления и хотите, чтобы иконки изменялись в зависимости от дизайна, то поместите ее в папку своей темы оформления и пропишите в шапке шаблона header.php внутри тегов «head» такую строку:

Вот так достаточно легко можно создать файл favicon ico для сайта. Ниже привожу список еще нескольких полезных он-лайн генераторов иконок и на этом прощаюсь до следующей статьи.

Favicon.ru
Favicon.by

Оцените статью