как сделать иконку сайта?
картинка 32pх есть папку в которой лежит иконка в формате .ico но все равно ничего не отображается
Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 23 янв 2023 в 15:17
11 3 3 бронзовых знака
images/x-icon — прямо так в ролике и написано буква в букву?
23 янв 2023 в 16:00
нет!поменял на image/x-icon но все равно не работает)и разве image/x-icon это не просто текст для большего понимания что за тип?разве я не могу написать в type любые символы?
23 янв 2023 в 17:49
Может ваш браузер не поддерживает формат .ico? Попробуй изменить тип иконки и путь к ней в теге перед favicons ставь /
23 янв 2023 в 17:51
@IrshatKhuzin не помогло!скачал изображение в .png формате Вот код
23 янв 2023 в 21:48
href=»/favicons/coat_of_arms_trident_shield_icon_218780.png» попробуй на это заменить тег href
24 янв 2023 в 4:07
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Достаточно положить файл с иконкой для сайта в корневой каталог, а не в отдельную папку, как у Вас на скриншоте. Ничего дополнительно в коде прописывать не нужно — так делали на заре времен, сейчас хостинг умный и сам поймет, что это иконка. если очень хотите в код что-то добавить, то сделайте так как на скриншоте (и тогда оставьте иконку в папке):
Отслеживать
ответ дан 31 янв 2023 в 8:31
26 4 4 бронзовых знака
- html5
- favicon
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.30.4069
Как добавить иконку сайта в адресную строку браузера?
При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера.
Отображение иконки в строке браузера
Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 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
После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».
Тип файла для сохранения иконки
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.
Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег , как показано ниже.
Атрибут href задает расположение и имя файла.
Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.
Как сделать иконку сайта на вкладке html
Для того чтобы добавить иконку сайта на вкладке, нужно использовать тег со значением атрибута rel равным «shortcut icon» и атрибут href указывающий на путь к изображению.
rel="shortcut icon" href="path/to/icon.png" />
В этом примере, мы добавляем иконку с путем «path/to/icon.png». Важно, чтобы путь был указан правильно и иконка была доступна по этому пути.
06 апреля 2023
Чтобы добавить иконку для MS Edge, нужно добавить следующие теги внутри тега :
name="msapplication-TileColor" content="#ffffff" /> name="msapplication-TileImage" content="path/to/ms-icon-144x144.png" /> name="theme-color" content="#ffffff" /> Здесь мы указываем цвет плитки приложения для MS Edge в атрибуте content тега с именем msapplication-TileColor . Также мы указываем путь к иконке для MS Edge в атрибуте content тега с именем msapplication-TileImage .
Атрибут name и content тега определяют цвет темы приложения. В данном случае мы указываем, что цвет темы должен быть белым.
06 апреля 2023
Чтобы добавить иконку для IOS, нужно добавить следующие теги внутри тега :
rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon.png" /> name="apple-mobile-web-app-capable" content="yes" /> name="apple-mobile-web-app-status-bar-style" content="black" /> Здесь мы указываем путь к иконке для IOS в атрибуте href тега . Также мы указываем размеры иконки в атрибуте sizes . Для IOS рекомендуется использовать размер 180×180.
Атрибуты name и content тега определяют поведение веб-приложения на IOS. В данном случае мы указываем, что веб-приложение может быть запущено на IOS и что стиль статус-бара должен быть черным.
Как добавить иконку на сайт html
Чтобы добавить иконку на сайт HTML, нужно выполнить следующие шаги:
- Создайте иконку размером 16×16 или 32×32 пикселей. Лучше всего использовать формат PNG или ICO.
- Назовите файл иконки favicon.ico и сохраните его в корневой папке вашего сайта.
- Добавьте следующую строку внутри тега вашей HTML страницы:
rel="icon" href="favicon.ico" type="image/x-icon"> Если иконка не имеет формата .ico, а например .png, то нужно указать соответствующие расширение файла.
Сохраните изменения и загрузите вашу HTML страницу на сервер. Обратите внимание, что некоторые браузеры могут не отображать иконку, если она не имеет формата .ico или если ее размеры не соответствуют стандартным размерам. Также рекомендуется проверить, что иконка правильно отображается в разных браузерах и на разных устройствах.