Как сделать и установить favicon
Установка Favicon (фавикон) на WordPress сайт
Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.
Что такое favicon?
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.
Фавиконка для Яндекс
Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.
Пример отображения фавиконки в результатах поиска:
Как отмечено выше, иконка идентифицирует ваш блог, то есть, его нельзя будет спутать с остальными сайтами открытыми в окне вашего браузера. Посмотрите на скриншот:
Посмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.
Как установить favicon на WordPress
Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:
Затем, на странице визуальной настройки (Customizer) сайта откройте пункт Свойства сайта:
Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon
Выберите картинку на компьютере или из библиотеки медиафайлов вашего сайта. После того, как изображение загрузите, то появится предпросмотр фавиконки:
Если всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:
Учтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.
Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/тему вордпресс.
Как поменять или удалить иконку сайта WordPress?
Проделайте те же действия. Админ панель — Внешний вид — Настроить. Открываете Свойства сайта. И теперь дело техники. Нажимаете Удалить или Изменить изображение:
Удаляете и нажимаете Опубликовать. Меняете фавикон сайта путём новой загрузки картинки в WordPress.
Если вы внесли изменения в значок и хотите, чтобы они были учтены для Google, то можете запросить повторное сканирование главной страницы сайта. Обычно изменения учитываются в результатах поиска в течение нескольких дней.
На этом, дорогие друзья, у меня все. До встречи. Пока, пока!
Как сделать и установить Фавикон (Favicon) на сайт
Здравствуйте друзья! В этой статье разберемся как можно сгенерировать фавикон для сайта и затем установить его, для того чтобы Ваш уникальный ресурс выделялся среди прочих ему подобных.
Также рассмотрим бесплатные сервисы (онлайн генераторы) помогающие значительно упростить задачу и за несколько минут создать фавикон.
Фавикон (favicon) что за атрибут?
Вы наверняка обращали свое внимание, что практически у всех вебсайтов есть оригинальная картинка на закладке браузера.
Это изображение называется Фавикон (читаем Favicon).
В свое время я потратил значительное время на то чтобы сотворить Favicon для моего блога, ведь за мной есть недостаток перфекционизма, хотя сейчас понимаю, что можно было бы все намного упростить. Изначально предлагаю разобраться для чего нужна пресловутая иконка favicon на искомом сайте.
Фавикон — это атрибут ресурса, который каждый из нас видит в специально отведенном для этого месте на странице браузера. Не все сайтовладельцы знают о том, что этот небольшой значок может повлиять на эффективность раскрутки блога, повысит популярность сайта, и в итоге послужит источником трафика на Ваш ресурс.
Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).
Отображение фавикона на закладках браузера
Зачастую на эту иконку помещают букву, с которой начинается название сайта. Хотя бывают и другие варианты, например я сделал первые буквы своего имени. Отмечу, что Favicon виден не только на открытой вкладке, но и в результатах поисковых систем, правда не во всех.
Чем полезен Favicon для сайта?
В первую очередь, наличие фавикона увеличивает привлекательность блога, например, в результатах поиска. Сайты без иконки привлекают меньше внимания, чем сайты с ярким фавиконом. Более того, доказано, что favicon повышает доверие со стороны пользователей, на счет этого проводились специальные исследования.
Поэтому старайтесь делать яркие, бросающиеся в глаза иконки, пересекающиеся с тематикой Вашего сайта.
Отображение фавикона в поисковой выдаче
Во-вторых, с помощью фавикона можно повысить узнаваемость вебсайта. Человек может забывать название ресурса, на который он заходил ранее, а вот яркую иконку запомнит надолго. Получается, что благодаря фавикону люди смогут вновь находить Ваш сайт среди других, если он им понравился.
Способы создания Фавикон для сайта
Способов изготовить иконку для фавикона несколько, давайте рассмотрим самые простые и популярные.
Готовые коллекции Фавикон
Если Вы не хотите заморачиваться с изготовлением изображения для иконки favicon, в помощь Вам готовые коллекции изображений.
Что касается выбора изображения, то здесь следует руководствоваться тематическим содержанием вебсайта. Так, например, для портала об автомобилях можно поставить иконку в виде авто, на сайт о бизнесе и финансах – фавикон в виде доллара и так далее.
Если же нет идей по поводу картинки, то можно попросту сделать рисунок с изображением одной или нескольких букв, по которым можно было бы узнать название или тематическое содержание сайта. Например, на сайте Одноклассники.ру на фавиконе размещены буквы «OK», по которым можно сразу узнать, что это за социальная сеть.
Ресурсы с иконками:
Я думаю, что этих сервисов за глаза хватит, чтобы выбрать нужный Вам готовый фавикон для веб-сайта.
Графические редакторы
Если Вам хочется сделать уникальный favicon для своего сайта, в помощь Вам графические редакторы. Фавикон на начальном этапе это обычный графический файл, который в дальнейшем превращается в иконку нужного размера.
Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.
Картинки в поисковых системах
Самый простой, но довольно эффективный способ для поиска будущего фавикона соответствующего тематике Вашего веб-сайта.
В поисковой строке в разделе Картинки набираете тематический запрос включающий слово «иконка» и получаете обширную выдачу изображений. Одна из которых в дальнейшем будет служить фавиконом для Вашего сайта.
Изображения надо искать с прозрачным фоном (расширение PNG), размер не имеет значения. В последующем преобразуем выбранную картинку в нужный нам формат.
Иконки в Яндекс.Картинках
Онлайн сервисы создания Favicon
Как вариант, с помощью этих сервисов можно вручную создавать свой фавикон для сайта, подбирая цвета в каждую ячейку, но сразу предупрежу, что занятие это неблагодарное. Лично у меня фавикон на выходе получался некрасивым, здесь нужен особый талант, а времени было потрачено вагон.
Вот список наиболее популярных сервисов для онлайн создания фавикон:
Устанавливаем Favicon на сайт
Есть несколько способов установить созданную иконку в качестве фавикона на вебсайт. Процедура установки может варьироваться от того на какой платформе у вас сделан сайт.
Разберем наиболее популярные варианты установки favicon.
Плагин — простейшее решение
Если у Вас сайт на наиболее популярной для блоггеров платформе WordPress, все очень просто, для этого можно воспользоваться одноименным плагином. Данный способ наиболее простой, не требуется знаний кода html.
Для этого необходимо установить плагин Favicons и далее в настройках плагина можно выбрать один из трех вариантов установки фавикона:
Установка фавикона с помощью плагина
Встроенные возможности WordPress
Почти у всех платных (и некоторых бесплатных) тем для WordPress есть встроенная возможность добавить Фавикон на свой блог. Например данная опция для темы моего блога выглядит так:
Встроенная возможность в WordPress
Достаточно указать путь до изображения будущего фавикона и дело сделано. Я именно так добавил фавикон на свой сайт, но повторюсь такая возможность есть не у всех шаблонов Вордпресс.
Установка с помощью кода html
Данный способ подходит абсолютно для всех сайтов. Будь то скопированный лендинг, либо навороченный интернет магазин, процедура для всех одинаковая.
Далее в файл index.html (если у Вас лендинг или подписная страница), или в файле header.php (если у Вас сайт на одной из популярной CMS) внутри тега необходимо прописать следующий код:
После этой процедуры Фавикон порадует своим появлением на вкладке браузера Вашего сайта. Если он не появится рекомендую очистить кэш браузера используя сочетание CTRL+R.
На этой ноте я заканчиваю свой пост. Надеюсь, что смог донести до Вас как можно сделать и установить фавикон для сайта.
Как Добавить Favicon для Сайта
Введение
Большинство сайтов имеют свои особенные логотипы и в большинстве случаев они используются, как favicons (иконки). Если вы не знаете, что такое favicon, вот визуальный пример одной их таких: Иметь свою favicon на сайте гораздо лучше, чем стандартную иконку пустого документа в браузере, к тому же, ваш сайт будет выглядеть гораздо профессиональней. В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.
Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)
Большинство браузеров автоматически находят файл favicon.ico в каталоге вашего сайта и устанавливают его в качестве favicon. Это самый легкий путь для добавления favicon.
Как только полученный файл favicon.ico будет загружен в каталог вашего сайта, браузеры автоматически добавят и покажут изображение.
ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.
Вариант 2 — Использовать обычную картинку и указать ее в коде сайта
Если вы думаете, что конвертация изображения это не для вас. Вы можете использовать обычное изображение в качестве favicon для вашего сайта.
ВАЖНО! Измените png на формат вашего изображения в type=»image/png» и favicon.png на имя вашего изображения.
Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.
ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.
Заключение
В этом руководстве вы узнали 2 способа, как добавить favicon для вашего сайта. Возможно это не столь сложная задача при создании вашего сайта, но она позволит ему иметь более привлекательный вид.
Фавикон для сайта
Начнем с определения. Фавикон представляет собой маленькую картинку (размером 16х16 или 32х32). В большинстве случаев это уменьшенная копия логотипа сайта, либо первая буква его названия, либо первые две буквы из названия, либо аббревиатура из названия, либо картинка, отражающая тематику сайта или суть бизнеса.
Где отображаются фавиконы? Очень просто:
Фавикон выполняет следующие функции:
Теперь давайте остановимся на том, что именно даёт использование фавиконок.
По предыдущему скриншоту Вы уже и сами догадались, что пользователь с гораздо большей вероятностью выберет сайт с уже знакомой фавиконкой, даже если он находится внизу ТОП-10. Примерно та же история и с историей браузера. Например, пользователь запомнил фавиконку Вашего сайта, но забыл по какому запросу к Вам попал. Что делать? Правильно – идти смотреть историю браузера и листать ее до тех пор, пока на глаза не попадется та самая фавиконка. На данный момент самые узнаваемые в мире фавиконы у Яндекса, Google, Facebook, ВКонтакте, Одноклассники и Telegram. Если же у сайта нет фавикона, то его не будет и в поисковой выдаче, а в истории браузера вместо него будет «пустой лист».
Многие пользователи судят о продавцах (и тех, кто оказывает услуги) не только на основании предоставленной на сайте информации, но и на основании того, как этот сайт вообще оформлен. И такая мелочь, как отсутствие фавикона, может неплохо ударить по доверию со стороны пользователя, особенно в тех случаях, когда пользователь выбирает между несколькими интернет-магазинами (или фирмами по оказанию интересующих пользователя услуг).
Как Вы уже знаете, людям гораздо «теплее» относятся к картинкам, нежели к тексту. А теперь представьте, что посетитель куда-то торопится. Что он делает? Правильно – добавляет сайт в закладки, чтобы не потерять. Затем, когда у пользователя появляется свободное время, он принимает решение вернуться на сайт и… В закладках Ваш сайт будет найден не столько по заголовку статьи, сколько по новой/запомнившейся фавиконке. Если фавиконки нет, то пользователь может подумать, что ссылка битая и удалит ее из закладок.
Именно поэтому фавикон должен быть заметным и узнаваемым. Самые яркие примеры:
Экономя время пользователя
Из приведенного выше примера можно сделать еще один вывод – фавиконы необходимы для того, чтобы упростить пользователю идентификацию сайта в истории/закладках.
То, что будет рассказано в этом пункте, касается как ПК, так и мобильных устройств. Нередко ссылки хранятся не в виде закладок в браузере, а в виде ярлыков на флешке в какой-то отдельной папке. При этом каждый из Вас знает, что имя ярлыка далеко не всегда отображается полностью. И вот тут с помощью фавиконок становится гораздо проще найти то, что нужно.
Обратите внимание, что мир смартфонов не стоит на месте – когда-то смартфон с экраном 640х360 пикселей считался роскошью, а сегодня и экраном в 1920х1080 пикселей (при той же диагонали) уже никого не удивишь. Из этого можно сделать только один вывод – под разное разрешение экрана необходимо делать разные фавиконы (а если точнее – разного размера.
Причем данная рекомендация актуальна как для Android-, так и для Apple-устройств.
Не торопитесь расстраиваться, т.к. позже будет рассказано про то, как эта проблема решается.
Преимущества для SEO
Ранее мы уже говорили, что если у сайта есть фавиконка, то она отображается и в поисковой выдаче. Также ранее мы говорили, что картинки для человека гораздо привлекательнее, чем текст. Отсюда следует простейший вывод: на странице с поисковой выдачей сайты с фавиконами привлекают больше внимания, чем сайты без них. Следовательно, повышается кликабельность.
Обратите внимание, в данном контексте речь идет о поисковой выдаче Яндекса, т.к. в Google фавиконы в выдаче не отображаются. Это очень важный момент, т.к. Яндекс является самой популярной в России поисковой системой и именно ей пользуется большинство русскоязычных пользователей.
Более того, у Яндекса есть даже свой собственный робот, который не занимается ничем, кроме индексирования фавиконок (к слову – сроки индексирования – от 1 недели до 1 месяца).
Как проверить, проиндексировалась ли Ваша фавиконка, или нет:
Оба способа являются элементарными и не отнимают более 15 секунд.
Ну и, раз уж сказали про Яндекс, скажем и про Google. Здесь Вы уже и сами догадались, что в поисковой выдаче Google фавиконы не отображаются. А вот теперь самое интересное. В сторону Google по этому поводу уже давно летят тапки, причем от простых пользователей. Да-да, не от нас – SEO-шников, а именно от Вас – от простых людей, которые к поисковой оптимизации сайтов не имеют ни малейшего отношения, которые совершают покупки, гуляют по различным сайтам и т.д.
Ну и еще пару слов про плагин Google Favicon. Даже не пытайтесь его искать и устанавливать в Ваш FireFox, т.к. он слишком давно не обновлялся, а потому не совместим с последними версиями браузера FireFox. Однако, можно найти аналогичные ему плагины.
Кстати, во многих других поисковых системах фавиконы тоже не добавлены в поисковую выдачу.
Фавиконы в браузерах ПК и на смартфонах
Секундой ранее мы уже упоминали, что фавиконы не отображаются в поисковой выдаче поисковых систем (за исключением, разве что, Яндекса). Однако, про браузеры такого сказать нельзя, причем это касается как мобильных браузеров, так и браузеров для ПК.
Как сделать фавикон для сайта
Способ 1: воспользоваться одним из специальных онлайн-сервисов, благо их, мягко говоря, много:
и т.д. Продолжать список не будем, т.к. даже просто быстрое перечисление без краткого описания займет очень много места.
Очевидно, что на создание такой фавиконки ушло секунд 5-10, не больше.
Пример 2 – блог Comp Security. Здесь всё еще проще, т.к. на фавиконке нарисована просто красная стрелочка.
Пример 3 – блог СтоКрат. Как видите у нас с MegaIndex’ом только одно принципиальное отличие – у них фавиконка квадратная, а у нас – овальная.
Абсолютно все три фавиконки предельно простые, но при этом крайне легко запоминаются, а потому легко узнаваемы. Ну а в качестве бонуса – для их создания реально не требуется никаких навыков художника, ибо их можно нарисовать самостоятельно в Paint. И именно этим мы сейчас и займемся.
Способ 2 – нарисовать самостоятельно по принципу «инициалов сайта».
Шаг 1. Открываем Paint, нажимаем на «Изменить размер». В открывшемся окне снимаем галочку «Сохранять пропорции» и выставляем размер. Неважно какой, главное – чтобы в итоге получился квадрат.
Шаг 2. Выбираете инструмент «Заливка», выбираете нужный цвет из палитры, а затем заливаете получившийся квадрат.
Шаг 3. Выбираете инструмент «Надпись» и пишете на фавиконке «инициалы» сайта. При необходимости можно изменить как сам шрифт, так и его размеры, а также сделать «инициалы» подчеркнутыми, наклонными и/или жирными.
В нашем случае в качестве «инициалов» будет выступать два знака доллара.
Скачанный файл загружаем в корневой каталог сайта, заходим на сайт и любуемся. Все работает!
Вот Вам пример простой, запоминающейся фавиконки, на создание которой не требуется супер-навыков и больших мозгов.
Способ 3 – воспользоваться сервисами, имеющие встроенные инструменты рисования, с возможностью загружать изображения с ПК, редактирования и уменьшения до нужных размеров.
Трёх примеров будет более, чем достаточно (ибо их тоже овер как много):
Способ 4 – фавикон-гаререи.
То же самое – всех перечислять не будем, т.к. их очень и очень много.
Thefavicongallery- более 300 фавиконок, которые можно сразу же скачивать;
Audit4web – огромное количество фавиконок на различные тематики;
Iconj- более 3000 фавиконок.
Способ 7 – воспользоваться специальными плагинами для Вашего сайта. Способ аналогичен посещению галерей, однако, тоже имеет право на существование. Особенно это касается сайтов на WordPress и Joomla. Стоит отметить, что для WordPress и Joomla есть очень козырные плагины, которые на разных страницах выводят разные фавиконки.
Как установить фавикон на сайт
Для начала стоит отметить, что если Вы воспользовались способом 7, то данный вопрос Вас волновать не должен, ибо плагин на то и плагин, чтоб избавлять владельца сайта от подобных задач.
Если же речь идет о ручной загрузке фавиконки, то тут все несколько сложнее.
Во-первых, имя файла должно быть favicon.ico или favicon.png. Этот файл нужно загрузить в корневой каталог Вашего сайта (как правило, это папка htdocs или public_htm). Затем заходите на Ваш сайт и смотрите, загрузилась фавиконка или нет. Если нет – попробуйте очистить кэш браузера. Если даже после очистки нет результата – ничего страшного.
Во-вторых, на некоторых сайтах место для фавиконки по умолчанию задано в другом месте. В этом случае заходим на сайт, правый клик – выбор пункта «Просмотр html-кода», либо «Просмотр кода страницы» (ну или что-то подобное, в разных браузерах по-разному).
Не исключен и такой вариант задания служебной гиперссылки link:
Итак, путь, куда нужно загружать фавиконку, мы вычислили – туда и загружаем. Теперь это должно сработать на все 100%. Загружать можно по-разному:
В случае с CMS Joomla фавиконка, как правило, живёт в папке с активированным на данный момент шаблоном оформления. Исключение – Joomla 1.5 – там путь прописывался в файле index.php, находящийся в папке с тем же шаблоном. Т.е. в случае с Джумлой потребуется пройти по адресу /templates/папка_с_используемым_шаблоном_оформления/favicon.ico и заменить имеющуюся там фавиконку.
Аналогичная ситуация бывает и с WordPress-сайтами, но это редкость:
Однако, есть и другой вариант – загружаете фавиконку куда угодно, а затем между тегами прописываете код, в котором указывается путь к фавиконке:
В этом случае и браузеры, и поисковый робот Яндекса безошибочно найдут фавиконку, а это значит, что она не останется незамеченной пользователями.
Например, в WordPress это файл header.php, располагающийся в папке с активной темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Файл header.php можно отредактировать как через FTP, так и через штатный редактор WordPress, так и через админку хостинг-провайдера.
Установка анимированной фавиконки
Принципиальных отличий между установкой статичной и анимированной фавиконки нет, за исключением двух моментов:
Однако, стоит отметить, что анимированная фавиконка – это не так козырно, как кажется на первый взгляд:
Именно по этим двум причинам с анимированными фавиконками пока что нет смысла заморачиваться. Если только «на будущее».
Выводы
Итак, что же мы выяснили?