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

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

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

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

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

Почему-то в разделе 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

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

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

Почта

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

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

Почта

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

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

Как создать ярлык сайта в Windows

Сегодня мы рассмотрим как различными способами создать ярлык веб-сайта, который откроется в выбранном вами браузере в Windows 7,  8 и 10.

Создать ярлык сайта на рабочем столе, который всегда открывается в Google Chrome

1. Откройте браузер Google Chrome.

2. Перейдите на сайт, ярлык которого вы хотите создать, зайдите в меню (нажмите на три точки справа вверху) => “Дополнительные инструменты” =>  нажмите на “Создать ярлык”.

3. Введите имя для ярлыка и нажмите на “Создать”.

Вы можете создать ярлык сайта, который будет открываться в Chrome другим способом:

1. В пустой области рабочего стола нажмите правой кнопкой мыши, из открывшегося меню выберите “Создать” => “Ярлык”.

2. В строку “Укажите расположение объекта” введите:

(32 – разрядная Windows)

чтобы открывать в текущем окне “%ProgramFiles%\Google\Chrome\Application\chrome.exe” URL

чтобы открывать в новом окне “%ProgramFiles%\Google\Chrome\Application\chrome.exe” -new-window URL

чтобы открывать в окне инкогнито “%ProgramFiles%\Google\Chrome\Application\chrome. exe” -incognito URL

(64 – разрядная Windows)

чтобы открывать в текущем окне “%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe” URL

чтобы открывать в новом окне “%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe” -new-window URL

чтобы открывать в окне инкогнито “%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe” -incognito URL

и нажмите “Далее”. К примеру, “%ProgramFiles%\Google\Chrome\Application\chrome.exe” https://vynesimozg.com

3. Введите имя для ярлыка и нажмите на “Готово”. Смените значок ярлыка (если хотите).

 

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

1. Откройте любой браузер.

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

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

1. В пустой области рабочего стола нажмите правой кнопкой мыши, из открывшегося меню выберите “Создать” => “Ярлык”.

