Как поменять фавикон


Favicon — это небольшое изображение во вкладке браузера, идентифицирующее ваш сайт. Так же оно служит добавлении вашего сайта на рабочий стол мобильного устройства для быстрого доступа. Отсутствие favicon у сайта — одна из 25 популярнейших проблем при создании сайта.

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

Почему вам стоит добавить favicon на ваш сайт?

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

Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:


Как установить favicon на WordPress

Или вот пример из другого браузера — Vivaldi:

Пример Favicon сайтов

Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… 🙂

Как создать favicon

В самом простом варианте — это иконка квадратного размера, в идеале 32х32 или 16х16 пикселей, которую без проблем можно сделать в Photoshop, либо любом другом графическом редакторе. Для простоты — создайте изображение размером 128х128 пикселей, а затем уменьшите масштаб до 32х32 или 16х16, качество не должно особо пострадать. Затем сохраните изображение в формат PNG.

Создаём фавикон с помощью онлайн-генератора LOGASTER

Создание фавикона онлайн не требует никаких дополнительных усилий или специальных навыков в дизайне. Среди русскоязычных хочу обратить ваше внимание на сервис Логастер.

В первую очередь, вам нужно будет создать логотип. Уже на этом этапе вы подбираете иконку, шрифт и цветовую гамму логотипа, которые также послужат основой для будущего фавикона. Процесс несложный и займёт всего несколько минут.

Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»:


Создание фавикон в сервисе ЛОГАСТЕР

Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров.
Сохранение фавикон в сервисе ЛОГАСТЕР

Рисуем иконку вручную

Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант — нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: favicon.cc, Faviconer, DynamicDrive. Там же можно выбрать из готовых вариантов, загруженных другими пользователями.

Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:

Создаём favicon в сервисе favicon.cc

После этого надо будет сохранить иконку на ваш компьютер.

Установка favicon на WordPress


Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.

Третий способ — это внесение двух строк в файл вашей темы; четвёртый — использование плагинов для этой задачи. Я рекомендую попробовать сначала первый вариант, потому что держать дополнительные плагины — это не самое лучшее решение, тем более, для такой разовой операции, как favicon для сайта.

Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! 🙂

Способ 1: Используем возможности WordPress

По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» — «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.


Загружаем изображение для установки favicon

Способ 2: Использование настроек вашей темы

Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.

Вот так, например, выглядит эта опция в моей теме:
Как установить favicon на WordPress

Раскрываем этот блок и видим следующее:
Как установить favicon на WordPress

Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше — у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png.

Это самый быстрый способ подключить favicon к вашему сайту!

Способ 3: Подключение в файл header.php

Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico, либо favicon.png, в зависимости от типа иконки.


Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега <head> вставьте следующий код:

<link rel="icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" />

, либо же измените разрешение на .png, если у вас иконка этого типа.

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

Способ 4: Плагин «Insert Headers and Footers»

Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.
Как установить favicon на WordPress

Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers. Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».

После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.


Как установить favicon на WordPress

Не забудьте нажать кнопку «Save settings» для сохранения настроек.

Способ 5: Плагин «All In One Favicon»

Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon, устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.

После установки и активации плагина, заходите в раздел меню «Параметры» — «All in one Favicon» и видим следующий экран с настройками:

Интерфейс плагина All-in-One Favicon

Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение


Если у вас не сработала установка иконки ни с одним из предложенных мною способов — напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. 😉

gruz0.ru

Зачем нужен favicon для сайта?

Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:

Как поменять фавикон

Вот где можно увидеть такую иконку:

  • Закладки и вкладки браузера
  • Результаты поиска Яндекс, Google
  • Каталоги и рейтинги, которые загружают favicon сайтов
  • Панель задач и рабочий стол операционной системы

Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.

По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

  • Найти в интернете готовый файл иконки с расширением .ico (например, здесь)
  • Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
  • Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)

При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.

Как установить иконку на сайт?

Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта:

Как поменять фавикон

Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.

Как объявить Apple Touch icon и плитку для Windows 10?

Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:

 <link rel="apple-touch-ico.  

sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

 <meta name="msapplication-square70x70logo" content="tile-70x70.png" /> <meta name="msapplication-square150x150logo" content="tile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="tile-310x150.png" /> <meta name="msapplication-square310x310logo" content="tile-310x310.png" /> 

www.ucoz.ru

Как сделать иконку favicon.ico

Готовые фавиконки favicon

Для создания иконки сайта используйте серивис favicon.ru или favicon.cc. Здесь можно самостоятельно нарисовать значок или загрузить изображение с компьютера для конвертирования (можно, например, взять из нашего раздела иконки).


После загрузки изображения или после того, как Вы нарисовали значок, нажимайте «Сохранить Favicon».

Готовые фавиконки можно скачать здесь. Я загрузил 101 иконку favicon, нажмите на картинку справа, чтобы скачать.

Для создания значка можно использовать и специальные программы. Например, Microangelo или Delphi. Я предлагаю воспользоваться онлайн-генераторами, т.к. это проще.

Как установить иконку favicon.ico на uCoz сайт

1. Файл иконки называют favicon (favicon.ico), предпочтительный формат – ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP. Загрузите файл «favicon.ico» через файловый менеджер или FTP в корневой каталог сайта. Файловый менеджер можно найти на главной странице панели правления сайтом.

Иконка favicon на uCoz

2. Добавьте код между <head> и </head> (Например, Управление дизайном — Страницы сайта):

или

Можно указать несколько изображений в разных форматах — например, строку с 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-версия.

Как быстро вставить код на все страницы?

Используем «Быструю замену участков шаблона» (Панель управления — вкладка «Дизайн»). Для режима замены выбираем вариант «Многострочный».

Быстрая замена участков шаблона

Мы знаем, что код нужно вставить между <head> и </head>, поставим код сразу же после <head>, заменим это

На это

Материалы по теме

  • Иконки для сайта или где скачать иконки для сайта
  • Piecon. Процентная загрузка в Favicon и Title

Источники

  • https://help.yandex.ru/webmaster/search-results/favicon.xml
  • http://manual.ucoz.net/board/21-1-0-380
  • https://ru.wikipedia.org/wiki/Favicon

yraaa.ru

Иконка веб сайта в браузере и в поисковике

Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

иконка сайта в браузере

Если же владелец ресурса никогда не задавался вопросом, как добавить иконку на сайт, то по умолчанию в качестве картинки будет отображаться значок браузера.

иконка в браузере по умолчанию

Помимо отображения в браузерах, Favicon отображается и в поисковиках: иконка сайта в Яндексе ставиться слева от названия ресурса, аккурат напротив цифры, показывающей место ресурса в выдаче по введенному пользователем поисковому запросу.

иконка сайта в Яндексе

Итак, после того, как стало понятно, зачем нужна иконка для сайта и где она отображается, можно перейти к описанию того, как сделать иконку для сайта самостоятельно и как добавить ее на сайт.

Создание иконки для сайта

Существует несколько способов, как сделать иконку для сайта. Самым простым вариантом является создание иконки для сайта с помощью онлайн сервисов, в которые загружается квадратное изображение, из которого система автоматически формирует картинку выбранного размера в нужном формате. Один из таких сервисов по созданию Favicon’ок онлайн находится здесь.

Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

  • Icon Craft;
  • Студия иконок.

Так же можно самостоятельно нарисовать иконку для сайта в фотошопе. Данная универсальная программа для редактирования изображений позволяет рисовать все что угодно. Можно рисовать лого фирмы, писать буквы особыми шрифтами и т.д., главное помнить, что нарисованная иконка сайта так или иначе должна быть связана с общим оформлением ресурса или с его контентом, ведь именно тогда она будет лучше запоминаться вашим посетителям.

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей, так что не стоит даже пытаться втиснуть туда высокохудожественное изображение, его все равно не будет видно на маленьком значке, намного лучше будут смотреться читаемые буквы и логотипы.

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

Как поменять фавикон

Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Html код иконки для сайта

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:

<link rel=»SHORTCUT ICON» href=»/favicon.gif» type=»image/gif»>

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами <head> и </head> в файл страницы, на которую нужно поставить иконку.

Как поменять фавикон

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

Как поменять иконку сайта? замена иконки сайта

Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.

 

seokleo.ru

