Меню

Создание 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

Создать иконку для сайта

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

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

сменить иконку сайта

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

favicon ico для сайта

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

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

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

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

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

<link rel="shortcut icon" href="ПУТЬ К ВАШЕЙ ПАПКЕ ШАБЛОНА/favicon.ico" />

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

Favicon.ru
Favicon.by

Комментарии 13

  • Тоже недавно нарисовали себе фавиконку, даже не одну, штук 7)) Теперь остается выбрать одну и установить))

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

  • Во время я нашла Ваш материал.Сделада себе картинку ,буду устанавливать.Спасибо.

  • Даже не подозревала, что можно столько рассказать о простом фавиконе. 😀
    Прочитала статью и узнала много нового (впрочем, как в большинстве статей на Вашем сайте). Спасибо за ликбез и полезные инструменты! Возьму в закладки.

  • Лучше подскажите куда ее вставлять имено в ворд прессе или в теме,просто у меня в теме нет иконки для сайта…….а как имзенить и сделать это понятно….Что за код вообще???

  • Говорят лучше всего стрелочки, повёрнутые в сторону сайта. У меня так фига. С фантазией совсем худо. А здесь это пазл, да?

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

    • Не все картинки нормально преобразуются в иконку — бывает, что контуры расплывчато получается. Тут-то на помощь приходит ручной редактор. Я как раз паззл делал из готовой, а потом вручную корректировал

  • Наверное, кроме узнаваемости — favicon больше никакой роли не играет

    • При поиске она отображается рядом с адресом сайта. Если картинка запоминающаяся, то есть желание кликнуть по ссылке, по себе заметил

      • Иногда понравившейся сайт по ней ищешь, если не помнишь адрес. Но проблема возникает тогда, когда один и то же favicon используется на многих ресурсах

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *