Как создать favicon для сайта? 3 правила успешного favicon.ico
Что такое Favicon? Как правильно создать favicon? Где создать favicon online? 3 простых правила успешного favicon, вы можете ответить на эти вопросы? Если да, то бежим в комментарии 😉 , если нет, то читаем статью, а перед этим подписываемся на бесплатную рассылку уроков от WpMen, я уверен, найдется еще много вопросов, на которые вам было бы интересно узнать ответ.
Что такое Favicon.ico?
Замечали, когда ищете полезную информацию на Yandex, рядом с результатами поиска появляются маленькие картинки (Как оптимизировать изображения для сайта?), которые и отвечают на вопрос: Что такое Favicon? Правильно созданная мини-картинка позволяет выделиться из груды сайтов, с которыми вы конкурируете.
Как правильно создать Favicon?
Существует множество способов создать собственный фавикон, от создания в online системах и самостоятельного составления например в Adobe Photoshop, до уменьшения готового, уже имеющегося изображения до нужных размеров — это 16×16 пикселей.
Мы с вами рассмотрим первый вариант, потому что он наиболее легкий и удобный, так же с помощью создания favicon online вам предоставляется полная свобода и вы можете творить все что хотите. Но перед этим я предлагаю вам посмотреть готовые решения favicon иконок, возможно вы найдете там подходящий для себя.
Список сайтов с готовыми фавикон:
- Iconj — На мой взгляд самая большая в интернете база с favicon изображениями.
- Favicon.cc — Еще один не плохой сайт с солидной базой фавикон, где вы так же можете создать свой online.
- audit4web — Русская база favicon (фавикон) иконок…
Если поискать в интернете вы найдете еще не малое количество готовых решений фавикон для вашего сайта, так что дерзайте…
Создать Favicon онлайн:
Теперь самое интересное, для того, что бы самостоятельно создать favicon online, мы с вами должны перейти на сайт Favicon.ru Вы так же можете создать онлайн и на сайте Favicon.cc, который я описывал ранее, по функционалу он очень похож, но мне нравится наш сайт…
Все выглядит очень просто, перед вами находится поле размером 16 на 16, и палитра цветов, вам предоставляется возможность самостоятельно закрашивать нужные места, что бы в конечном итоге получилось изображение. Кстати, вы можете просматривать результат в режиме реального времени чуть ниже поля вашей работы, я выделил стрелочкой.
Еще в красной рамочке я указал список возможностей, вы можете перемещать нужные объекты в изображении, пользоваться заливкой, захватом цвета и так далее… Функционал понятен на интуитивном уровне, что бы скачать, необходимо нажать на соответствующую кнопку — Скачать Favicon.
Теперь все что нам осталось — это добавить фавикон на сайт. Дело это такое же легкое, для этого вам в вашу коренную папку блога с названием favicon.icoс помощью программы FileZilla. Если есть, то нужно заменить старый файл, что бы ваша картинка начала отображаться в браузере.
Если после этого изображение не отображается, то необходимо в фале 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" />
До встречи, жду ваших комментариев, ваш Альберт и WpMen… 😉
Добавить комментарий