Створення значка [закрито]

95

Зачинено. Це питання не відповідає вказівкам щодо переповнення стека . Наразі відповіді не приймаються.

Хочете покращити це питання? Оновіть питання, щоб воно було тематичним для переповнення стека.

Закрито 3 роки тому .

Удосконалюйте це питання

Як я можу створити значок для мого веб-сайту?

html favicon

— Ри-
джерело

1

Можливий дублікат Як додати піктограму вкладки браузера (значок) для веб-сайту?

— Міхал Перлаковський,

@Gothdo Це не дублікат! Той, на кого ти вказуєш, Є! Цей передував цьому на півтора року!

— Дов Міллер,

5

Я голосую за те, щоб закрити це питання як нетематичне, оскільки мова йде не про програмування, а про веб-дизайн.

— Kyll

@DovMiller Краще запитання з кращими відповідями - це те, яке має залишатися відкритим.

— mbomb007

100

Шукаючи значки, я виявив, що мені потрібно більше 10 видів файлів для роботи у всіх браузерах та пристроях :(

Я злився і створив власний генератор значків, який створює всі ці файли та правильний заголовок HTML для кожного з них: faviconit.com

Сподіваюся, вам сподобається.

— Едуардо Руссо
джерело

14

Відмінна програма. Це один з найкращих сайтів генераторів значків, які я бачив.

— Chris Livdahl

1

Дякую, Крісе! Я радий допомогти!

— Едуардо Руссо

3

@EduardoRusso це просто приголомшливо - дякую!

— davnicwil

4

Хороша робота. Працює, як очікувалося.

— Дільшан

1

Працює краще, ніж очікувалося! Крихітна помилка (?): При використанні розширених шлях і версія не включаються в браузерconfig.xml. Проте все одно люблю це. : D

— mrjink

42

Якщо у вас вже є зображення логотипу, яке ви хочете перетворити на значок, тоді ви можете перетворити його за допомогою http://www.favicomatic.com/ . Це створює чіткі значки, і мені не довелося їх редагувати після їх створення. Він буде генерувати значки у форматі 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="&nbsp;"/>
<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, і це було безумовно найкращим.

— Джаред Менард
джерело

1

Як я можу покращити цю відповідь, щоб уникнути подальших проти?

— Джаред Менард,

3

Не знаю. Ваша відповідь зробила це для мене п’ятихвилинною роботою. Дякую.

— andyb

1

деякі люди просто люблять голосувати без причини. ТАК потрібно мати політику проти цього. До речі, нам справді потрібно багато різних розмірів, або нам 16х16 і 32х32 просто достатньо, скільки генерує веб-сайт

— batmaci

Я особисто не знаю, яка тут найкраща практика. На моєму сайті, я думаю, ми просто використовуємо один. Вони можуть бути корисними для chrome прогресивних веб-програм у поєднанні з manifest.json.

— Джаред Менард,

Я знайшов цей ресурс на favicomatic.com , він називається "Шпаргалка Favicon" github.com/audreyr/favicon-cheat-sheet

— Джаред Менард

20

GIMP - хороша програма для цього. Просто збережіть зображення у форматі PNG, а потім додайте

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

у <HEAD>розділі вашої сторінки.

— Стефано Борині
джерело

7

Gimp також пропонує можливість зберегти його як favicon.ico, що позбавить вас від проблем із додаванням посилання.

4

Шкода, що старі MSIE (які все ще досить популярні) не приймуть PNG замість "належного" форматованого файлу ICO.

— Мар Орлігссон,

Щоб закріпити веб-сайти на панелі завдань, Windows також вимагає ico.

— Necriis

8

Ви створюєте файл піктограм розміром 16x16 або 32x32 або 64x64. Назвіть його favicon.ico та розмістіть у кореневій папці загального веб-сайту.

Існують веб-сайти, які для вас конвертують інші графічні формати у .ico. тобто. http://tools.dynamicdrive.com/favicon/

— Джим
джерело

4

Також: ви можете зберегти файл значка в будь-якому місці, якщо додати a <link rel="shortcut icon" href="link/to/fav.ico" />до <head>блоку ваших сторінок.

— Мар Орлігссон,

1

tools.dynamicdrive.com/favicon також дозволить вам об'єднати кілька розмірів в одному файлі, що чудово

— hdorio

5

Одним з найкращих Інтернет-інструментів Favicon є FaviconGenerator.com . Швидкий, сучасний дизайн, без пуху.

— Стукає X
джерело

1

FaviconGenerator.com також надає доступ до їх API з node / grunt / gulp.

— Метт,

3

Якщо ви хочете створити файли .ico, ви також можете використовувати GIMP для створення значків. Сучасні браузери можуть використовувати звичайні файли зображень, але спочатку я думаю, що це були лише файли .ico. Це редактор зображень з відкритим кодом, схожий на Photoshop. Створіть і відредагуйте зображення потрібного розміру (скажімо, 32 х 32), розрівняйте до одного шару (якщо ви не хочете кілька значків в одному файлі) та збережіть у форматі .ico. Він відформатує його правильно, а потім використовуйте Stefano, <link rel="SHORTCUT ICON" HREF="/favicon.ico">щоб використовувати його на своїй веб-сторінці.

— ракетні мавпи
джерело

3

Я використовую програму Paint.net із відкритим кодом разом із плагіном Icon .

Потім ви можете створити та зберегти зображення у форматі .ico із різними розмірами, вбудованими у файл .ico.

— Метью Лок
джерело

Хм, paint.net.amihotornot.com.au як хост для плагіна Icon? Це законно?

— RonaldB

@RonaldB так, це батьківщина цього плагіна. Дивний домен, чи не так

— Matthew Lock

2

Створюючи значок, ви хочете врахувати наступні фактори:

Підтримувані платформи Десять років тому ви хотіли підтримувати лише настільні браузери, і рішенням було створити класичну favicon.icoкартинку. Сьогодні ви хочете підтримувати iOS (і iOS Safari) та Android (і Android Chrome). Можливо, Windows 10 (і Edge) і новий сенсорний панель Mac Book Pro теж (macOS Safari). Ви вже не можете просто використовувати одне зображення "на один розмір".
Дизайн Як тільки ви підтримуєте кілька платформ, ви стикаєтесь з безліччю керівних принципів проектування. Наприклад, Google використовує прозорі піктограми для власних власних програм на Android, тоді як піктограми iOS не можуть бути прозорими взагалі. Ви не можете просто використовувати підхід "єдиного дизайну, що підходить всім".
Створені піктограми та HTML-код Протягом двох-трьох років посиланням було генерувати якомога більше піктограм, щоб охопити всі випадки. Я боюся, що створив цю тенденцію самостійно: - / Проблема полягає в тому, що в підсумку ви отримуєте 20-ти рядків або HTML, що занадто багато. Для того, щоб отримати задовільне технічне рішення, вам потрібно збалансувати кількість створених піктограм / HTML та підтримуваних платформ.

Як завжди, ви можете створити всі ці активи вручну. Якщо у вас немає дуже, дуже конкретних потреб і бюджету, це точно не той шлях.

Правильним способом для більшості людей є використання генератора значків, який дозволяє вирішувати зовнішній вигляд усіх піктограм та дбати про всі деталі. Єдиним, хто це робить, є Real Favicon Generator . Повне розкриття інформації: Я автор цього веб-сайту.

— philippe_b
джерело

1

А якщо ви використовуєте asp.net, спробуйте застосувати такий значок до своєї сторінки:

<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/

— Тарік
джерело

1

Як примітка, doctype.com закрито станом на 15 лютого 2013 р. Детальніше про це .

— Krease

1

Я роблю свої значки або 16 x 16, або 32 x 32, використовуючи Photoshop. Тоді я зберігаю його як gif, і використовую IrfanView для перетворення gif в ico.

— Макс
джерело