Всем привет! Сегодня я решил сделать для своего блога SEO-Mayak.com новенький фавикончик и заодно, в рамках рубрики «WordPress для новичков«, я расскажу о разных онлайн сервисах, с помощью которых можно создать уникальную картинку или сгенерировать фавикон из какого-нибудь готового изображения.
И конечно, как всегда, во всех подробностях опишу, в принципе не сложный, процесс установки фавикона на сайт.
Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного». Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.
Отображается фавикон перед URL сайта в адресной строке любого браузера, а также на панели закладкок и в поисковой выдаче рядом с заголовками.
Фавиконы бывают в виде обычной или анимированной картинки, а еще в виде зD изображения, на это уже добиваются средствами Фотошоп.
Фавиконы в виде обычной картинки
Сразу хочу сказать, что желательно использовать для создания фавикона уникальное изображение с равными пропорциями сторон и еще не все картинки подходят для фавиконов, так как уменьшение их размера до 16х16 или 32х32 пикселей, делает мелкие элементы на изображении неразборчивыми.
Давайте рассмотрим такой пример. Вот хочу я создать сайт по тематике — «Туризм и путешествия», так какую же картинку я могу подобрать для фавикона. Буду руководствоваться двумя ранее известными мне правилами.
Правило №1.
Правило №2.
После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:
Теперь мне надо ее преобразователь в формат .icon и уменьшить до размеров 32х32 пикселя.
Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com.
Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon»:
И после обработки получаем два две картинки 32х32 и 16х16. Одна картинка это иконка для рабочего стол а вторая для адресной строки, закладок и поисковых систем.
Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16 уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂
Из этого следует. что существует еще одно требование к картинке для фавикона.
Правило №3..
Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:
Отлично, посмотрим, что получается после обработки:
Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon».
Для тех, кто хочет сделать фавикон для сайта из собственной фотографии надо знать: чтобы получилось хоть сколько-нибудь узнаваемо человеческое лицо, картинка должна быть не менее 48×48 пикселей.
Как сделать анимированный фавикон
Анимированные фавиконы просто супер! К сожалению не все браузеры поддерживают анимацию в адресной строке и в закладках, но тем не менее они безусловно привлекают внимания пользователя и тем самым способствуют хотя бы не больному увеличению трафика. Для создания анимированных фавиконов есть хороший онлайн сервис favicon.cc. Сервис буржуйский, но страницу можно перевести на русский посредством функций браузера и получится вполне читабельно:
На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:
После того, как рисунок готов нажимаем — «Использование анимации» и выпадет панель со следующими функциями:
Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:
Чуть ниже можно посмотреть на результат и скачать готовый файл:
Как выглядит мой «шедевр»? 🙂
Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.
Как сделать фавикон в Photoshop
Наверное у Вас в Фотошоп отсутствует формат . icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку — C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате .icon
Кто умеет пользоваться фотошоп, тому не составит труда нарисовать или сделать из готового изображения красивый фавикон для своего сайта.
Как установить фавикон на сайт
Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 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 — тут тоже много иконок.
Чтобы узнать больше, подпишитесь на обновления блога.
До встречи!
С уважением, Виталий Кириллов
Надо мне поменять фавикон, спасибо, что напомнили, как это делается.
Пожалуйста Людмила, рад видеть Вас на блоге!
Отличные советы!) Раньше пыталась сделать фавикон из картинки, нашла неплохой онлайн-сервис для этого. Но потом решила сильно не заморачиваться и сделать из граватара. В принципе, не жалею, но потом, может, и из специально отобранной картинки сделаю.
Спасибо Sasha!
Ой, как я намучилась с этим фавиконом в свое время. Сделала его сама из фотографии декоративного панно. Уменьшила. И стало это похоже на бледно-красный кружок.
Потом видела его только я одна. Сейчас взяла стандартный, яркий и красочный.
Нет времени тратить на делание фавикона. Не успеваю делать все, что нужно. Куда еще с фотошопом связываться для создания фавикона!
Фавикон — дело ну первой необходимости конечно, но вся равно заняться им придется.
В свое время долго экспериментировал с фавиконом, но в результате вернулся к граватару.
Замечательно, когда надоест видеть свою физиономию на флавиконе, обязательно сделаю новый, воспользовавшись этой статьей.
Елена, рад видеть Вас снова на блоге!
Виталий, фавикон — это очень милая игрушка для взрослых. В то же время, она несет большую смысловую нагрузку: с первого взгляда оповещает гостя о содержании сайта. Я всегда обращаю внимание на фавикон, когда захожу на новый сайт. Ты прекрасно написал, спасибо!
И вам спасибо Валентина, за оценку моего скромного труда!
Здоров, что много сервисов описано. Фавикон нужная вещь, чтобы сайт стал узнаваем. Делала свой почти год назад конечно мало что помню. А если соберусь делать новый фавикон, то обязательно вернусь на эту страницу. Спасибо автору, который заботиться о новичках и дает информацию по максимуму. Думаю никуда идти больше не нужно за уроками — все тут найду!
Кастрюлька супер!! Она еще и варит!!!
Я не могу себе придумать.
Как бы обойдусь.
Сделать его не сложно, только вот анимацию не умею. Это потому что не учусь.
Я вот с терминами не дружу. Например, такие понятия как панель доступа, лента и меню путаю. Не разбираюсь.
А такой вопрос есть в зачете. Нам его в субботу сдавать, а я прохожу тест только на 67% по теории. О практике страшно говорить.
Жаль, что по интернету там мало вопросов.
спасибо, интересно почитать, даже слова такого не знала раньше фавикон
Лана, рад видеть Вам снова на блоге!
Виталий, нужна помощь друга! Дело в том, что в в поисковой строке моя физиономия на фавиконе маячит, а вот в поиске яндекса — нет. Я сначала думала, что пройдет время и робот ее заметит, но уже 3 месяца прошло, ждать бесполезно. Воспользовалась вашими советами, сделала себе фавикон, закачала на комп. У меня на сайте стоит плагин фавикона, там есть функция по установке своего значка, но надо указать путь с http . Вопрос, как это сделать с компьютера, если не лезть в файлы админки, а то я такой спец, что могу такого наворотить, что мама не горюй!
Здравствуйте Елена, если я вас правильно понял, Ваше фото в поиске Гугла есть, а в Яндексе нет. Так Яндекс не размещает в своем поиске фотографии авторов.
Все,Виталий, справилась самостоятельно, друзья подсказали, что все делается через медиафайлы! А я, балда, как-то этот вопрос упустила. Теперь буду ждать Яшиного «приговора». На сколько я поняла, это дело не скорое.
Это я ,Виталий, так косноязычно изъясняюсь, извините! Не фото, а фавикон, просто у меня в качестве фавикона было фото, теперь вставила картинку — солнышко на зеленом фоне. Можете увидеть в строке поиска браузера.
Спасибо Вам, Виталий, за такую замечательную статью! Очень пригодилась!
Пожалуйста Ольга!
Здравствуйте, Виталий еще раз! а у меня почему-то фавиконка отображается только на главной странице, а в статьях нет. устанавливала ее давно, сейчас переустанавливала, но все равно…
Здравствуйте Анна! Насколько я помню, для отображения фавикона возле статей в поиске надо время.
у меня даже в браузере его нет
Возможно Вы допустили ошибку при указании пути до изображения.
Спасибо очень полезная статья, помогли разобраться. Применю для своего ресурса
Здравствуйте. А у меня ничего не получается. Я сегодня обновила wordpress/до последней версии и фавикон пропал. Тут я нашла вашу статью и все сделала. Но фавикон так и не появился. Что не так мне непонятно.
Рита, чтобы фавикон появился в поиске требуется время.
А зачем две почти одинаковые ссылки?
Андрей, когда я начинал свою деятельность в интернете, то где-то прочитал, что надо делать именно так, а потом никогда не возвращался к данному вопросу. Сейчас ради эксперимента удалю одну, а именно <link rel="ссылка />, посмотрим, что будет.
А я вообще не прописываю ссылки в коде, и все поисковики и браузеры прекрасно его видят. Просто кладу файл favicon.ico в основную папку сайта и они автоматом его обнаруживают, отображая и в результатах поиска и в строке адреса.
Что касается «делания» фавикона, то и тут проще некуда — в любом графическом редакторе (хоть в ms paint :)) понравившуюся картинку делаю квадратной и уменьшаю размер до 16х16. Сохраняю как картинку ее, хоть .jpg, хоть .png, а потом просто меняю расширение на .ico, ну и обзываю favicon соответственно) Все! В начале 2000-х это работало и сейчас работает)) И никаких онлайн-сервисов или навороченных графических редакторов не надо 😉
Спасибо за помощь!
У меня получается размытая на ней только я могу понять что получилось больше чем 16 на 16 сервис не разрешает ставить картинки, провозился пол дня так и не вышло качественной файикон
Здравствуйте. В последних версиях ВП вроде как появилась встроенная функция добавления фавикона (только почему-то большого размера). Не знаете-действенная? И вроде действительно фавикон не всегда и не везде демонстрируется. Или это только Яша жлобствует? Спасибо.
Не пробовал.
Огромное спасибо Виталий, я еще избавилась от одного не нужного плагина 🙂
Мне даже не пришлось вставлять в header код. Просто залила файл фавикона и все, он начал отображаться во всех вкладках. Как такое может быть? 🙂