Иконка на сайт: Как сделать иконку сайта на вкладке

html — Как установить иконку для сайта?

Вопрос задан 10 лет 5 месяцев назад

Изменён 4 года назад

Просмотрен 6k раз

Почему-то в разделе head HTML-документа написал:

<link rel="shortcut icon" href="icon/favicon.ico">

Разместил в папке файл «favicon.ico«, но всё равно иконка не отображается!

Кто-нибудь, подскажите, в чём причина, пожалуйста.

• html
• icon

3

Ну, во-первых, надо убедиться, что icon/favicon.ico — верный путь до иконки. Ну если все в порядке, то значит браузер виноват, т.е. кэш. Бывало такое. Но попробуй обмануть, в обоих случаях помогает, так как код страницы меняется.

<link rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon" />

или так (задать абсолютный путь)

<link rel="shortcut icon" href="/icon/favicon.ico">

У вас какой сервер? Если апач, то кинте favicon.ico в корень сайта и будет вам счастье.

1

Попробуй вот так:
<link rel="icon" href="./icon/favicon.ico" type="image/x-icon">

1

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

https://realfavicongenerator.net/

Я всегда вставляю следующим образом (обычно ложу в корень сайта, туда же куда и index. html или index.php:

<link href="favicon.ico" rel="icon"         type="image/x-icon" />
<link href="favicon.ico" rel="shortcut icon"    type="image/x-icon" />

Многие поисковики и браузеры, сами ищут эту иконку в корне сайта по имени favicon

В вашем случае код должен быть таким (если вы указываете относительный путь):

<link href="icon/favicon.ico" rel="icon"        type="image/x-icon" />
<link href="icon/favicon.ico" rel="shortcut icon"   type="image/x-icon" /> 

Да я использую две строки с разными rel=»» атрибутами. Так сложилось исторически из-за браузеров и их «перетягиваний одеяла»

А еще иконка может не показываться, если у неё неверно указан формат. Например сделать иконку в ФШ и сохранить её как .ico почему то не всегда срабатывает. Я делаю иконки в ФШ, сохраняю как jpg а потом программой IcoFX конвертирую их в .ico уже несколько лет так и все отлично работает.

У меня тоже такая проблема была. Короче кидаешь иконку в корень сайта(Не знаю надо или нет но у меня так), прописываешь (С такими скобками< > незнаю как их поставить link rel=»shortcut icon» href=»favicon. ico» ТЕПЕРЬ! Перезагружаешь сервер свой. У меня Опен Сервер там все просто у тебя не знаю как

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать иконку для сайта онлайн

Иконка для сайта, или как её ещё называют favicon (фавикон), является элементом индивидуальности, она помогает сделать проект узнаваемым и запоминающимся. Несмотря на свои небольшие размеры, значок сайта имеет большое значение для брендинга.

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

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

Оглавление

• 1 Как сделать favicon для сайта
• 2 Какой делать иконку сайта

Как сделать favicon для сайта

Прежде, чем начинать создавать иконку для сайта, нужно определить, каким требованиям она должна соответствовать. Во-первых, размер. Рекомендуем 512 на 512 пикселей. Это максимальный допустимый размер. Допускается использовать изображение и меньшего размера. Во-вторых, формат. Рекомендуется применять .png, а также допускается . ico. Можно поэкспериментировать и с другими форматами и размерами, но для гарантированной правильной работы иконки, следует оставаться в этих рамках.

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

Вestwebservice – инструмент представляет собой конвертер изображений в подходящий для фавикон формат и придание ему нужного размера. Как только вы перейдете на этот сервис, вы увидите кнопку “Выберите файл”. Нажав на неё, вам нужно будет выбрать файл изображения, который нужно превратить в иконку. Затем ниже следует выбрать необходимый вам размер. Выбирать можно с 16 до 512 пикселей. И потом нажать на кнопку “Конвертировать”. Также ниже вы можете увидеть иконки, которые уже были созданы на этом сервисе.

Favicon – представляет собой более функциональный инструмент, но такой же простой. Кроме того, что можно загрузить своё изображение с компьютера для конвертации в нужный формат, можно ещё сделать загрузку по ссылке. А самое главное, можно в простом редакторе самому нарисовать иконку. Правда, редактор не продвинутый, он очень простой – представляет собой поле из 16 пикселей, которые можно закрашивать с помощью карандаша. Можно настраивать цвет закрашивания.

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

Be1 – минималистичный сервис, который позволит создать значок сайта. Представляет собой он простейший конвертер изображения в нужный формат. Из управления есть только кнопка для загрузки исходной готовой картинки. Нельзя выбрать ни размер, ни формат. Подойдёт тем, кто хочет быстро и без лишних вопросов создать иконку.

Create.vista – сервис аналогичный Canva, но в нём больше бесплатных возможностей. Создать иконку можно с помощью профессиональных графических инструментов, а также есть возможность использовать готовые паттерны. Кроме работы с иконками, этот сервис умеет создавать и обрабатывать и другую графику, которую также можно использовать для сайта. Это хороший вариант для тех, кому часто приходится работать с графикой, но при этом нет желания устанавливать на компьютер громоздкие графические приложения.

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

Какой делать иконку сайта

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

• Как было сказано в начале, формат должен быть .png или .ico.
• Размер – до 512 пикселей.
• В большинстве случаев, во вкладке браузера и в поисковой выдаче, иконка будет очень маленькой. Поэтому не следует на ней делать какие-то мелкие элементы, их всё равно не будет видно.
• Также из-за маленького размера не нужно использовать в иконке сайта много цветов. Большую цветовую гамму никто не сможет оценить на маленьком пространстве, отведённом для значка.
• Стиль иконки нужно выдержать в общем стиле бренда, она должна быть похожа на логотип сайта и придерживаться принятых на сайте цветов.

Рекомендуем вам ознакомиться с материалом о фавикон для сайта на WordPress.

Также по этой теме:

Web Icon PNG Images, Vectors Free Download — Pngtree

• vector web icon

• vector web icon

• website symbol web icon vector isolated

• vector web icon

• web icon design

• значок всемирной паутины для вашего проекта

• векторная веб-иконка

• векторная веб-иконка

• веб-иконка дизайн

• web icon design

• vector web icon

• vector web icon

• world wide web icon design template illustration

• web browser icon with line style icon vector illustration internet software

• красный градиент интернет символ значок

• вектор значок веб-поиска

• интернет на ноутбуке веб-значок плоская линия заполнена серый значок вектор

• vector webpage icon

• vector web search icon

• vector web page icon

• web icon set contact us icons editable

• icons collection for business card premium vector

• creative мультфильм паутина значок паутины

• значок векторной сети

• значок векторной сети

• значок векторной сети

• Vector Web Icons

• Vector Web Icon

• Дизайн веб -иконки

• ICON

• .

• веб-иконка

• векторная веб-иконка

• иконка черно-белая веб-иконка

• векторная веб-иконка

• Веб -значки

• Дизайн веб -значков

• World Wide Web Icon для вашего проекта

• Vector Web ICON

• ICON Society Media

  171717917
ICON

171717917917

ICON

171717917917917917917917917917917917917

• ICON

  17917917

• .

• веб-иконка

• поделиться веб-иконой

• иллюстрация шаблона всемирной паутины

• иконка всемирной паутины для вашего проекта

• maintenance seo web icon vector illustration for web

• web icon design vector

• web icon design

• vector spider web icon

• vector spider web icon

• свяжитесь с нами значки простые плоские векторные значки на белом фоне0005

• World Wide Web Icon Set Flat Design

• Vector Web Icon

• Театральный символ Веб -значки

ИКОНС — Web App Manifests

	Массив

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

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

 "значки": [
  {
    "src": "иконка/lowres.webp",
    "размеры": "48x48",
    "тип": "изображение/webp"
  },
  {
    "src": "значок/низкое разрешение",
    "размеры": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "размеры": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "иконка/hd_hi.svg",
    "размеры": "любые"
  }
]
 

Объекты изображения могут содержать следующие значения:

Член	Описание
размеры	Строка, содержащая размеры изображения, разделенные пробелами, с использованием того же синтаксиса, что и размеры атрибут.
источник	Путь к файлу изображения. Если src является относительным URL-адресом, базовый URL-адрес будет URL-адресом манифеста.
тип	Подсказка относительно типа носителя изображения. Назначение этого члена чтобы позволить пользовательскому агенту быстро игнорировать изображения с типами мультимедиа, которые он делает не поддерживается.
назначение	Определяет назначение изображения, например, если изображение предназначено служить какой-то специальной цели в контексте хост-ОС (т. е. для лучшая интеграция). цель может иметь одно или несколько следующих значений, разделенных пробелами: монохромный : пользовательский агент может отображать этот значок там, где монохромная иконка со сплошной заливкой необходим. Информация о цвете в значке отбрасывается и только используются альфа-данные. Затем значок может использоваться пользовательским агентом. как маска поверх любой сплошной заливки. маскируемый : Изображение разработано с маски иконок и безопасная зона таким образом, чтобы любая часть изображения за пределами безопасной зоны могла безопасно игнорироваться и маскироваться агентом пользователя. любой : пользовательский агент может отображать значок в любом контекст (это значение по умолчанию).

Спецификация
Манифест веб-приложения # icons-member

Таблицы BCD загружаются только в браузере с включенным JavaScript.