Как создать иконку для моего сайта?
Создание значка
Ответ 1
Поиск в отношении значков, я обнаружил, что мне нужно более 10 видов файлов для работы во всех браузерах и устройствах: (
Я разозлился и создал свой собственный генератор favicon, который создает все эти файлы и правильный заголовок HTML для каждого из них: faviconit.com
Надеюсь, вам понравится.
Ответ 2
Если у вас уже есть логотип, который вы хотите преобразовать в значок, вы можете его преобразовать с помощью http://www.favicomatic.com/. Он создает четкие значки, и мне не пришлось редактировать их после их создания. Он будет генерировать favicons в 16x16 и 32x32 и процитировать их: "Каждый проклятый размер, сэр!". Сайт также поддерживает/сохраняет прозрачность, присутствующую в некоторых png. Кроме того, их сайт выглядит классно и прост в использовании.
Например, вот логотип stackoverflow:
Вот некоторые из сгенерированных значков:
Они также генерируют необходимый html:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
Я просмотрел первые 20 или около того результатов Google, и это было далеко лучшее.
Ответ 3
GIMP - хорошая программа для этого. Просто сохраните изображение как PNG, затем добавьте
<link rel="SHORTCUT ICON" HREF="/favicon.png">
в разделе <HEAD> вашей страницы.
Ответ 4
Создается файл значков размером 16x16 или 32x32 или 64x64. Назовите его favicon.ico и поместите его в корень общей папки вашего веб-сайта.
Есть веб-сайты, которые будут конвертировать другие графические форматы в .ico для вас. то есть. http://tools.dynamicdrive.com/favicon/
Ответ 5
Один из лучших онлайн-инструментов для значков - FaviconGenerator.com. Быстрый, современный дизайн, отсутствие пуха.
Ответ 6
Если вы хотите создать файлы .ico, вы также можете использовать GIMP для создания значков. Современные браузеры могут использовать обычные файлы изображений, но изначально я думаю, что это были только файлы .ico. Это редактор изображений с открытым исходным кодом, похожий на Photoshop. Создайте и отредактируйте изображение нужного размера (например, 32 x 32), сгладьте на один слой (если вы не хотите, чтобы несколько значков в одном файле) и сохранили как .ico. Он будет правильно отформатировать его, а затем использовать Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">, чтобы использовать его на вашей веб-странице.
Ответ 7
Я использую открытую программу Paint.net вместе с значком плагин.
Затем вы можете создать и сохранить изображение в формате .ico со всеми размерами, встроенными в файл .ico.
Ответ 8
И если вы используете asp.net, попробуйте этот способ применить favicon к своей странице:
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
но вы можете найти более подробную информацию здесь: http://doctype.com/
Ответ 9
Я делаю свои значки 16 x 16 или 32 x 32 с помощью Photoshop. Я сохраняю его как gif, и я использую IrfanView для преобразования gif в ico.
Ответ 10
При создании значка вы должны учитывать следующие факторы:
- Поддерживаемые платформы Десять лет назад вы хотели только поддерживать настольные браузеры, и решение заключалось в создании классического изображения
favicon.ico. В настоящее время вы хотите поддерживать iOS (и iOS Safari) и Android (и Android Chrome). Возможно, Windows 10 (и Edge) и новая панель Mac Book Pro Touch Bar тоже (macOS Safari). Вы не можете просто использовать одно изображение "один размер подходит всем". - Дизайн. Как только вы поддерживаете несколько платформ, вы сталкиваетесь с несколькими принципами проектирования. Например, Google использует прозрачные значки для своих собственных приложений на Android, а иконки iOS не могут быть прозрачными вообще. Вы не можете просто использовать подход "один дизайн подходит всем".
- Сгенерированные значки и HTML-код. В течение двух или трех лет ссылка должна была генерировать как можно больше значков, чтобы охватить все случаи. Я боюсь, что сам создал эту тенденцию: -/Проблема в том, что в итоге вы получаете строки из 20-ти или HTML, что слишком много. Чтобы иметь удовлетворительное техническое решение, вам необходимо сбалансировать количество сгенерированных значков /HTML и поддерживаемых платформ.
Как обычно, вы можете создать все эти активы вручную. Если у вас нет очень, очень конкретных потребностей и бюджета, это определенно не путь.
Правильный способ для большинства людей - использовать генератор favicon, который позволяет вам выбирать внешний вид всех значков и заботиться обо всех деталях. Единственное, что делает это Real Favicon Generator. Полное раскрытие: я являюсь автором этого сайта.