Как создать favicon для сайта? 3 правила успешного favicon.ico

Все о FaviconЧто такое Favicon? Как правильно создать favicon? Где создать favicon online? 3 простых правила успешного favicon, вы можете ответить на эти вопросы? Если да, то бежим в комментарии ;-) , если нет, то читаем статью, а перед этим подписываемся на бесплатную рассылку уроков от WpMen, я уверен, найдется еще много вопросов, на которые вам было бы интересно узнать ответ.

Что такое Favicon.ico?

Что такое FaviconЗамечали, когда ищете полезную информацию на Yandex, рядом с результатами поиска появляются маленькие картинки (Как оптимизировать изображения для сайта?), которые и отвечают на вопрос: Что такое Favicon? Правильно созданная мини-картинка позволяет выделиться из груды сайтов, с которыми вы конкурируете.

Как правильно создать Favicon?

Как создать FaviconСуществует множество способов создать собственный фавикон, от создания в online системах и самостоятельного составления например в Adobe Photoshop, до уменьшения готового, уже имеющегося изображения до нужных размеров — это 16×16 пикселей.

Мы с вами рассмотрим первый вариант, потому что он наиболее легкий и удобный, так же с помощью создания favicon online вам предоставляется полная свобода и вы можете творить все что хотите. Но перед этим я предлагаю вам посмотреть готовые решения favicon иконок, возможно вы найдете там подходящий для себя.

Список сайтов с готовыми фавикон:

  1. Iconj — На мой взгляд самая большая в интернете база с favicon изображениями.
  2. Favicon.cc — Еще один не плохой сайт с солидной базой фавикон, где вы так же можете создать свой online.
  3. audit4web — Русская база favicon (фавикон) иконок…

Если поискать в интернете вы найдете еще не малое количество готовых решений фавикон для вашего сайта, так что дерзайте…

Создать Favicon онлайн:

Создать favicon онлайнТеперь самое интересное, для того, что бы самостоятельно создать favicon online, мы с вами должны перейти на сайт Favicon.ru Вы так же можете создать онлайн и на сайте Favicon.cc, который я описывал ранее, по функционалу он очень похож, но мне нравится наш сайт…

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

Еще в красной рамочке я указал список возможностей, вы можете перемещать нужные объекты в изображении, пользоваться заливкой, захватом цвета и так далее… Функционал понятен на интуитивном уровне, что бы скачать, необходимо нажать на соответствующую кнопку — Скачать Favicon.

Создать Favicon onlineТеперь все что нам осталось — это добавить фавикон на сайт. Дело это такое же легкое, для этого вам в вашу коренную папку блога с названием favicon.icoс помощью программы FileZilla. Если есть, то нужно заменить старый файл, что бы ваша картинка начала отображаться в браузере.

Как добавить Favicon на сайтЕсли после этого изображение не отображается, то необходимо в фале header.php добавить код между тегами <head> и </head>. После чего сохранить и проверить. В коде вам нужно изменить адрес к картинке, то есть приписать адрес своего сайта:

<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />
<link rel="icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />
Будьте внимательны, во многих современных темах, фавикон можно добавить в настройках темы, то есть шаблон (Как выбрать шаблон?) автоматически устанавливает загруженную вами тему, у меня например так smile
На этом все дорогие друзья, надеюсь урок вам понравился, дальше будет еще интереснее. Подписывайтесь на меня в Twitter, что бы постоянно следить за новыми статьями smile До встречи, жду ваших комментариев, ваш Альберт и WpMen… ;-)
Чуть не забыл, сегодня в сети нашел клон WpMen. Недавно созданный сайт, тематика сайта — схожа на мою, давайте вместе наблюдать как он будет развиваться ;-)
Нашелся сайт - клон WpMen

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

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