Фавикон – это совершенно неправильное слово, просто оно используется в разговорной лексике веб-мастеров и под ним понимают картинку, которую вы можете видеть во вкладке браузера, а также при нахождении сайта в поисковой системе Яндекс.
Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!
И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.
JavaScript. Быстрый старт
Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.
Задаем иконку через админку WordPress
Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.
Кстати, сама система советует загружать картинку не менее 512 писелей по ширине и высоте. Такая рекомендация дается потому, что на мобильных приложениях в браузерах могут действительно использоваться такие размеры. Но в целом вы имеете право полностью проигнорировать эту рекомендацию и загрузить файл любого размера. Главное, чтобы ширина и высота были одинаковыми.
Как поменять favicon через html код
Этот способ уже для тех, кто хочет залезть в код и вообще разобраться, как это работает изнутри. Иконка сайта всегда задавалась в теге head, где подключаются внешние файлы: стили, скрипты, библиотеки и т.д.
Для такого подключения используется одинарный тег link. В нем нужно задать некоторые атрибуты, а также задать путь к файлу.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
< link rel = "shortcut icon" href = "icon.png" type = "image/png" > |
Типичное подключение иконки выглядит именно таким образом. Давайте рассмотрим каждый атрибут тега подробнее:
Rel – всегда этот атрибут использовался для того, чтобы указать роль подключаемого файла. Например, stylesheet – таблица стилей, shortcut icon – иконка и т.д. Просто запомните этот параметр, его нужно обязательно прописывать.
Href – самый важный параметр, он определяет путь к файлу. Если путь задан неверно, вы просто не увидите на странице никаких изменений. Путь в этом примере кода задан так, как будто файл icon.png лежит в той же папке, что и файл с кодом страницы.
Type – сегодня использование этого атрибута является необязательным. Он указывает mime-тип подключаемого файла. В целом, его все-таки можно прописать хотя бы для того, чтобы в старых браузерах не было никаких проблем с обработкой кода.
Формат
Формат картинки может быть любым – jpeg, png, gif, ico. Последний формат создан специально для отображения таких иконок. В некоторых программах для рисования иконок, изображение сохраняется именно в этом формате. Чтобы подключить такую картинку, нужно всего лишь изменить атрибут type.
Как поменять Favicon в Joomla
- 4.9 out of 5 based on 7 votesВ данном уроке мы рассмотрим как поменять Favicon Joomla на свой уникальный Favicon.
Favicon - это маленький значок 16\16 px, который отображается в адресной строке браузера, рядом с URL, во вкладках браузера, в поисковой выдаче и рекламных объявлениях Яндекса и т. д.
Joomla является очень популярной CMS системой с огромным функционалом, на которой построено большое количество сайтов. По умолчанию в данной системе и стандартных шаблонах используется свой значок Favicon. Он имеет несколько разновидностей и встречается очень часто.
Ошибкой многих владельцев сайтов, построенных на базе CMS Joomla является, то что они не используют свой уникальный Favicon. Наверняка вы встречали в поисковой выдаче Яндекса сайты вот с такими значками:
Преимущества использования уникального Favicon.
1. Этот маленький значок позволяет выделиться вашему сайту среди огромного количества других ресурсов.
2. Фавикон является важным инструментом брэндинга, который может помочь посетителю обратить внимание на ваш сайт и будет служить визуальным напоминанием о нем.
3. Favicon отображается на странице поисковой выдачи Яндекса и может увеличивать кликабельность и количетсво переходов на ваш сайт.
4. Если вы покупаете контекстную рекламу в Рекламной сети Яндекса, то возле обьявления ведущего на ваш сайт, так же будет отображаться этот значек и это будет влиять на количество кликов.
Именно поэтому важно иметь уникальный значек фавикон для сайта.
Как создать Favicon.
Создать Favicon можно при помощи любого графического редактора, но окончательный его вариант должен иметь раширение.ico. Поэту вам понадобится программа которая может сохранять графические файлы в данном формате. Так как устанавливать такую программу только для того, чтобы сохранить одно изображение будет излишне. То лучше всего воспользоваться специальным сервисом позволяющим это сделать.
Само изображение можно как создать самостоятельно так и использовать уже готовую заготовку. Но помните, что оно должно вписываться в дизайн вашего сайта, быть заметным и уникальным.
Как установить Favicon в Joomla.
Теперь про то, как установить ваш Favicon вместо стандартного фавикона Joomla.
Если в шаблоне, который вы используете на сайте уже имеется файл favicon.ico, то вам достаточно просто заменить его на свой. Как это проверить? Зайдите в папку с вашим сайтом, далее перейдите в папку templates/название вашего шаблона/. Если в этой папке имеется файл favicon.ico, то просто замените его на свой.
Если у вас другая ситуация, то вначале необходимо подключить фавикон к вашему сайту. В начале поменстите ваш значок в корневую папку с вашим сайтом.
После этого в файле index.php вашего шаблона необходимо прописать путь к данному файлу. Для этого в файде index.php перед тегом необходимо вставить следующие строчки:
В коде выше, указаны относительные пути к файлу favicon.ico, в некоторых случаях нужно указывать обсолютные пути, для этого замените "/favicon.ico" на http://ваш-сайт.ru/favicon.ico
Добавить данный код вы можете двумя способами:
1. В административной панели Joomla пройдите в пункт Расширения >> Менеджер шаблонов. Откроется таблица в которой будут отображаться все шаблоны установленные в вашей системе. В колонке "Шаблон" найдите название вашего шаблона и кликните по нему.
На открывшейся странице кликните по ссылке "Изменить шаблон главной страницы" в результате чего откроется для редактирования файл index.php вашего шаблона. В коде найдите тег и перед ним вставьте предложенный выше код и нажмите на кнопку "Сохранить".
2. Второй способ заключается в том, что вы можете зайти в папку с вашей темой и отредактировать файл index.php при помощи какого либо редактора, например .
Разместить файлик favicon.ico можно не только в корневой директории сайта, но и в любой другой. Однако некоторые сервисы и программы ищут его именно в этой директории поэту для своих сайтов я размещаю его именно в корневой директории и вам советую делать так же.
Что делать, если установленный Favicon не отображается.
Как только вы установите новый Favicon на Joomla, вам конечно же захочется посмотреть как он будет выглядеть во вкладках вашего браузера, но после перезагрузки страницы вам все равно будет показан старая пиктограмма.
Для того, чтобы отобразился ваш новый favicon необходимо очистить кеш браузера или зайти на сайт с того браузера с которого ранее вы на его не заходили.
В инструкции рассмотрены следующие вопросы:
Зачем нужен favicon для сайта?
Favicon (англ. favorite icon - избранный значок) - это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:
Вот где можно увидеть такую иконку:
- Закладки и вкладки браузера
- Результаты поиска Яндекс, Google
- Каталоги и рейтинги, которые загружают favicon сайтов
- Панель задач и рабочий стол операционной системы
Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.
Где взять иконку для сайта?
По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:
- Найти в интернете готовый файл иконки с расширением.ico (например, )
- Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
- Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)
При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.
Наряду с расширением.ico, в настоящее время используются иконки формата.png. Разрешение таких изображений может достигать 180x180 пикселей.
Как установить иконку на сайт?
Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью загрузите их в корень сайта:
Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.
Как объявить Apple Touch icon и плитку для Windows 10?
Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:
В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:
2014-08-19 8706 4 Денис Абдуллин
В этом материале я не только отвечаю на вопрос, как установить свою иконку favicon на сайт в системе uCoz, но и указываю, как сделать favicon.ico и делюсь с Вами коллекцией иконок для сайта.
Favicon – значок веб-сайта или веб-страницы. В браузерах отображается возле заголовка сайта и/или адреса сайта. Действия описанные в статье дают вот такой результат:
Краткое содержание:
Как сделать иконку favicon.ico
Для создания иконки сайта используйте серивис favicon.ru или favicon.cc . Здесь можно самостоятельно нарисовать значок или загрузить изображение с компьютера для конвертирования (можно, например, взять из нашего раздела иконки).
После загрузки изображения или после того, как Вы нарисовали значок, нажимайте «Сохранить Favicon».
Готовые фавиконки можно скачать здесь. Я загрузил 101 иконку favicon, нажмите на картинку справа, чтобы скачать.
Для создания значка можно использовать и специальные программы. Например, Microangelo или Delphi. Я предлагаю воспользоваться онлайн-генераторами, т.к. это проще.
Как установить иконку favicon.ico на uCoz сайт
1. Файл иконки называют favicon (favicon.ico ), предпочтительный формат – ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP. Загрузите файл «favicon.ico» через файловый менеджер или FTP в корневой каталог сайта. Файловый менеджер можно найти на главной странице панели правления сайтом.
2. Добавьте код между
и (Например, Управление дизайном - Страницы сайта):200?"200px":""+(this.scrollHeight+5)+"px");">
200?"200px":""+(this.scrollHeight+5)+"px");">
Можно указать несколько изображений в разных форматах - например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате GIF или PNG для остальных браузеров.
Проверьте правильность пути к иконке в атрибуте href. Если Вы используете для иконки формат не ICO, то измените значение type на нужное:
- image/x-icon для формата ICO;
- image/gif для формата GIF;
- image/jpeg для формата JPEG;
- image/png для формата PNG;
- image/bmp для формата BMP.
Если Вы хотите использовать анимированную иконку , то советуем сделать 2 иконки (в формате GIF и ICO) и 2 строчки кода для них. В случае если браузер поддерживает анимированные иконки, будет показываться GIF-версия.
Как быстро вставить код на все страницы?
Используем «Быструю замену участков шаблона» (Панель управления - вкладка «Дизайн»). Для режима замены выбираем вариант «Многострочный».
Favicon это некий значок сайта. Его можно увидеть во вкладках браузера, вот пример четырёх популярных сайтов. У каждого из них имеется своя картинка фавикон.
Так же поисковая система Яндекс, выводит фавикон рядом, с заголовком страницы.
Подавляющее большинство сайтов имеет favicon, он помогает выделится среди других ресурсов, а так же стать сайту более узнаваемым. Используя favicon, вам будет легче отслеживать свои позиции в Яндексе.
Создание favicon с помощью онлайн генератора
Для начала необходимо подготовить картинку, размером 16 на 16 пикселей. Это стандартный размер favicon. Для этого можно использовать логотип сайта или понравившееся изображение. Чтобы подогнать необходимый размер, можно воспользоваться программой "Paint", или какой то другой сторонней программой.
Обратите внимание, при сжатии картинки в 16 на 16 пикселей. Размеры сторон оригинала должны быть одинаковы. Допустим 243 на 243 пикселя. Иначе при сжатии, получится размытость и без того маленькой картинки.
Далее воспользуемся онлайн генератором создания favicon. Пройдя по этой ссылке favicon.ru На главной странице, в пункте "Сделать favicon из изображения". Выберите на компьютере, заранее подготовленную картинку размером 16 на 16 пикселей.
Следующий шаг "редактировать картинку". Здесь жмём "Сохранить пропорции" и "далее".
Теперь наш favicon готов. Остаётся посмотреть как он выглядит в браузере и скачать его. Так же при желании, можно подредактировать изображение. Или создать его с нуля.
Скачанный favicon, имеет нужный формат (.ico) и название favicon. Менять ни чего не надо. Остаётся только установить его на сайт.
Установка favicon на joomla 3
Первый и более простой способ установки, это замена родного фавикона. В большинстве шаблонов joomla, уже имеется favicon, его просто надо поменять на подготовленный нами фавикон.
Для этого нужно зайти в корень сайта. Далее в папку "templates", найти папку с шаблоном который стоит по умолчанию. У меня это родной шаблон "Beez3", и поменять имеющийся там favicon, на созданный нами.
После чего зайдите на ваш сайт, и обновите главную страницу. Если фавикон не поменялся, очистите кеш браузера, закройте его и откройте вновь, заново ведя адрес страницы. Иконка должна поменяться.
Но сразу ждать favicon в выдаче Яндекса, не стоит. Она появится после того как специальный бот проиндексирует вашу картинку и переведёт в формат jpg. На это может потребоваться более месяца.
Проверить проиндексировал Яндекс ваш фавикон или нет, можно набрав в браузере: http://favicon.yandex..ru", впишите доменное имя вашего сайта.
Для гугла: http:// www.google.com/s2/favicons?domain=сайт
Если первый способ установки не помог и favicon не отобразился на вашем сайте, то можно установить его, прописав необходимый код в файле index.php.
Второй способ установки favicon на joomla 3
Для того чтобы установить картинку, необходимо поместить подготовленный нами favicon, в корень сайта.
Далее, зайти в папку с шаблоном, который стоит по умолчанию: templates / шаблон по умолчанию . Найти и открыть файл index.php, с помощью блокнота notepad++. В этом документе, между открывающим тегом , и закрывающим тегом ввести вот такой код:
Остаётся очистить кеш браузера, и перезагрузить сайт. После чего фавикон должен отобразится на вашем сайте.