2. В строку “Укажите расположение объекта” введите адрес сайта (к примеру https://vynesimozg.com/) и нажмите “Далее”.

3. Введите имя для ярлыка и нажмите на “Готово”.

 

Создать ярлык сайта, который открывается в Microsoft Edge

1. В пустой области рабочего стола нажмите правой кнопкой мыши, из открывшегося меню выберите “Создать” => “Ярлык”.

2. В строку “Укажите расположение объекта” введите %windir%\explorer microsoft-edge:адрес сайта (к примеру %windir%\explorer microsoft-edge:https://vynesimozg.com) и нажмите “Далее”.

3. Введите имя для ярлыка и нажмите на “Готово”. Смените значок ярлыка (если вы хотите выбрать значок браузера Edge, ищите его по пути %windir%\SystemApps\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\MicrosoftEdge.exe).

Создать ярлык сайта, который открывается в Mozilla Firefox

1. В пустой области рабочего стола нажмите правой кнопкой мыши, из открывшегося меню выберите “Создать” => “Ярлык”.

2. В строку “Укажите расположение объекта” введите

(открывать в текущем окне) “%ProgramFiles%\Mozilla Firefox\firefox.exe” URL  или

(открывать в новом окне) “%ProgramFiles%\Mozilla Firefox\firefox.exe” -new-window URL или

(открывать в приватном окне) “%ProgramFiles%\Mozilla Firefox\firefox.exe” -private-window URL

и нажмите “Далее”. К примеру, “%ProgramFiles%\Mozilla Firefox\firefox.exe” https://vynesimozg.com

3. Введите имя для ярлыка и нажмите на “Готово”. Смените значок ярлыка (если хотите).

Создать ярлык сайта на рабочем столе, который всегда открывается в Internet Explorer

1. В пустой области рабочего стола нажмите правой кнопкой мыши, из открывшегося меню выберите “Создать” => “Ярлык”.

2. В строку “Укажите расположение объекта” введите “%ProgramFiles%\Internet Explorer\iexplore.exe” URL (открывать в новом окне) или “%ProgramFiles%\Internet Explorer\iexplore.exe” -private URL (открывать в новом приватном окне. К примеру, “%ProgramFiles%\Internet Explorer\iexplore.exe” https://vynesimozg.com

3. Введите имя для ярлыка и нажмите на “Готово”. Смените значок ярлыка (если хотите).

На сегодня все, если вы знаете другие способы – пишите в комментариях! Удачи Вам 🙂

Как добавить закладку веб-сайта на главный экран на iPhone и iPad

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

Создание закладки на главном экране позволяет использовать его как портал одним касанием для доступа к определенному онлайн-контенту вместо необходимости открывать браузер, а затем выбирать закладку или вводить URL-адрес веб-сайта.

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

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

Как создать ссылку на веб-сайт на главном экране

1. Запустите Safari на вашем ‌iPhone‌ или ‌iPad‌.
2. Перейдите к сайту, для которого вы хотите создать ярлык на главном экране.
3. Коснитесь значка Поделиться (квадрат со стрелкой, указывающей из него) в нижней части экрана.
4. Прокрутите вниз до списка действий и коснитесь Добавить на главный экран . (Если вы не видите действие, прокрутите вниз и нажмите
   Изменить действия , затем нажмите Добавить рядом с действием Добавить на главный экран . После этого вы сможете выбрать его из Общий лист.)
   
5. Введите имя ссылки на сайт. Это будет заголовок, который появится под его значком на главном экране.
6. Нажмите Добавить в правом верхнем углу экрана.

Ваше новое «веб-приложение» появится в следующем свободном месте на главном экране вашего устройства. Чтобы переместить его, как и любое другое приложение, нажмите и удерживайте его значок, затем нажмите Изменить главный экран , и вы сможете перетащить его в нужное место. Когда вы поместите его в нужное место, нажмите

Готово .

Popular Stories

Apple подтверждает, что iOS 16.

5 будет выпущена на следующей неделе с новыми функциями

вторник, 9 мая 2023 г., 6:57 по тихоокеанскому времени, Джо Россиньол0003

В сегодняшнем пресс-релизе, посвященном новому ремешку Pride Edition для Apple Watch, Apple подтвердила, что iOS 16.5 и watchOS 9.5 будут выпущены для широкой публики на следующей неделе. Обновления программного обеспечения находятся в стадии бета-тестирования с конца марта. «Новый циферблат Pride Celebration и обои для iPhone будут доступны на следующей неделе и требуют наличия watchOS 9.5 и iOS 16.5», — сообщили в Apple. В дополнение к…

Один месяц до WWDC 2023: вот что будет

Пятница, 5 мая 2023 г., 11:02 по тихоокеанскому времени, Джули Кловер

На сегодняшний день остался всего месяц до ключевого мероприятия Apple 2023 WWDC, которое должно состояться в понедельник, 5 июня. WWDC 2023 будет захватывающим, потому что в дополнение к iOS 17 и обычные обновления программного обеспечения, мы также ожидаем увидеть гарнитуру Apple AR / VR.

Подпишитесь на канал MacRumors на YouTube, чтобы увидеть больше видео. Мы подумали, что сделаем краткий обзор всего…

iOS 16.5, которая, вероятно, будет выпущена на следующей неделе с этими небольшими изменениями

Понедельник, 8 мая 2023 г., 5:41 утра по тихоокеанскому времени, автор Джо Россиньол. выпущенный. В сегодняшнем твите аккаунт сообщил, что предстоящий релиз-кандидат iOS 16.5 для разработчиков будет иметь номер сборки 20F65. iOS 16.5 находится в стадии бета-тестирования с конца марта и обещает стать…

Apple объявляет о выпуске Final Cut Pro и Logic Pro для iPad с моделями подписки

, вторник, 9 мая 2023 г., 6:06 по тихоокеанскому времени, автор Hartley Charlton

Сегодня компания Apple объявила о том, что Final Cut Pro и Logic Pro появятся на iPad позже в этом месяце по подписке. Подпишитесь на канал MacRumors на YouTube, чтобы увидеть больше видео. Apple заявляет, что Final Cut Pro и Logic Pro оснащены совершенно новыми сенсорными интерфейсами, которые используют преимущества мультитач на iPad:Final Cut Pro и Logic Pro для iPad предлагают совершенно новые сенсорные интерфейсы, которые позволяют пользователям.

..

iOS 17 Скоро выйдет для iPhone и, по слухам, будет включать эти 8 новых функций

Среда, 3 мая 2023 г., 7:54 утра по тихоокеанскому времени, автор Джо Россиньол. По слухам, обновление будет включать как минимум восемь новых функций и изменений для iPhone, как указано ниже. Первая бета-версия iOS 17 должна быть доступна участникам программы Apple для разработчиков сразу после основного доклада, а публичная бета-версия, вероятно, будет доступна …

, понедельник, 8 мая 2023 г., 16:00 по тихоокеанскому времени, автор Джо Россиньол. В сегодняшнем твите источник сообщил, что они наконец независимо подтвердили эту информацию. В прошлом месяце аналитик Apple Минг-Чи Куо повторил, что объектив перископа обеспечит 5-6-кратный оптический зум при съемке фотографий на iPhone 16 Pro и Pro Max с диагональю 6,3 дюйма и 6,9-Inch Displays

Понедельник, 8 мая 2023 г., 19:47 PDT, Джо Россиньол — точный аналитик индустрии дисплеев Росс Янг из Display Supply Chain Consultants. Янг сообщил MacRumors, что размеры дисплеев 6,3 и 6,9 дюймов округлены в большую сторону. В ответ на нашу новость Янг сказал, что раскроет фактические размеры для…

Apple начинает продавать восстановленные модели MacBook Pro 2023 года

, понедельник, 8 мая 2023 г., 10:46 по тихоокеанскому времени, автор Джо Россиньол. Эти модели были выпущены в январе вместе с новым Mac mini, который еще не был восстановлен. Восстановленные модели имеют скидку примерно на 15 процентов по сравнению с эквивалентными новыми конфигурациями. Apple тестирует, проверяет,…

Как создать собственный фавикон Squarespace (значок браузера)

Наконечники Squarespace

28 июня

Автор: Taylor Nguyen

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

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

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

Следуйте инструкциям, описанным в этом посте, чтобы создать и добавить собственный значок значка для вашего веб-сайта Squarespace. Давайте заменим грустный серый куб чем-то уникальным для вашего бренда, не так ли?

СОДЕРЖАНИЕ

• Создание фавикона + рекомендации

• Добавление фавикона в Squarespace

• Устранение неполадок, из-за которых фавикон не отображается

Шаг 1. Создайте фавикон

Прежде чем мы приступим к созданию фавиконки, важно ознакомиться с передовыми методами.

Хотя оптимальные размеры фавикона составляют 16 x 16 пикселей, Squarespace рекомендует использовать размер изображения от 100 x 100 до 300 x 300 пикселей. Кроме того, файл favicon должен иметь формат .ico или .png, а его размер не может превышать 100 КБ.

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

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

Например, логотип Canva — белый на бирюзовом фоне, но для фавикона используется темно-синий градиент, что делает его гораздо более привлекательным.

Вы можете использовать генератор фавиконок, чтобы создать простой фавикон без каких-либо дизайнерских навыков. Ниже приведены шаги:

• Перейдите на favicon.io/favicon-generator

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

• Просмотрите предварительный просмотр и, когда вы будете довольны дизайном, нажмите «Загрузить».

• В загруженной папке найдите файл размером больше 100×100 и меньше 300×300. Это будет использоваться для вашего фавикона Squarespace.

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

Шаг 2. Добавьте свой собственный значок в Squarespace

Войдите в свою учетную запись Squarespace и выполните следующие действия, чтобы изменить значок сайта:

• В главном меню нажмите Дизайн , затем нажмите Значок браузера

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

• Нажмите Сохранить.

Если у вас более старый веб-сайт Squarespace (версия 7.0), шаги немного отличаются. В меню Design выберите Logo & TItle . Затем прокрутите вниз до Значок браузера (Favicon), загрузите изображение и нажмите Сохранить .

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

Устранение неполадок Иконка Squarespace не отображается

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

• Размеры от 100px x 100px до 300px x 300px

• Тип файла .ico или .png

• Размер файла не превышает 100 КБ 90 003

Если все в порядке, попробуйте очистить кеш.