» » » Как сделать красивый фавикон. Как установить фавикон на сайт
logotip

Как сделать красивый фавикон. Как установить фавикон на сайт

Всем привет! Сегодня я решил сделать для своего блога SEO-Mayak.com новенький фавикончик и заодно, в рамках рубрики «WordPress для новичков«, я расскажу о разных онлайн сервисах, с помощью которых можно создать уникальную картинку или сгенерировать фавикон из какого-нибудь готового изображения.

И конечно, как всегда, во всех подробностях опишу, в принципе не сложный, процесс установки фавикона на сайт.

Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного».  Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.

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

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

Фавиконы бывают в виде обычной или анимированной картинки, а еще в  виде зD изображения, на это уже добиваются средствами Фотошоп.

Фавиконы в виде обычной картинки

Сразу хочу сказать, что желательно использовать для создания фавикона уникальное изображение с равными пропорциями сторон и еще не все картинки подходят для фавиконов, так как уменьшение их размера до 16х16 или 32х32 пикселей, делает мелкие элементы на изображении неразборчивыми.

Давайте рассмотрим такой пример.  Вот хочу я создать сайт по тематике — «Туризм и путешествия», так какую же картинку я могу подобрать для фавикона. Буду руководствоваться двумя ранее известными мне правилами.

Правило №1.

На картинке должен быть только один крупный элемент с четкими границами образа.

Правило №2.

Картинка должна быть квадратной и весом не более 150 kB.

После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:

favikon

Теперь мне надо ее преобразователь в формат .icon  и уменьшить до размеров 32х32 пикселя.

Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com.

Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon»:

favikon na sait

И после обработки получаем два две картинки 32х32 и 16х16. Одна картинка это иконка для рабочего стол а вторая для адресной строки, закладок и поисковых систем.

favikon na sait

Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16  уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂

Из этого следует. что существует еще одно требование к картинке для фавикона.

Правило №3..

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

Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:

pal'ma

Отлично, посмотрим, что получается после обработки:

favikon na sait

Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon».

Для тех, кто хочет сделать фавикон для сайта из собственной фотографии надо знать: чтобы получилось хоть сколько-нибудь узнаваемо человеческое лицо, картинка  должна быть не менее 48×48 пикселей.

Как сделать анимированный фавикон

Анимированные фавиконы просто супер!  К сожалению не все браузеры поддерживают анимацию в адресной строке и в закладках, но тем не менее они безусловно привлекают внимания пользователя и тем самым способствуют хотя бы не больному увеличению трафика. Для создания анимированных фавиконов есть хороший онлайн сервис favicon.cc. Сервис буржуйский, но страницу можно перевести на русский посредством функций браузера и получится вполне читабельно:

favikon na sait

На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:

favikon na sait

После того, как рисунок готов нажимаем — «Использование анимации»  и выпадет панель со следующими функциями:

favikon na sait

Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:

favikon na sait

Чуть ниже можно посмотреть на результат и скачать готовый файл:

favikon na sait

Как выглядит мой «шедевр»? 🙂

favicon

Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.

Как сделать фавикон в Photoshop

Наверное у Вас в Фотошоп отсутствует формат . icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку —  C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате .icon

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

Как установить фавикон на сайт

Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента, туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.

Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом </head> надо прописать следующее:

<link href="http://Ваш сайт/название картинки.ico" rel="shortcut icon" />
<link href="http://Ваш сайт/название картинки.ico" rel="icon" type="image/x-icon" />							

Вот в принципе и все, фавикон на сайт установлен!

Сервисы готовых фавиконов

Кому лень самому заморачиваться, у тех есть вариант выбрать и скачать готовый фавикон со следующих сервисов:

iconj.com — большой выбор фавиконов.

audit4web.ru — тут тоже много иконок.

Чтобы узнать больше, подпишитесь на обновления блога.

До встречи!

С уважением, Виталий Кириллов

