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


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

Что такое Favicon?

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

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

Сделать фавикон можно как используя стандартные возможности Photoshop (или другого графического редактора), так и с помощью всевозможных веб-сервисов.

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

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

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

Также рекомендуется добавлять строку:

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

(для Internet Explorer).

Размер фавикона может быть 16x16, 32x32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57x57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

html - Как добавить значок вкладки браузера (фавикон) для веб-сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

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


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

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


Это фавикон (аббревиатура от Favorite Icon).По умолчанию значок браузера отображается как значок веб-сайта. Однако, если веб-мастер позаботится о оригинальности своего ресурса, он обязательно сделает для него специальный значок. Это как-то поможет сайту выделиться среди множества других. Это также хорошо, потому что некоторые поисковые системы отображают значок веб-сайта вместе со ссылкой на странице результатов поиска.

Сделать фавикон очень просто. Вы можете сделать это в специальной программе для редактирования иконок, такой как Perfect Icon или IconXP. Кроме того, вы можете использовать редактор изображений Photoshop.Если вы не умеете рисовать, это не проблема. Вы можете просто нарисовать первую букву названия своего сайта и окружить ее художественной рамкой.

Итак, предположим, вы хотите создать значок для своего веб-сайта. Во-первых, вы должны загрузить бесплатный плагин Photoshop, который позволит вам открывать и сохранять изображения ICO. Этот плагин называется Icon Plugin for Photoshop, его можно скачать здесь. Распакуйте архив и скопируйте файл ICO.8bi из архива в папку File Formats, которая находится внутри папки Plug-Ins.Как правило, эту папку можно найти по адресу C: \ Program Files \ Adobe \ Photoshop 7.0 \ Plug-Ins \, но в вашей системе она может находиться в другом месте. Затем запустите Photoshop.

Размер иконки веб-сайта - 16x16 пикселей. Многим будет очень сложно рисовать такой крошечный квадрат. Конечно, вы можете нарисовать большое изображение, а затем уменьшить его до 16x16, но все мелкие детали исчезнут.

Создайте пустое изображение 16x16 с белым фоном. Увеличьте изображение в навигаторе или с помощью инструмента Zoom до максимума.В качестве примера я взял инструмент «Форма», выбрал «Сердце» в списке доступных фигур и растянул его пропорционально (удерживая клавишу Shift) почти на всю область:


Затем я объединил все слои и уменьшил их до реального размера с помощью навигатора. Выглядит не очень оригинально, но все же неплохо для примера.
Теперь сохраните изображение как файл favicon.ico. В меню Файл выберите Сохранить как (обратите внимание, что новый формат ICO появился в списке доступных форматов):
Завершите работу, сохранив фавикон.ico на сервере в корне веб-сайта и включая следующий код в заголовок HTML-страницы (обычно между тегами и ):

.

Полное руководство по значкам HTML - iOS, Android, настольный компьютер и другие ... • Code The Web

В этой статье вы узнаете, как создать значок для iOS, Android, рабочего стола и т. Д.…

Начало работы

Не стесняйтесь следить за мной! Возможно, у вас не все устройства, операционные системы или браузеры, о которых я буду говорить, но вы сможете протестировать хотя бы одно или два 😉

Для начала создайте файл HTML со следующим базовым кодом:

  < ! DOCTYPE html>    HTML-иконки    

HTML-иконки!

Откройте его в браузере - он должен выглядеть так:

Теперь вы готовы к работе!

Значок

В сегодняшних примерах мы будем использовать этот значок с вафлями, который я сделал (с мороженым сверху, конечно 🍦 😉):

Не так уж вкусно!

Значки вкладок браузера (значки)

Если вы прямо сейчас посмотрите на маленький значок на вкладке (они также известны как значки), он просто покажет нам скучный значок по умолчанию - никому это не нужно!

Обратите внимание, что в зависимости от того, какой браузер вы используете, вкладки и значок по умолчанию могут немного отличаться.Этот и большинство других снимков экрана браузера в этой статье сделаны в Google Chrome.

Итак, добавим свой! Просто добавьте эту строку кода в свой :

    