Стандартный Favicon JoomlaПреимущества использования уникального Favicon.

+ 1. Этот маленький значок позволяет выделиться вашему сайту среди огромного количества других ресурсов. 

+ 2. Фавикон является важным инструментом брэндинга, который может помочь посетителю обратить внимание на ваш сайт и будет служить визуальным напоминанием о нем.

+ 3. Favicon отображается на странице поисковой выдачи Яндекса и может увеличивать кликабельность и количетсво переходов на ваш сайт.

+ 4. Если вы покупаете контекстную рекламу в Рекламной сети Яндекса, то возле обьявления ведущего на ваш сайт, так же будет отображаться этот значек и это будет влиять на количество кликов.

Именно поэтому важно иметь уникальный значек фавикон для сайта.

Уникальный Favicon

Как создать Favicon.

Создать Favicon можно при помощи любого графического редактора, но окончательный его вариант должен иметь раширение .ico. Поэту вам понадобится программа которая может сохранять графические файлы в данном формате. Так как устанавливать такую программу только для того, чтобы сохранить одно изображение будет излишне. То лучше всего воспользоваться специальным сервисом позволяющим это сделать.

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

Не буду приводить здесь весь процесс создания фавикон подробно смотрите урок как создать Favicon.

Как установить Favicon в Joomla.

Подключение Favicon

Теперь про то, как установить ваш Favicon вместо стандартного фавикона Joomla.

Если в шаблоне, который вы используете на сайте уже имеется файл favicon.ico, то вам достаточно просто заменить его на свой. Как это проверить? Зайдите в папку с вашим сайтом, далее перейдите в папку templates/название вашего шаблона/. Если в этой папке имеется файл favicon.ico, то просто замените его на свой.

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

После этого в файле index.php вашего шаблона необходимо прописать путь к данному файлу. Для этого в файде index.php перед тегом </head> необходимо вставить следующие строчки:

В коде выше, указаны относительные пути к файлу favicon.ico, в некоторых случаях нужно указывать обсолютные пути, для этого замените «/favicon.ico» на   http://ваш-сайт.ru/favicon.ico

Добавить данный код вы можете двумя способами:

1. В административной панели Joomla пройдите в пункт  Расширения >> Менеджер шаблонов. Откроется таблица в которой будут отображаться все шаблоны установленные в вашей системе. В колонке «Шаблон» найдите название вашего шаблона и кликните по нему. 

На открывшейся странице кликните по ссылке «Изменить шаблон главной страницы» в результате чего откроется для редактирования файл index.php вашего шаблона. В коде найдите тег </head> и перед ним вставьте предложенный выше код и нажмите на кнопку «Сохранить».

2. Второй способ заключается в том, что вы можете зайти в папку с вашей темой и отредактировать файл index.php при помощи какого либо редактора, например Notepad2.

Разместить файлик favicon.ico можно не только в корневой директории сайта, но и в любой другой. Однако некоторые сервисы и программы ищут его именно в этой директории поэту для своих сайтов я размещаю его именно в корневой директории и вам советую делать так же.

Что делать, если установленный Favicon не отображается.

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

Для того, чтобы отобразился ваш новый favicon необходимо очистить кеш браузера или зайти на сайт с того браузера с которого ранее вы на его не заходили.

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

Он находит вашу иконку, преобразует ее в формат .png и загружает на свой сервер откуда и производит ее показ. Поэтому пока он не проведет все эти операции с новой иконкой в результатах поиска она не покажется.

Если вы завершили создание своего сайта и ищете для его виртуальный хостинг или хотите перенести сайт на более качественный хостинг, то можете воспользоваться услугами хостинг-провайдера HostLand.

Если при заказе хостинга укажете промо-код 4edc1eb4 — получите целый месяц хостинга абсолютно бесплатно.

webmastermix.ru

Как поменять фавикон на сайте

От автора: приветствую вас на webformyself и сегодня я вам расскажу, как поменять фавикон на сайте и что это вообще такое.

Фавикон – это совершенно неправильное слово, просто оно используется в разговорной лексике веб-мастеров и под ним понимают картинку, которую вы можете видеть во вкладке браузера, а также при нахождении сайта в поисковой системе Яндекс.

Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!

