Как поставить картинку на вкладку сайта html
Перейти к содержимому

Как поставить картинку на вкладку сайта html

  • автор:

Как добавить иконку сайта в адресную строку браузера?

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

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

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

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico .

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

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

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.

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

Чтобы добавить иконку на сайт HTML, нужно выполнить следующие шаги:

  1. Создайте иконку размером 16×16 или 32×32 пикселей. Лучше всего использовать формат PNG или ICO.
  2. Назовите файл иконки favicon.ico и сохраните его в корневой папке вашего сайта.
  3. Добавьте следующую строку внутри тега вашей HTML страницы:
 rel="icon" href="favicon.ico" type="image/x-icon"> 

Если иконка не имеет формата .ico, а например .png, то нужно указать соответствующие расширение файла.

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

Иконка во вкладке

А как тогда вообще сделать, раньше получалось и с .png, только не помню как. Подскажите, как сделать.

11 июн 2011 в 18:40
Если файл на месте — попробуйте убрать спецификатор типа файла — он некорректный.
11 июн 2011 в 18:45
Что-то нефига не выходит! =(
11 июн 2011 в 18:47
@iwowa Уважаемый участник, не надо использовать без надобности восклицательные знаки.
11 июн 2011 в 18:47

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Для явного указания местоположения favicon.ico необходимо вписать cледующую строку в код страницы вашего сайта внутрь секции head:

Если не цепляется, то

  1. проверить пути (положить в корень),
  2. проверить разные форматы и размеры (png, ico и тп.),
  3. проверить разные браузеры (IE или Chrome),
  4. проверить соответствие type (type=»image/png» для png).

Отслеживать
ответ дан 12 июн 2011 в 17:31
34.5k 27 27 золотых знаков 98 98 серебряных знаков 214 214 бронзовых знаков

  • html
  • html5
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.14.4854

Создание и добавление иконки сайта Favicon

Иконка для сайта Favicon

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

В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

1. Какие требования к размеру и формату иконки

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

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

  • .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
  • .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.

Можно использовать и другие форматы? например, jpeg или gif. Из-за особенностей браузеров и разных ОС мы рекомендуем выбирать ico. Самый каноничный формат, с которым точно не ошибетесь.

Рекомендуемые размеры для иконок:

  • 16 на 16 px
  • 32 на 32 px
  • 192 на 192 px
  • 512 на 512 px

2. Как и где создать иконку для сайта

Возможно у вас уже есть подготовленная иконка — тогда пропустите этот раздел и переходите к шагу 3. Если иконки у вас еще нет, вы можете самостоятельно создать её в удобном редакторе или воспользоваться одним из онлайн сервисов:

https://icons8.com — отличный сервис с большим выбором иконок и удобным поиском. Вам достаточно просто отыскать понравившуюся иконку и скачать её.

https://iconsflow.com — на этом сайте кроме большого выбора макетов вы также можете отредактировать иконку: изменить её форму, добавить фон, стиль отображения и пр.

3. Как добавить иконку на сайт

Есть несколько вариантов добавить иконку на сайт.

Вариант 1Загрузить иконку в формате favicon.ico в корневой каталог сайта. Все браузеры автоматически распознают этот файл и отобразят изображение в качестве иконки на вкладке. Файл нужно загрузить в корень сайта через файловый менеджер или FTP, формат файла обязательно должен быть ico.

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

Вариант 3Воспользоваться стандартным загрузчиком CMS. Все популярные платформы для разработки сайта: WordPress, Joomla, Opencart уже имеют встроенный функционал для загрузки иконок. Вам достаточно открыть настройки сайта и загрузить иконку стандартным способом.

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

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

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