Атрибут типа зависит от изображения, которое мы используем. В данном случае мы используем файл .png, , поэтому установим для нашего type значение image / png .Существуют и другие типы , которые вы можете использовать, например, image / ico для файлов .ico .

Щелкните здесь, чтобы просмотреть список поддерживаемых типов файлов.

Также убедитесь, что ваш значок имеет вид 16px, на 16px , 32px на 32px или 64px на 64px . Вы должны убедиться, что фактическое изображение имеет эти размеры, а также атрибут sizes - вы можете изменить размер своих изображений онлайн.Обратите внимание, что другие размеры также работают, но они поддерживаются не всеми браузерами. В этом случае наше изображение имеет размер 64px на 64px - я рекомендую вам использовать этот размер, потому что это самое высокое разрешение из трех.

В любом случае, вот результат:

Теперь рядом с заголовком нашей страницы появился значок! 🎉 🎉

Главный экран Safari и значки закладок

Если мы добавим наш веб-сайт на главный экран в iOS, он по умолчанию даст нам очень уродливый снимок экрана странного размера:

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

    

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

Теперь, если мы снова добавим его на домашний экран, мы получим гораздо лучший результат!

Это также дает нашему веб-сайту значок для закладок Safari на iOS:

И на Mac:

Значки Android

Веб-сайты также можно добавлять на главный экран с помощью Google Chrome на Android.К счастью, нам не нужно указывать значки только для Android! Он будет использовать либо значок, либо значок с изображением яблока , если он у вас есть.

Плитки Windows

В Windows, если вы еще не знаете, есть эти вещи, называемые плитками:

Они также используются на телефонах Windows:

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

В нашем HTML нам нужно определить этот значок, а также три размера квадратных значков: 70px на 70px , 150px на 150px и 310px. на 310 пикселей .Наш прямоугольный значок должен иметь размер 310 пикселей, пикселей в ширину, пикселей, 150 пикселей в высоту, пикселей в высоту.

Одна важная вещь: При создании значков для плиток Windows всегда используйте прозрачный фон.

Вот наши значки, но с прозрачным фоном:

Вот HTML - добавьте его под своим значком Safari и favicon в :

       

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

А если у иконок прозрачный фон, не будет ли это странно смотреться? Да. Причина, по которой у них должен быть прозрачный фон, заключается в том, чтобы Windows могла поместить под них цвет. Возьмем эту плитку в качестве примера:
Здесь значок карты будет изображением (с прозрачным фоном), а затем Windows поместит под ним розовый / фиолетовый цвет. Но как определить цвет Windows? Здесь пригодится метатег msapplication-TileColor . В этом случае шестнадцатеричный цвет фона значка вафли - # 2e2e2e .Имея это в виду, добавьте эту строку под наши значки внутри :

    

Вот результат мета-тегов значков и цвета плитки:

Окончательный HTML

После всего этого вот как должен выглядеть наш окончательный HTML (с комментариями, добавленными для ясности):

      HTML-иконки           

HTML-иконки!

Если вам лень… 😴

Есть замечательный веб-сайт под названием Real Favicon Generator, который генерирует для вас значки, значки Safari, значки Windows и многое другое. Однако я рекомендую вам не использовать это, пока вы не будете достаточно уверены в том, что сделаете это сами. - иначе вы никогда не научитесь. Тем не менее, вы всегда можете найти его, если вам нужно. Так что решать вам.

Заключение

Ура! Это все, что осталось на сегодня. Надеюсь, вы что-то узнали! Если да, то я был бы рад, если бы вы поделились этим или подписались на информационный бюллетень, чтобы получать новые сообщения в свой почтовый ящик. Если вы делаете что-то из этого, вы великолепны и заслуживаете космического тако, если это вообще так! 😎 🌮 🚀

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

Если вам нужна помощь, оставить отзыв или вы хотите поздороваться 👋, я был бы рад, если бы вы сделали это в комментариях ниже.

В следующий раз я сделаю специальный пост на сайтах Quick-reference, чтобы помочь вам в вашем пути программирования. Увидимся тогда!

.

Смотрите также