Как поменять фавикон

И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.

Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.

Задаем иконку через админку WordPress

Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.

Как поменять фавикон

Кстати, сама система советует загружать картинку не менее 512 писелей по ширине и высоте. Такая рекомендация дается потому, что на мобильных приложениях в браузерах могут действительно использоваться такие размеры. Но в целом вы имеете право полностью проигнорировать эту рекомендацию и загрузить файл любого размера. Главное, чтобы ширина и высота были одинаковыми.

Как поменять favicon через html код

Этот способ уже для тех, кто хочет залезть в код и вообще разобраться, как это работает изнутри. Иконка сайта всегда задавалась в теге head, где подключаются внешние файлы: стили, скрипты, библиотеки и т.д.

Для такого подключения используется одинарный тег link. В нем нужно задать некоторые атрибуты, а также задать путь к файлу.

Типичное подключение иконки выглядит именно таким образом. Давайте рассмотрим каждый атрибут тега подробнее:
Rel – всегда этот атрибут использовался для того, чтобы указать роль подключаемого файла. Например, stylesheet – таблица стилей, shortcut icon – иконка и т.д. Просто запомните этот параметр, его нужно обязательно прописывать.

Href – самый важный параметр, он определяет путь к файлу. Если путь задан неверно, вы просто не увидите на странице никаких изменений. Путь в этом примере кода задан так, как будто файл icon.png лежит в той же папке, что и файл с кодом страницы.

Type – сегодня использование этого атрибута является необязательным. Он указывает mime-тип подключаемого файла. В целом, его все-таки можно прописать хотя бы для того, чтобы в старых браузерах не было никаких проблем с обработкой кода.

Формат

Формат картинки может быть любым – jpeg, png, gif, ico. Последний формат создан специально для отображения таких иконок. В некоторых программах для рисования иконок, изображение сохраняется именно в этом формате. Чтобы подключить такую картинку, нужно всего лишь изменить атрибут type:

Однако сегодня намного проще и разумнее будет использовать png формат.

А где же взять иконку?

Ну допустим, с установкой все понятно, но вас интересует, где найти красивую иконку для сайта. Это можно сделать следующими способами:

В общем, с установкой такого важного элемента сайта ни в коем случае нельзя медлить. Без иконки сегодня никак нельзя, поэтому немедленно ее устанавливаете, хотя бы совсем простую, пока не придумаете что-то поинтереснее.

Как поменять фавикон

webformyself.com

История появления первых фавиконов

Маленькая иконка на сайте называется фавикон, что означает «значок для избранного» в переводе с английского. Изначально она использовалась для быстрого поиска и наведения порядка в закладках в браузерах IE. Затем стала повсеместно отображаться практически всеми интернет-бродилками для придания особой стилистики сайту.

Характеристики Favicon

Фавикон — это обычное изображение, как правило, размером 16 на 16 точек. Для хранения могут использоваться форматы ICO, PNG и GIF. Фавикон поддерживают многие популярные браузеры. В их число входят Chrome, IE, Opera, Firefox. Какие-то могут поддерживать анимационные версии, какие-то нет.

как поменять фавикон

По умолчанию браузер пытается отыскать иконку в корне сайта. Однако можно указать ему, где именно она находится. Для этого достаточно в коде использовать строку:

<link rel=»тип стиля» type=»image/тип расширения» href=»/путь к новому фавикону» />.

Создание своего фавикона

Чтобы создать свою иконку, достаточно воспользоваться одним из представленных в сети онлайн-редакторов. К примеру, самый известный находится по адресу favicon.ru. Нужно карандашом отметить точки, нуждающиеся в заливке, и затем сохранить картинку.

Как поменять фавикон

Многие веб-разработчики стараются при создании сайта сменить стандартную иконку CMS или вообще отсутствующую на более подходящую тематике. Далее будет перечисление способов, описывающих, как поменять фавикон в различных системах управления контентом или же без них.

поменять фавикон joomla

Joomla 1.5 и работа с фавиконом

Joomla 1.5 — одна из первых стабильных версий системы управления контентом. Используется она все реже, однако многие до сих пор поддерживают её на некоторых сайтах. Для того чтобы поменять фавикон в Joomla 1.5, нужно создать иконку из готового рисунка или же с нуля. Затем перейти в папку с шаблонами Joomla, которые находятся в каталоге templates, и скопировать фавикон туда.

Joomla 3

Последняя из вышедших версий данной системы управления контентом. Улучшен функционал и добавлены новые возможности.

Перед тем как поменять фавикон в Joomla 3, нужно сначала его создать. Как это сделать, было описано выше. Затем можно использовать один из двух способов. Первый позаимствован из Joomla 1.5 и предполагает ручную замену файла в папке с шаблонами.

как поменять фавикон в битрикс

Для реализации второго способа необходимо подредактировать файл index.php, который находится в корневой папке текущего шаблона. В нем интересует тег <head>. Чтобы все заработало как надо, нужно от открывающего тега до закрывающего ввести:

<link rel=»каскадный стиль» type=»image/тип используемого контента» href=»/расположение фавикона» />.

Добраться до файла index.php можно, просто пройдя по папкам до нужной или через админку. В панели управления надо зайти в «Расширения» и там перейти в «Менеджер шаблонов». Среди присутствующих вариантов нужно выбрать текущий и нажать «Изменить шаблон главной страницы». Откроется редактор кода, в котором между открывающим и закрывающим тегом head должен быть вставлен вышеприведённый код.

Иногда фавикон отображается не сразу в поисковой выдаче. Это может быть связано с тем, что страница ещё не проиндексировалась. Стоит немного подождать, и через несколько дней, а может быть, и месяц новый фавикон отобразится в верхней части сайта.

Как поменять фавикон в «Битриксе»

«Битрикс» — система управления контентом, на базе которой можно создавать и простые сайты, и корпоративные порталы. Разработана компанией «1С-Битрикс».

Структура файлов сайта чем-то схожа с Joomla, и процесс замены фавикона на нужный происходит точно так же. То есть необходимо перейти в папку с шаблоном и скопировать туда нужную картинку в формате ICO. Если не помогло, попробовать также добавить её в корневую папку проекта.

Также имеется и другой способ, который можно совместить с двумя перечисленными выше. Это прописать в главном файле уже известные строки:

<link rel=»стиль и его тип» type=»image/тип картинки» href=»/путь» />.

WordPress

WordPress — одна из самых известных систем управления контентом. Обрела свою популярность благодаря тому, что бесплатна, проста в освоении и функциональна. Как поменять фавикон на сайте WordPress? Этот процесс в данной CMS выполняется проще всех остальных. Нужно зайти в панель управления и перейти в раздел Cherry Options, после чего выбрать вкладку Logo&Favicon. Имеющийся файл нужно удалить с помощью кнопки Remove. Затем подготовить новую иконку и загрузить себе на компьютер. Теперь с помощью библиотеки медиафайлов нужно добавить обновленную иконку в базу и сохранить изменения.

как поменять фавикон в joomla 3

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

Имеется ещё один способ изменения фавикона в WordPress. Для этого существует специальный файл header.php, который отвечает за вывод шапки сайта. В нем имеется блок с тегами head. Вот именно между ними и нужно вставить следующий код:

<link rel=»название иконки» type=»image/тип расширения» href=»/путь к картинке» />

как поменять фавикон на сайте

Header.php находится по пути /wp-content/themes/название темы. Стоит обратить внимание на то, что в строках кода используется расширение ICO. Однако, если оно другого типа у текущего фавикона, то можно в коде указать то, которое надо.

Заключение

В статье было подробно описано, как поменять фавикон в разных системах управления контентом. Для чего вообще нужно это делать и какой практический интерес несёт эта процедура? Самая главная причина — узнаваемость сайта. Именно по фавикону можно узнать свой любимый сайт в поисковой выдаче. К тому же при большом количестве открытых вкладок в современном браузере можно быстро вычислить, на какой из них размещена та или иная страница.

Перед тем как поменять фавикон, его нужно подготовить. Это возможно сделать, преобразовав готовый рисунок или логотип. Или же нарисовать вручную новый фавикон с нуля. Для этого имеется много онлайн-редакторов, а также конвертеров в сети.

fb.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.