Favicon — иконка для сайта

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

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

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

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

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

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

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

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





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

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

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

favicon ico для сайта

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

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

Favicon для сайта — как изменить иконку сайта

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

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

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

Спонсор поста: Как поставить социальные кнопки на блог можно узнать тут

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

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

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

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

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

    • Спасибо! Рад, что статья оказалась полезной1 И друзьям рекомендуйте 😉

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

    • иконку надо сохранить под именем favicon.ico и загрузить в корень сайта

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

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

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

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

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

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