Комментарии: 37

  1. Людмила:

    Надо мне поменять фавикон, спасибо, что напомнили, как это делается.

    Ответить
    • Виталий Кириллов:

      Пожалуйста Людмила, рад видеть Вас на блоге!

      Ответить
  2. Sasha:

    Отличные советы!) Раньше пыталась сделать фавикон из картинки, нашла неплохой онлайн-сервис для этого. Но потом решила сильно не заморачиваться и сделать из граватара. В принципе, не жалею, но потом, может, и из специально отобранной картинки сделаю.

    Ответить
    • Виталий Кириллов:

      Спасибо Sasha!

      Ответить
  3. Анна:

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

    Ответить
    • Виталий Кириллов:

      Фавикон — дело ну первой необходимости конечно, но вся равно заняться им придется.

      Ответить
  4. Алексей:

    В свое время долго экспериментировал с фавиконом, но в результате вернулся к граватару.

    Ответить
  5. Елена Картавцева:

    Замечательно, когда надоест видеть свою физиономию на флавиконе, обязательно сделаю новый, воспользовавшись этой статьей.

    Ответить
    • Виталий Кириллов:

      Елена, рад видеть Вас снова на блоге!

      Ответить
  6. Валентина:

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

    Ответить
    • Виталий Кириллов:

      И вам спасибо Валентина, за оценку моего скромного труда!

      Ответить
  7. Наталья:

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

    Ответить
  8. Наталья:

    Кастрюлька супер!! Она еще и варит!!!

    Ответить
  9. Ольга:

    Я не могу себе придумать.
    Как бы обойдусь.
    Сделать его не сложно, только вот анимацию не умею. Это потому что не учусь.
    Я вот с терминами не дружу. Например, такие понятия как панель доступа, лента и меню путаю. Не разбираюсь.
    А такой вопрос есть в зачете. Нам его в субботу сдавать, а я прохожу тест только на 67% по теории. О практике страшно говорить.
    Жаль, что по интернету там мало вопросов.

    Ответить
  10. Лана:

    спасибо, интересно почитать, даже слова такого не знала раньше фавикон

    Ответить
    • Виталий Кириллов:

      Лана, рад видеть Вам снова на блоге!

      Ответить
  11. Елена Картавцева:

    Виталий, нужна помощь друга! Дело в том, что в в поисковой строке моя физиономия на фавиконе маячит, а вот в поиске яндекса — нет. Я сначала думала, что пройдет время и робот ее заметит, но уже 3 месяца прошло, ждать бесполезно. Воспользовалась вашими советами, сделала себе фавикон, закачала на комп. У меня на сайте стоит плагин фавикона, там есть функция по установке своего значка, но надо указать путь с http . Вопрос, как это сделать с компьютера, если не лезть в файлы админки, а то я такой спец, что могу такого наворотить, что мама не горюй!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Елена, если я вас правильно понял, Ваше фото в поиске Гугла есть, а в Яндексе нет. Так Яндекс не размещает в своем поиске фотографии авторов.

      Ответить
  12. Елена Картавцева:

    Все,Виталий, справилась самостоятельно, друзья подсказали, что все делается через медиафайлы! А я, балда, как-то этот вопрос упустила. Теперь буду ждать Яшиного «приговора». На сколько я поняла, это дело не скорое.

    Ответить
  13. Елена Картавцева:

    Это я ,Виталий, так косноязычно изъясняюсь, извините! Не фото, а фавикон, просто у меня в качестве фавикона было фото, теперь вставила картинку — солнышко на зеленом фоне. Можете увидеть в строке поиска браузера.

    Ответить
  14. Ольга:

    Спасибо Вам, Виталий, за такую замечательную статью! Очень пригодилась!

    Ответить
    • Виталий Кириллов:

      Пожалуйста Ольга!

      Ответить
  15. Анна Вечеря:

    Здравствуйте, Виталий еще раз! а у меня почему-то фавиконка отображается только на главной странице, а в статьях нет. устанавливала ее давно, сейчас переустанавливала, но все равно…

    Ответить
    • Виталий Кириллов:

      Здравствуйте Анна! Насколько я помню, для отображения фавикона возле статей в поиске надо время.

      Ответить
    • Анна Вечеря:

      у меня даже в браузере его нет

      Ответить
      • Виталий Кириллов:

        Возможно Вы допустили ошибку при указании пути до изображения.

        Ответить
  16. Николай:

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

    Ответить
  17. Рита:

    Здравствуйте. А у меня ничего не получается. Я сегодня обновила wordpress/до последней версии и фавикон пропал. Тут я нашла вашу статью и все сделала. Но фавикон так и не появился. Что не так мне непонятно.

    Ответить
    • Виталий Кириллов:

      Рита, чтобы фавикон появился в поиске требуется время.

      Ответить
  18. Андрей Курасов:

    А зачем две почти одинаковые ссылки?

    Ответить
    • Виталий Кириллов:

      Андрей, когда я начинал свою деятельность в интернете, то где-то прочитал, что надо делать именно так, а потом никогда не возвращался к данному вопросу. Сейчас ради эксперимента удалю одну, а именно <link rel="ссылка />, посмотрим, что будет.

      Ответить
      • Мария:

        А я вообще не прописываю ссылки в коде, и все поисковики и браузеры прекрасно его видят. Просто кладу файл favicon.ico в основную папку сайта и они автоматом его обнаруживают, отображая и в результатах поиска и в строке адреса.
        Что касается «делания» фавикона, то и тут проще некуда — в любом графическом редакторе (хоть в ms paint :)) понравившуюся картинку делаю квадратной и уменьшаю размер до 16х16. Сохраняю как картинку ее, хоть .jpg, хоть .png, а потом просто меняю расширение на .ico, ну и обзываю favicon соответственно) Все! В начале 2000-х это работало и сейчас работает)) И никаких онлайн-сервисов или навороченных графических редакторов не надо 😉

        Ответить
  19. Алена:

    Спасибо за помощь!

    Ответить
  20. Руслан:

    У меня получается размытая на ней только я могу понять что получилось больше чем 16 на 16 сервис не разрешает ставить картинки, провозился пол дня так и не вышло качественной файикон

    Ответить
  21. Сергей:

    Здравствуйте. В последних версиях ВП вроде как появилась встроенная функция добавления фавикона (только почему-то большого размера). Не знаете-действенная? И вроде действительно фавикон не всегда и не везде демонстрируется. Или это только Яша жлобствует? Спасибо.

    Ответить
    • Виталий Кириллов:

      Не пробовал.

      Ответить
  22. Sara:

    Огромное спасибо Виталий, я еще избавилась от одного не нужного плагина 🙂
    Мне даже не пришлось вставлять в header код. Просто залила файл фавикона и все, он начал отображаться во всех вкладках. Как такое может быть? 🙂

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS